本文介紹關(guān)于form表單的一些使用方法
網(wǎng)站是如何與用戶進(jìn)行交互的拢驾？使用HTML表單踪旷。表單用于搜集不同類(lèi)型的用戶輸入。

表單元素

<form> 元素定義HTML表單：

<form>
--form elements--
</form>

HTML表單包含表單元素

<form>元素中可以包含：<button>, <datalist>, <fieldset>, <input>, <keygen>, <label>, <legend>, <meter>, <menus>, <optgroup>, <output>, <progress>, <select>, <textarea>等表單元素捻浦。

<input>元素

<input>元素是最重要的表單元素猾编。
<input>元素需要定義type，name舌胶，value或者checked捆蜀，其中，每個(gè)輸入字段必須設(shè)置一個(gè)name屬性幔嫂，checked屬性用于設(shè)置按鈕的預(yù)選項(xiàng)辆它。

type屬性：規(guī)定input元素的類(lèi)型，可設(shè)置值如下：

輸入類(lèi)型：text

<input type="text"> 定義用于文本輸入的單行輸入字段履恩。

<form>
  姓名：<input type="text" name="name"><br>
  班級(jí)：<input type="text" name="class">
</form>
注：文本字段的默認(rèn)寬度是 20 個(gè)字符锰茉。

輸入類(lèi)型：password

<input type="password"> 定義密碼字段。

<form>
用戶名：<input type="text" name="username"><br>
密碼：<input type="password" name"pw">
</form>

輸入類(lèi)型：radio

<input type="radio"> 定義單選按鈕切心。

單選按鈕允許用戶在有限數(shù)量的選項(xiàng)中選擇其中之一：

<form>
<input type="radio" name="sex" value="male" checked>男<br>
<input type="radio" name="sex" value="female">女
</form>

輸入類(lèi)型：submit

<input type="submit"> 定義用于向表單處理程序（form-handler）提交表單的按鈕飒筑。

表單處理程序通常是包含用來(lái)處理輸入數(shù)據(jù)的腳本的服務(wù)器頁(yè)面。
表單處理程序是在表單的 action 屬性中指定：

<form action=" ">
  姓名：<input type="text" name="name"><br>
  班級(jí)：<input type="text" name="class">
<input type="submit" value="提交">
</form>

輸入類(lèi)型：checkbox

<input type="checkbox"> 定義復(fù)選框绽昏。

復(fù)選框允許用戶在有限數(shù)量的選項(xiàng)中選擇零個(gè)或多個(gè)選項(xiàng)协屡。

<form>
<p>我喜歡的運(yùn)動(dòng)</p>
<input type="checkbox" name="hobby" value="basketball">籃球
<input type="checkbox" name="hobby" value="run" checked>跑步  //默認(rèn)選中
</form>

輸入類(lèi)型：button

<input type="button"> 定義按鈕。

<input type="button" onclick="alert(' 我是左冬!')" value="我是誰(shuí)">

輸入類(lèi)型：number

<input type="number"> 用于應(yīng)該包含數(shù)字值的輸入字段全谤。

<form>
  <input type="number" name="quantity" min="1" max="5"> //數(shù)量（1 到 5 之間）
  <input type="submit" value="提交">
</form>
注釋?zhuān)篒E9 及早期版本不支持 type="number"肤晓。

輸入類(lèi)型：date

<input type="date"> 用于應(yīng)該包含日期的輸入字段。

根據(jù)瀏覽器支持，日期選擇器會(huì)出現(xiàn)輸入字段中材原。

<form>
生日：<input type="date" name="birthday">
<input type="submit" value="提交">
</form>
注釋?zhuān)篒E11及更早期版本不支持 type="date".

添加輸入限制的代碼

<form>
  1980-01-01以前
  <input type="date" name="bday" max="1979-12-31"><br>
  2000-01-01以后
  <input type="date" name="bday" min="2000-01-02"><br>
</form>

輸入類(lèi)型：color

<input type="color"> 用于包含顏色的輸入字段沸久。

根據(jù)瀏覽器支持季眷，顏色選擇器會(huì)出現(xiàn)輸入字段中余蟹。

