3 HTML的表單標籤

3.1 輸入項標籤

<input/>

表單輸入項標籤之一，使用者可以在該標籤上 通過填寫和選擇 進行資料的輸入。

• type:設定該標籤的種類

  • text:文字框。 預設
  • password:密碼框。 內容為非明文
  • radio:單選框。 在同一組內有單選效果
  • checkbox:複選框。 在同一組內有複選效果
  • submit:提交按鈕。用於控制表單提交資料
  • reset:重置按鈕。 用於將表單輸入項恢復到預設狀態
  • file:附件框。用於檔案上傳。
  • hidden:隱藏域。一般用作提交伺服器需要拿到，但使用者不需要看到的資料。
  • button:普通按鈕。需要和JS事件一起用

• name: 單選框、複選框進行資料的分組。/ 設定該標籤對應的引數名

  某個表單輸入項需要通過引數列表提交，就必須設定name屬性

• value:設定該標籤對應的引數值。 / 作為按鈕的名字
  value屬性的設定策略：

  1. 文字框、密碼框這樣的表單輸入項，可以不強制指定value，因為使用者可以自由輸入
  2. 單選框、複選框這樣的表單輸入項，必須強制指定value，因為使用者無法輸入，只能選擇，如果不指定value，那麼提交上去的只有on

• checked:設定單選框/複選框的預設選中狀態

• readonly:設定該標籤的引數值只讀，使用者無法手動更改。資料是可以正常提交

• disabled:設定該標籤不可用，引數值無法更改，且引數值也無法提交

示例：

3.2 選擇標籤框

<select></select>

定義一個選擇框

• name: 設定該標籤對應的引數名
• multiple：設定該標籤選項全部顯示，並且可以進行多選提交。預設為單選。

<option></option>

選項標籤，用於為一個選擇框新增一個選項

• value:設定需要提交的引數值。
• selected:設定選項的預設選中狀態

示例

3.3 文字域標籤

<textarea></textarea>

表單輸入項標籤之一，使用者可以在該標籤上 通過輸入進行資料的輸入。

• name: 設定該標籤對應的引數名

文字域和文字框區別：

1. 文字框不能換行，文字域可以
2. 文字框引數值是value屬性，文字域引數值是標籤的內容體

3.4 表單標籤

<form></form>

用於在效果中定義一個表單，用於提交使用者填寫的資料。

• action:將資料提交到何處。

• method:將資料以何種方式提交

  • Get提交：把資料拼接到位址列上（預設）
  • Post提交方式特點：沒有把提交資料拼接到位址列上。請求體

  Get和post提交方式區別：

  • Post方式提交的資料較Get方式相對安全
  • Post方式從理論上提交的資料量無限大，Get方式有限

儘量使用post方式提交表單

3.5 繫結標籤

<label></label>

常用於繫結內容與表單標籤的關係

• 方法一

  1. 使用label標籤把內容包裹起來
  2. 在表單標籤上新增id屬性
  3. 在label標籤的for屬性中設定對應的id屬性值

• 方法二

  直接用label標籤吧內容和表單一起包裹起來