IT課程 HTML基礎 013_表單和用戶輸入
表單
HTML 表單（Form）是 HTML 中非常重要的一部分，它能讓用戶在網頁上輸入信息，並將信息提交到服務器。
示例：
<form action="/submit" method="post"> <!-- 表單元素在這裡 --></form><form>元素定義了用戶輸入數據的區域，並且可以包含不同類型的輸入元素，如文本域<textarea>、下拉列表<select>、單選框<radio>、複選框<checkbox>和按鈕<button>等。
表單屬性：
action：定義表單數據提交到服務器後的處理文件的 URL。method：定義數據發送到服務器所使用的HTTP方法，常用的值有 “get” 和 “post”。name： 用於指定表單的名稱。表單名稱用於標識表單，並在服務器端處理表單數據時使用。enctype：用於指定表單數據的編碼方式。表單數據可以使用application/x-www-form-urlencoded或multipart/form-data編碼方式。autocomplete：用於指定是否啟用表單的自動完成功能。如果設置為on，則瀏覽器將會自動填充表單中之前輸入過的數據。novalidate：用於指定是否驗證表單數據。如果設置為on，則表單數據在提交之前將不會進行驗證。
[!小結]
- form 表單本身並不可見。
文本字段
在表單中，我們經常需要用戶輸入字母、數字等文本內容。這可以通過<input>元素完成，其type屬性設置為 “text”。
示例：
<form>姓名: <input type="text" name="name"><br>年齡: <input type="text" name="age"></form>效果：
[!小結]
- 在大多數瀏覽器中，文本域的默認寬度是 20 個字符。
密碼字段
如果你需要用戶輸入密碼，可以將<input>元素的type屬性設置為 “password”，輸入的內容會被隱藏起來。
示例：
<form>密碼: <input type="password" name="pwd"></form>效果：
[!小結]
- 密碼字段字符不會明文顯示，而是以星號 * 或圓點 . 替代。
單選按鈕（Radio Buttons）
單選按鈕和複選框可以讓用戶在多個選項中選擇一個或多個。單選按鈕的type屬性值為 “radio”。
示例：
<form action="">性別：<input type="radio" name="sex" value="male" checked>男<input type="radio" name="sex" value="female">女</form>效果：
[!小結]
- 單選按鈕的
name屬性值必須相同，否則它們將不會屬於同一個組。checked屬性用於指定單選框是否默認選中。
複選框（Checkboxes）
複選框可以選取一個或多個選項，使用 <input type="checkbox"> 定義
示例：
<form> 您使用過的APP： <input type="checkbox" name="app" value="jd">京東 <input type="checkbox" name="app" value="wechat">微信 <input type="checkbox" name="app" value="qq">QQ <input type="checkbox" name="app" value="douyin">抖音</form>效果：
[!小結]
checked屬性用於指定複選框是否默認選中。
下拉列表（select）
下拉列表可以讓用戶從多個選項中選擇一個。它由<select>元素創建，並使用<option>元素來定義選項。
示例：
<form action=""> 請選擇您的國家： <select name="country"> <option value="china">中國</option> <option value="us">美國</option> <option value="japan">日本</option> </select></form>效果：
[!小結]
selected屬性用於指定下拉列表的默認選項。disabled屬性用於指定下拉列表是否可用。- 可以使用
size屬性來指定下拉列表中可見選項的數量。
提交按鈕（Submit、Reset、Button）
表單通常需要一個按鈕來提交或確認用戶的輸入。submit、reset 和 button 都是 HTML 中的表單按鈕元素。
| 類型 | 屬性 | 功能 | 使用場景 |
|---|---|---|---|
| submit | type="submit" | 提交表單數據 | 提交登錄表單、提交註冊表單等 |
| reset | type="reset" | 重置表單數據 | 重置搜索表單、重置購物車等 |
| button | type="button" | 無 | 通常配合JavaScript使用 執行操作、跳轉頁面等 |
| image | type="image" | 使用圖像來表示按鈕 | 執行操作、跳轉頁面等 |
示例：
<form action="/submit" method="post"> <input type="submit" value="提交按鈕"> <input type="reset" value="重置按鈕"> <button type="button" value="確認按鈕">確認按鈕</button> <input type="image" src="[zhaojian-avatar.png (1332×1332)](https://www.zhaojian.net/images/zhaojian-avatar.png)" alt="圖像按鈕" width="50" height="50"></form>效果：
[!小結]
- post：指的是 HTTP POST 方法，表單數據會包含在表單體內然後發送給服務器，用於提交敏感數據，如用戶名與密碼等。
- get：默認值，指的是 HTTP GET 方法，表單數據會附加在 action 屬性的 URL 中，並以 ?作為分隔符，一般用於不敏感信息，如分頁等。例如：https://www.zhaojian.net/?page=1，這裡的 page=1 就是 get 方法提交的數據。
表單元素及屬性
| 元素 | 類型 | 描述 | 屬性 |
|---|---|---|---|
form | 表單 | 表單的容器元素。它指定表單的名稱、提交方式和提交地址。 | name、action、method、enctype、accept-charset、target、autocomplete、novalidate |
input | 輸入 | 表單中最常用的元素。它可以接收各種類型的用戶輸入，例如文本、數字、日期等。 | type、name、value、placeholder、disabled、readonly、autocomplete、required、pattern、min、max、step |
textarea | 輸入 | 用於接收多行用戶輸入。 | name、cols、rows |
select | 選擇 | 用於接收用戶選擇，它可以包含多個選項。 | name、multiple、size |
option | 選擇 | 用於 select 元素中，定義可供選擇的選項。 | value、selected |
radio | 選擇 | 用於接收單選用戶輸入。它可以包含多個單選框。 | name、value、checked |
checkbox | 選擇 | 用於接收多選用戶輸入。它可以包含多個複選框。 | name、value、checked |
submit | 按鈕 | 用於提交表單。 | value |
reset | 按鈕 | 用於重置表單。 | value |
button | 按鈕 | 用於創建按鈕。它可以用於提交表單、重置表單、或執行其他操作。 | type、name、value |
label | 標籤 | 用於為輸入元素提供標籤。標籤可以幫助用戶理解輸入元素的用途。 | for |
fieldset | 分組 | 用於將表單元素分組。 | name、legend |
legend | 標題 | 用於為 fieldset 元素提供標題。 | |
optgroup | 分組 | 用於將選項分組。 | label |