<form action=" ">
  選擇你最喜歡的顏色:
  <input type="color" name="favcolor" value="#ff0000">
  <input type="提交">
</form>

輸入類(lèi)型：range

<input type="range"> 用于包含一定范圍內(nèi)的值的輸入字段。

根據(jù)瀏覽器支持子刮，輸入字段能夠顯示為滑塊的控件威酒。

<form action=" " method="get">
  音量:
  <input type="range" name="spearker" min="0" max="10">
  <input type="確定">
</form>
注釋?zhuān)篒E9 及早期版本不支持 type="range"。

輸入類(lèi)型：email

<input type="email"> 用于應(yīng)該包含電子郵件地址的輸入字段挺峡。

根據(jù)瀏覽器支持葵孤，能夠在被提交時(shí)自動(dòng)對(duì)電子郵件地址進(jìn)行驗(yàn)證。
某些只能手機(jī)會(huì)識(shí)別 email 類(lèi)型橱赠，并在鍵盤(pán)增加 ".com" 以匹配電子郵件輸入尤仍。

<form>
E-mail:
<input type="email" name="email">
<input type="submit">
</form>
注釋?zhuān)篒E9 及早期版本不支持 type="email"。

輸入類(lèi)型：search

<input type="search"> 用于搜索字段狭姨。

<form action=" ">
  搜索谷歌：
  <input type="search" name="googlesearch">
  <input type="submit">
</form>

輸入類(lèi)型：tel

<input type="tel"> 用于應(yīng)該包含電話號(hào)碼的輸入字段宰啦。

目前只有 Safari 8支持 tel 類(lèi)型。

<form action=" ">
  Telephone:
  <input type="tel" name="usrtel">
  <input type="submit">
</form>
注釋?zhuān)篠afari 8 及更新版本支持 type="tel"

輸入類(lèi)型：url

<input type="url"> 用于應(yīng)該包含URL地址的輸入字段饼拍。

根據(jù)瀏覽器支持赡模，在提交時(shí)能夠自動(dòng)驗(yàn)證URL字段。
某些智能手機(jī)識(shí)別URL類(lèi)型师抄，并向鍵盤(pán)添加 ".com" 以匹配URL輸入漓柑。

<form action=" ">
  請(qǐng)?zhí)砑幽氖醉?yè)：
  <input type="url" name="homepage">
  <input type="submit">
</form>
注釋?zhuān)篒E9 及其更早版本不支持 type="url"。

其他<input>屬性：

name：定義input元素的名稱(chēng)叨吮。
value：規(guī)定字段的初始值辆布。
readonly：規(guī)定輸入字段只讀。
disabled：規(guī)定輸入字段是禁用的茶鉴，被禁用的元素是不可用不可點(diǎn)擊不可提交谚殊。
size：規(guī)定輸入字段的尺寸，如果size="5"蛤铜，那么一行中可輸入無(wú)數(shù)個(gè)字符但一行中只有5個(gè)可見(jiàn)字符嫩絮。
maxlength：規(guī)定輸入字段允許的最大長(zhǎng)度，如果maxlength="5"围肥，那么一行中最多可輸入5個(gè)字符剿干。
placeholder：規(guī)定幫助用戶填寫(xiě)輸入字段的提示（樣本值或有關(guān)格式的簡(jiǎn)短描述），該提示會(huì)在用戶輸入值之前顯示在輸入字段中穆刻。
list：引用包含輸入字段的與定義選項(xiàng)的datalist置尔。
src：定義以提交按鈕形式顯示的圖像的URL。
step：規(guī)定input元素的合法數(shù)字間隔氢伟，如果step="3"榜轿，則合法數(shù)字應(yīng)該是-3幽歼、0、3谬盐、6等甸私。只能是3的整倍數(shù)》煽可與max以及min屬性一同使用皇型，來(lái)創(chuàng)建合法值的范圍。

<select> 元素（下拉列表）

<select>元素定義下拉列表砸烦，<option>元素定義下拉列表的選項(xiàng)弃鸦，列表通常會(huì)把首個(gè)選項(xiàng)顯示為被選選項(xiàng)，但可以通過(guò)selected定義預(yù)定義選項(xiàng)幢痘。

