（十一）表單標籤

目的是為了收集使用者資訊。
在HTML中，一個完整的表單通常由表單控制元件（也稱為表單元素）、提示資訊和**表單域**3個部分構成。
（表單域是指一個很大的表單區域，裡面包含了表單控制元件和提示資訊。）

1、input控制元件
在上面的語句中<input />是一個單標籤，type屬性是其最基本的屬性，
<input />標籤還可以定義其他很多的屬性，其常用屬性如下圖表：

input控制元件的常用屬性圖表

語法格式：提示語：<input type="屬性值" />

*（1）單選按鈕和複選按鈕
單選按鈕：例：
性別：<input type="radio" name="sex" />女 <input type="radio name="sex" />男

*注：如果是一組，我們通過相同的name值來實現。

單選按鈕（可以同時選擇多個）：例：
愛好：<input type="checkbox" name="hobby"/>足球 <input type="checkbox" name="hobby"/>籃球.......

*（2）預設選中的表單屬性
checked=”checked”
例：“愛好預設選擇足球”
愛好：<input type="checkbox" name="hobby" checked="checked" />足球

*（3）按鈕組
①普通按鈕
搜尋：<input type="button" value="搜尋" />

②提交按鈕

<input type="submit" />

③重置按鈕

<input type="reset" value="重置表單" />

④影象按鈕

<input type="image" src="...." />

⑤檔案域

<input type="file" />

input控制元件例項程式碼圖

input控制元件例項效果圖

*（4）最多字元數和文字值
①最多字元數 maxlength
例：“密碼框最多能輸入6位數”

<input type="password" maxlength="6" />
 

②input控制元件中的預設文字值 value
例：“文字框中預設文字為‘使用者名稱’”

<input type="text" value="使用者名稱" />

2、label標籤

label標籤為input元素定義標註
作用：用於繫結一個表單元素，當點選label標籤的時候，被繫結的表單元素就會獲得輸入焦點。

使用label標籤的方法：
①直接用label標籤對input進行包裹：

<label> 輸入賬號：<input type="text" /> </label>

②如果label裡面有多個表單，想定位到某一個，就通過for id的格式來進行：

<label for="two"> 輸入賬號：<input type="text" /> <input type="text" id="two" /> </label>

label標籤例項程式碼圖

label標籤例項效果圖