一、表單的作用

收集用戶信息 ，與跟用戶進(jìn)行交互，收集用戶資料。

二、表單的組成

在 HTML 中，一個(gè)完整的表單通常由表單域、表單控件（也稱為表單元素）和 提示信息3個(gè)部分構(gòu)成。

1.表單域

表單域就是一個(gè)包含表單元素的區(qū)域。

常用屬性：

表單常用屬性.png

 <form action=“url地址” method=“提交方式” name=“表單域名稱"> 
   各種表單元素控件 
 </form>

form標(biāo)簽會(huì)把它范圍內(nèi)的表單元素信息提交給服務(wù)器.

method選擇get在提交后可在瀏覽器地址欄上看到所有name值，選擇post則看不見。

2.表單控件

2.1 input輸入表單元素

在表單元素中 <input> 標(biāo)簽用于收集用戶信息。

在 <input> 標(biāo)簽中，包含一個(gè) type 屬性，根據(jù)不同的 type 屬性值，輸入字段擁有很多種形式（可以是文本 字段、復(fù)選框、掩碼后的文本控件、單選按鈕、按鈕等）。

type屬性：

type屬性.png

placeholder屬性：用于text和password輸入框中提示作用。

除 type 屬性外，<input>標(biāo)簽還有其他很多屬性，其常用屬性如下：

表單其他屬性.png

<form action="123.php" method="GET" name="name2">
    <!-- text屬性：定義單行輸入字段 -->
    用戶名：<input type="text" name="name" placeholder="請(qǐng)輸入用戶名" maxlength="4"><br />
</form>

<!-- password：定義密碼，輸入字符加密 -->
密碼：<input type="password" name="psw" placeholder="請(qǐng)輸入密碼" maxlength="15"><br />

<!-- radio：單選按鈕，小圓圈 -->
<!-- 單選按鈕各個(gè)選項(xiàng)的name值都要是一樣的 -->
性別：男<input type="radio" name="sex" value="nan">女<input type="radio" name="sex" value="nv"><br />

<!-- checkbox：多選按鈕，小方框 -->
<!-- 多選按鈕各個(gè)選項(xiàng)的name值都要是一樣的 -->
愛好：唱 <input type="checkbox" name="hobby" value="chang">跳 <input type="checkbox" name="hobby" value="tiao">
RAP <input type="checkbox" name="hobby" value="rap">
籃球<input type="checkbox" name="hobby" value="lanqiu"><br />

<!-- reset：重置按鈕，將input里的元素恢復(fù)到初始值 -->
<input type="reset" value="重置">

 <!-- submit：提交按鈕，把數(shù)據(jù)發(fā)送給服務(wù)器 -->
 <input type="submit" value="立即注冊(cè)">

<!-- button:普通按鈕，不會(huì)發(fā)送數(shù)據(jù)給服務(wù)器 -->
<input type="button" value="發(fā)送短信驗(yàn)證碼"><br>

<!-- checked = "checked"：默認(rèn)勾選 -->
<input type="checkbox" checked="checked" name="xieyi" value="tongyi">同意本協(xié)議<br>

<!-- file：上傳文件 -->
上傳頭像：<input type="file" name="file"><br>

<!-- image：以圖像的形式提交按鈕 -->
<input type="image" src="09-注冊(cè).png" name="tijiao">

表單.png

2.2 label標(biāo)簽搭配input

lable標(biāo)簽用于綁定一個(gè)表單元素, 當(dāng)點(diǎn)擊<label> 標(biāo)簽包含的內(nèi)容時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)(光標(biāo))轉(zhuǎn)到或者選擇對(duì)應(yīng)的表單元素上，用來增加用戶體驗(yàn).。

<!-- lable標(biāo)簽作用是點(diǎn)擊標(biāo)簽里的內(nèi)容就能定位到輸入框，提高用戶體驗(yàn)lable標(biāo)簽里面的for屬性必須和input標(biāo)簽里面的id屬性一一對(duì)應(yīng)。 -->
<!-- 點(diǎn)擊“用戶名”，就可定位到輸入框中 -->
<label for="name">用戶名：</label>
<input type="text" name="username" placeholder="請(qǐng)輸入用戶名" maxlength="4" id="name">

2.3 select下拉表單元素

在頁面中，如果有多個(gè)選項(xiàng)讓用戶選擇，并且想要節(jié)約頁面空間時(shí)，可以使用<select>標(biāo)簽控件定義下拉列表.。

<!-- 一個(gè)select標(biāo)簽中至少要有兩個(gè)option -->
地址：<select>
        <option value="dizhi">天上</option>
        <option value="dizhi">地下</option>
        <!--selected="selected" 默認(rèn)顯示在第一行 -->
        <option value="dizhi" selected="selected">你心里</option>
      </select>

下拉.png

注意:

1. select中至少包含一對(duì)option。
2. 在<option> 中定義 selected =“ selected " 時(shí)，當(dāng)前項(xiàng)即為默認(rèn)選中項(xiàng)

2.4 textarea文本域表單元素

用于定義多行文本輸入的控件，常見于留言板，評(píng)論。

<textarea cols="20" rows="10">你好</textarea>

cols是顯示的列數(shù)，rows是顯示的行數(shù)。一般在css里設(shè)置。