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

表單元素

<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，其中，每個輸入字段必須設(shè)置一個name屬性，checked屬性用于設(shè)置按鈕的預(yù)選項(xiàng)。

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

輸入類型：text

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

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

輸入類型：password

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

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

輸入類型：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>

輸入類型：submit

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

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

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

輸入類型：checkbox

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

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

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

輸入類型：button

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

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

輸入類型：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>
注釋：IE9 及早期版本不支持 type="number"。

輸入類型：date

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

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

<form>
生日：<input type="date" name="birthday">
<input type="submit" value="提交">
</form>
注釋：IE11及更早期版本不支持 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>

輸入類型：color

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

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

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

輸入類型：range

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

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

<form action=" " method="get">
  音量:
  <input type="range" name="spearker" min="0" max="10">
  <input type="確定">
</form>
注釋：IE9 及早期版本不支持 type="range"。

輸入類型：email

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

根據(jù)瀏覽器支持，能夠在被提交時自動對電子郵件地址進(jìn)行驗(yàn)證。
某些只能手機(jī)會識別 email 類型，并在鍵盤增加 ".com" 以匹配電子郵件輸入。

<form>
E-mail:
<input type="email" name="email">
<input type="submit">
</form>
注釋：IE9 及早期版本不支持 type="email"。

輸入類型：search

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

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

輸入類型：tel

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

目前只有 Safari 8支持 tel 類型。

<form action=" ">
  Telephone:
  <input type="tel" name="usrtel">
  <input type="submit">
</form>
注釋：Safari 8 及更新版本支持 type="tel"

輸入類型：url

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

根據(jù)瀏覽器支持，在提交時能夠自動驗(yàn)證URL字段。
某些智能手機(jī)識別URL類型，并向鍵盤添加 ".com" 以匹配URL輸入。

<form action=" ">
  請?zhí)砑幽氖醉摚?  <input type="url" name="homepage">
  <input type="submit">
</form>
注釋：IE9 及其更早版本不支持 type="url"。

其他<input>屬性：

name：定義input元素的名稱。
value：規(guī)定字段的初始值。
readonly：規(guī)定輸入字段只讀。
disabled：規(guī)定輸入字段是禁用的，被禁用的元素是不可用不可點(diǎn)擊不可提交。
size：規(guī)定輸入字段的尺寸，如果size="5"，那么一行中可輸入無數(shù)個字符但一行中只有5個可見字符。
maxlength：規(guī)定輸入字段允許的最大長度，如果maxlength="5"，那么一行中最多可輸入5個字符。
placeholder：規(guī)定幫助用戶填寫輸入字段的提示（樣本值或有關(guān)格式的簡短描述），該提示會在用戶輸入值之前顯示在輸入字段中。
list：引用包含輸入字段的與定義選項(xiàng)的datalist。
src：定義以提交按鈕形式顯示的圖像的URL。
step：規(guī)定input元素的合法數(shù)字間隔，如果step="3"，則合法數(shù)字應(yīng)該是-3、0、3、6等。只能是3的整倍數(shù)。可與max以及min屬性一同使用，來創(chuàng)建合法值的范圍。

<select> 元素（下拉列表）

<select>元素定義下拉列表，<option>元素定義下拉列表的選項(xiàng)，列表通常會把首個選項(xiàng)顯示為被選選項(xiàng)，但可以通過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)。
列表通常會把首個選項(xiàng)顯示為被選選項(xiàng)，通過添加 selected 屬性來定義預(yù)定義選項(xiàng)。

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

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

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

<button> 元素

<button>元素定義可點(diǎn)擊的按鈕，請示中為按鈕規(guī)定type屬性。如果在HTML表單中使用button元素，不同的瀏覽器會提交不同的值。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)列表，起到提示作用。用戶會在他們輸入數(shù)據(jù)時看到預(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 屬性制訂了某個服務(wù)器腳本來處理被提交的表單，如果省略action屬性，則action會被設(shè)置為當(dāng)前頁面。
• method 屬性規(guī)定了提交表單的http方法，默認(rèn)GET，GET最適合少量數(shù)據(jù)且不需要保密的提交，使用GET時表單數(shù)據(jù)在頁面地址欄中是可見的。設(shè)置為POST，安全性更加，因?yàn)樵陧撁娴刂窓谥斜惶峤坏臄?shù)據(jù)不可見。
• target 屬性值是一個名字或關(guān)鍵字，規(guī)定在哪里打開新頁面，默認(rèn)_self，一般設(shè)置為_blank。
  • _self：在當(dāng)前HTML4或HTML5文檔頁面重新加載返回值（默認(rèn)值）。注：如果這個文檔在一個frame中，self是在當(dāng)前frame(document)中重新加載的，而不是整個頁面(window)。
  • _blank：以新的HTML4或HTML5文檔窗口加載返回值。
  • _parent：在父級的frame中以HTML4或HTML5文檔形式加載返回值，如果沒有父級的frame，行為和_self一致。
  • _top：如果是HTML4文檔，清空當(dāng)前文檔，加載返回內(nèi)容；如果是HTML5文檔，在當(dāng)前文檔的最高級內(nèi)加載返回值，如果沒有父級，和_self行為一致。
  • iframename：返回值在指定frame中加載。

表單的作用

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

輸入限制

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

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