<select name="fruit">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange" selected>Orange</option> //默認(rèn)選中
</select>

<option> 元素定義待選擇的選項(xiàng)唬格。
列表通常會(huì)把首個(gè)選項(xiàng)顯示為被選選項(xiàng)，通過(guò)添加 selected 屬性來(lái)定義預(yù)定義選項(xiàng)颜说。

<textarea> 元素定義多行輸入字段（文本域）

【rows="10" cols="30"】的意思是定義一個(gè)30個(gè)字符寬购岗，10行高的文本區(qū)。

<textarea name="message" rows="10" cols="30">
The car was playing in the garden.
</textarea>

<button> 元素

<button>元素定義可點(diǎn)擊的按鈕脑沿，請(qǐng)示中為按鈕規(guī)定type屬性藕畔。如果在HTML表單中使用button元素，不同的瀏覽器會(huì)提交不同的值庄拇。IE將提交<button>與<button/>之間的文本注服，而其他瀏覽器將提交value屬性的內(nèi)容。應(yīng)用<input>元素創(chuàng)建按鈕措近。

<button type="button" onclick="alert("Hello World!")">點(diǎn)我</button>

HTML5 表單元素

HTML5 增加了如下表單元素：

• <datalist>
• <keygen>
• <output>

HTML5 <datalist> 元素

<datalist>元素為<input>元素規(guī)定預(yù)定義選項(xiàng)列表溶弟。
<datalist>為<input>預(yù)定義選項(xiàng)列表，起到提示作用瞭郑。用戶會(huì)在他們輸入數(shù)據(jù)時(shí)看到預(yù)定義選項(xiàng)的下拉列表辜御。
<input>元素的list屬性必須引用<datalist>元素的id屬性。

<form action=" ">
<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist> 
</form>

常用屬性

• action 屬性制訂了某個(gè)服務(wù)器腳本來(lái)處理被提交的表單屈张，如果省略action屬性擒权，則action會(huì)被設(shè)置為當(dāng)前頁(yè)面。
• method 屬性規(guī)定了提交表單的http方法阁谆，默認(rèn)GET碳抄，GET最適合少量數(shù)據(jù)且不需要保密的提交，使用GET時(shí)表單數(shù)據(jù)在頁(yè)面地址欄中是可見(jiàn)的场绿。設(shè)置為POST剖效，安全性更加，因?yàn)樵陧?yè)面地址欄中被提交的數(shù)據(jù)不可見(jiàn)。
• target 屬性值是一個(gè)名字或關(guān)鍵字璧尸，規(guī)定在哪里打開(kāi)新頁(yè)面咒林，默認(rèn)_self，一般設(shè)置為_(kāi)blank爷光。
  • _self：在當(dāng)前HTML4或HTML5文檔頁(yè)面重新加載返回值（默認(rèn)值）垫竞。注：如果這個(gè)文檔在一個(gè)frame中，self是在當(dāng)前frame(document)中重新加載的瞎颗，而不是整個(gè)頁(yè)面(window)件甥。
  • _blank：以新的HTML4或HTML5文檔窗口加載返回值捌议。
  • _parent：在父級(jí)的frame中以HTML4或HTML5文檔形式加載返回值哼拔，如果沒(méi)有父級(jí)的frame，行為和_self一致瓣颅。
  • _top：如果是HTML4文檔倦逐，清空當(dāng)前文檔，加載返回內(nèi)容宫补；如果是HTML5文檔檬姥，在當(dāng)前文檔的最高級(jí)內(nèi)加載返回值，如果沒(méi)有父級(jí)粉怕，和_self行為一致健民。
  • iframename：返回值在指定frame中加載。

表單的作用

HTML<form>元素表示了文檔中的一個(gè)區(qū)域贫贝，這個(gè)區(qū)域包含有交互控制元件秉犹，用來(lái)像web服務(wù)器提交信息。

輸入限制

注：屬性制訂了某個(gè)服務(wù)器腳本來(lái)處理被提交的表單稚晚，如果省略action屬性崇堵，則action會(huì)被設(shè)置為當(dāng)前頁(yè)面。

參考資料：www.w3school.com.cn