初學者指南：HTML 表單（Form）
更新日期： 2024 年 10 月 16 日
在網頁開發中，表單（Form） 是一個非常重要的工具，它能夠幫助用戶與網站互動，無論是註冊帳號、填寫聯絡信息，還是提交訂單，表單都是不可或缺的部分。
學習如何創建和使用 HTML 表單，可以幫助你更好地構建用戶與網站之間的互動。
在這篇文章中，我們將介紹 HTML 表單的基本結構和常見的表單元素，幫助你掌握如何創建簡單的表單。
HTML 表單的基本結構
在 HTML 中，表單是使用 <form> 標籤來創建的，並包含多種可以讓用戶輸入資料的表單元素，如文本框、按鈕、選擇框等。
<form>：定義整個表單。<input>：定義輸入框，供用戶輸入文本、數字等。<label>：定義表單項的標籤，幫助用戶了解需要輸入什麼內容。<button>：定義表單中的按鈕，比如提交按鈕。
範例表單
下面是一個基本的表單範例：
<form action="/submit-form" method="post">
<label for="name">姓名：</label>
<input type="text" id="name" name="name" required placeholder="請輸入您的姓名">
<br>
<label for="email">電子郵件：</label>
<input type="email" id="email" name="email" required placeholder="請輸入您的電子郵件">
<br>
<button type="submit">提交</button>
</form>在這個例子中：
<form>標籤定義了一個表單，並指定了action屬性來決定提交表單後的目標網址，以及method屬性來決定提交方式（如post或get）。<label>標籤用於為輸入框提供描述，使表單更具可讀性。<input>標籤用於創建輸入框，並通過type屬性設置輸入框的類型（例如文本框或電子郵件框）。此外，使用placeholder屬性來顯示提示文本，幫助用戶了解應該輸入什麼樣的內容。<button>創建一個提交按鈕，點擊後會提交表單中的數據。
表單的屬性
name 屬性
name 屬性用於給表單中的輸入元素指定名稱。
這個名稱在表單提交時用於識別和傳遞相應的數據。每個表單元素應該有一個唯一的 name 屬性值，這樣在後端可以正確地接收到用戶輸入的數據。
<input type="text" id="username" name="username">maxlength 和 minlength 屬性
maxlength 和 minlength 屬性用於設定輸入框的最大和最小字符數限制。
maxlength：限制用戶輸入的最大字符數，防止輸入過長的內容。minlength：要求用戶至少輸入一定數量的字符，確保輸入內容符合要求。
<input type="text" id="username" name="username" maxlength="20" minlength="5" placeholder="請輸入5-20個字符">action 屬性
action 屬性定義表單提交後要處理數據的目標網址。
<form action="/submit-form">
...
</form>method 屬性
method 屬性決定表單數據的提交方式。最常見的值有：
get：將數據附加在 URL 後面，適合用於簡單查詢。post：將數據作為請求主體發送，更安全，適合用於提交敏感信息。
<form action="/submit-form" method="post">
...
</form>required 屬性
required 屬性用於確保用戶必須填寫某個輸入框，否則無法提交表單。
<input type="text" id="name" name="name" required>placeholder 屬性
placeholder 屬性用於在輸入框中顯示提示文本，幫助用戶了解應該輸入什麼樣的內容。當用戶開始輸入時，提示文本會自動消失。
<input type="text" id="username" name="username" placeholder="請輸入用戶名">常見的表單元素
文本輸入框：<input type="text">
文本輸入框是最常見的表單元素之一，允許用戶輸入文字。
<label for="username">用戶名：</label>
<input type="text" id="username" name="username" placeholder="請輸入用戶名">送出按鈕：<input type="submit">
送出按鈕用於提交表單中的所有數據。
<input type="submit" value="送出表單">密碼輸入框：<input type="password">
密碼輸入框用於輸入敏感信息，例如密碼，輸入的內容會以點符號或星號隱藏。
<label for="password">密碼：</label>
<input type="password" id="password" name="password" placeholder="請輸入密碼">電子郵件輸入框：<input type="email">
電子郵件輸入框可以驗證用戶輸入的是否為有效的電子郵件格式。
<label for="user-email">電子郵件：</label>
<input type="email" id="user-email" name="user-email" placeholder="請輸入您的電子郵件">單選按鈕：<input type="radio">
單選按鈕允許用戶從多個選項中選擇一個。checked 屬性可以用來預設選中某個核取方塊，使其在頁面加載時即為選中狀態。
<p>性別：</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>核取方塊：<input type="checkbox">
核取方塊允許用戶選擇多個選項。checked 屬性可以用來預設選中某個核取方塊，使其在頁面加載時即為選中狀態。
<p>興趣：</p>
<input type="checkbox" id="coding" name="interest" value="coding" checked>
<label for="coding">編程</label>
<input type="checkbox" id="music" name="interest" value="music">
<label for="music">音樂</label>下拉選單：<select>
下拉選單讓用戶從多個選項中選擇一個。selected 屬性可以用來預設選中某個核取方塊，使其在頁面加載時即為選中狀態。
<label for="country">選擇國家：</label>
<select id="country" name="country">
<option value="taiwan">台灣</option>
<option value="japan">日本</option>
<option value="usa">美國</option>
</select>文本區域：<textarea>
文本區域用於輸入多行文本，例如留言或描述。
<label for="message">留言：</label>
<textarea id="message" name="message" rows="4" cols="50" placeholder="請輸入您的留言"></textarea>電話輸入框：<input type="tel">
電話輸入框用於輸入電話號碼，允許用戶輸入有效的電話號碼格式。
<label for="phone">電話號碼：</label>
<input type="tel" id="phone" name="phone" placeholder="請輸入您的電話號碼">連結輸入框：<input type="url">
連結輸入框用於輸入網址，允許用戶輸入有效的 URL 格式。
<label for="website">網站：</label>
<input type="url" id="website" name="website" placeholder="請輸入您的網站網址">日期輸入框：<input type="date">
日期輸入框允許用戶選擇或輸入一個特定的日期。
<label for="birthdate">出生日期：</label>
<input type="date" id="birthdate" name="birthdate">時間輸入框：<input type="time">
時間輸入框允許用戶選擇或輸入一個具體的時間。
<label for="appointment">預約時間：</label>
<input type="time" id="appointment" name="appointment">顏色輸入框：<input type="color">
顏色輸入框允許用戶選擇一個顏色。
<label for="favcolor">選擇您喜歡的顏色：</label>
<input type="color" id="favcolor" name="favcolor">範圍輸入框：<input type="range">
範圍輸入框允許用戶在給定的最小值和最大值之間選擇一個數值，通常用於音量控制或亮度調整等場景。
<label for="volume">調整音量：</label>
<input type="range" id="volume" name="volume" min="0" max="100">清空按鈕：<input type="reset">
清空按鈕用於重置表單中的所有輸入內容，恢復初始狀態。
<input type="reset" value="清空表單">搜尋輸入框：<input type="search">
搜尋輸入框允許用戶輸入查詢關鍵字，通常用於搜索欄。
<label for="search">搜尋內容：</label>
<input type="search" id="search" name="search" placeholder="請輸入搜尋內容">文件上傳框：<input type="file">
文件上傳框允許用戶從本地設備選擇並上傳文件。
<label for="resume">上傳履歷：</label>
<input type="file" id="resume" name="resume">使用 CSS 美化表單
為了讓表單更加美觀，通常會使用 CSS 來改變表單元素的外觀。
範例：使用 CSS 美化表單
<style>
form {
width: 300px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
}
input, select, textarea, button {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background-color: #4CAF50;
color: white;
border: none;
}
</style>
<form action="/結論
通過學習本文，你應該已經掌握了如何使用 HTML 創建和使用表單，包括各種表單元素和屬性。
表單是用戶與網站互動的重要方式，從簡單的文本輸入到複雜的多選框和日期選擇器，都可以使用 HTML 來輕鬆構建。
為了讓表單看起來更專業和美觀，建議使用 CSS 來美化表單的外觀。
如果你想讓表單更具吸引力，可以考慮使用一些流行的 CSS 框架，如 Bootstrap。
希望這篇文章對你有幫助，並祝你在網頁開發的學習旅程中一切順利！