在 HTML 中，表單是由 <form> 標(biāo)記定界的區(qū)域，包含文本輸入框、按鈕、復(fù)選框和圖形用戶界面的其他功能部件。Web 應(yīng)用程序使用表單以允許最終用戶提供要發(fā)送到服務(wù)器的數(shù)據(jù)。

form元素

常用屬性：
action：
提交表單的地址
method：
提交表單使用的方法，一般有g(shù)et和post兩種。

<form action="/getInfo" method="get">
</form>

input元素

input元素通過type屬性來設(shè)置不同的input類型。

文本域

<div class="username">
  <label for="username">姓名：</label>
  <input id="username" type="text" name="username" placeholder="用戶名">
</div>

密碼域

<div class="password">
  <label for="password">密碼：</label>
  <input id="password" type="password" name="password">
</div>

復(fù)選

checked為默認(rèn)勾選項(xiàng)

<div class="hobby">
  <label>愛好：</label>
  <input type="checkbox">dota
  <input type="checkbox" >籃球
  <input type="checkbox" checked>騎行
</div>

單選

checked為默認(rèn)勾選項(xiàng)

<div class="sex">
  <label>性別：</label>
  <input type="radio" name="sex" value="man" checked>男
  <input type="radio" name="sex" value="woman">女
</div>

提交

<input type="submit" value="提交">

重置

<input type="reset" value="重置">

按鈕

<input type="button" value="確認(rèn)">

隱藏域

對(duì)用戶不可見，祥見 form常見問題

<input type="hidden" name="country" value="23232323" />

選擇并上傳文件

accept屬性可限制選擇文件的類型

<input type="file" name="pic" accept="image/png" />

select元素

selected為默認(rèn)選中項(xiàng)

<select name="mycar">
  <option value="sabo" selected>薩博</option>
  <option value="bentian">本田</option>
  <option value="benchi">奔馳</option>
</select>

label元素

label元素為input元素定義標(biāo)注。
當(dāng)for屬性與關(guān)聯(lián)元素的 id 屬性要相同時(shí)，當(dāng)鼠標(biāo)選擇該標(biāo)簽時(shí)，關(guān)聯(lián)的元素控件會(huì)獲得焦點(diǎn)。

<div class="username">
    <label for="username">姓名</label>
    <input id="username" type="text" name="username" placeholder="用戶名">
</div>

textarea元素

<div class="comment">
    <label>評(píng)論：</label>
    <textarea name="comment" id="" cols="30" rows="10" placeholder="ddd"></textarea>
  </div>

from相關(guān)

form表單有什么作用？有哪些常用的input 標(biāo)簽，分別有什么作用？

<form> 標(biāo)簽用于為用戶輸入創(chuàng)建 HTML 表單，表單用于向服務(wù)器傳輸數(shù)據(jù)。

常用的input標(biāo)簽和作用
button——定義可點(diǎn)擊的按鈕
checkbox——定義復(fù)選框
radio——定義單選按鈕
text——定義單行輸入框，可在其中輸入文本
file——定義輸入字段和“瀏覽”按鈕，供文件上傳
hidden——定義隱藏的輸入字段
image——定義圖像形式的提交按鈕
password——定義密碼字段，該字段中的字符被掩碼
reset——定義重置按鈕，用于清除表單中的所有數(shù)據(jù)
submit——定義提交按鈕，把表單數(shù)據(jù)發(fā)給服務(wù)器

post 和 get 方式的區(qū)別？

** GET**
查詢字符串（名稱/值對(duì)）是在 GET 請(qǐng)求的 URL 中發(fā)送的：

test/demo_form.asp?name1=value1&name2=value2

GET 請(qǐng)求可被緩存
GET 請(qǐng)求保留在瀏覽器歷史記錄中
GET 請(qǐng)求可被收藏為書簽
GET 請(qǐng)求不應(yīng)在處理敏感數(shù)據(jù)時(shí)使用
GET 請(qǐng)求有長(zhǎng)度限制
GET 請(qǐng)求只應(yīng)當(dāng)用于取回?cái)?shù)據(jù)

POST

POST /test/demo_form.asp HTTP/1.1
Host: w3schools.com
name1=value1&name2=value2

POST 請(qǐng)求不會(huì)被緩存
POST 請(qǐng)求不會(huì)保留在瀏覽器歷史記錄中
POST 不能被收藏為書簽
POST 請(qǐng)求對(duì)數(shù)據(jù)長(zhǎng)度沒有要求

在搜索引擎中檢索信息等獲取信息，使用get方法。在注冊(cè)、登錄、提交用戶信息等提交信息，應(yīng)使用post方法。

在input里，name 有什么作用？

1)規(guī)定input元素的名稱，用于對(duì)提交到服務(wù)器后的表單數(shù)據(jù)進(jìn)行標(biāo)識(shí)；
2)在客戶端提供給 JavaScript，使其可以引用表單數(shù)據(jù)；
3)用于單選／多選分組，相同name為一組。

radio 如何 分組?

通過相同name的值來分組

placeholder 屬性有什么作用?

提供可描述輸入字段預(yù)期值的提示信息，該提示會(huì)在輸入字段為空時(shí)顯示，并會(huì)在字段獲得焦點(diǎn)時(shí)消失。

type=hidden隱藏域有什么作用? 舉例說明

隱藏域在頁(yè)面中對(duì)于用戶是不可見的，在表單中插入隱藏域的目的在于收集或發(fā)送信息，以利于被處理表單的程序所使用。瀏覽者單擊發(fā)送按鈕發(fā)送表單的時(shí)候，隱藏域的信息也被一起發(fā)送到服務(wù)器。

< input type="hidden" name="xxx" value="yyy">

當(dāng)用戶使用提交按鈕提交信息時(shí)，將同時(shí)上傳value值為yyy的信息。