HTML5基于Web Forms 2.0標準對HTML4表單進行全面升級，在保持簡便、易用的基礎上，新增了很多控件和屬性，從而減輕了開發人員的負擔。表單為訪問者提供了與網站進行互動的途徑，完整的表單一般由控件和腳本兩部分組成。

1、認識HTML5表單

HTML5的一個重要特性就是對表單的完善，其引入了新的表單元素和屬性，簡單概況如下。

1、HTML5新增輸入型表單控件如下：

電子郵件框：<input type="email">。
搜索框：<input type="search">。
電話框：<input type="tel">。
URL框：<input type="url">。

2、以下控件得到部分瀏覽器的支持，更多信息可以訪問鏈接www.wufoo.com/html5：

日期：<input type="date">，瀏覽器支持https://caniuse.com/#feat=input-datetime。
數字：<input type="number">，瀏覽器支持https://caniuse.com/#feat=input-number。
范圍：<input type="range">，瀏覽器支持https://caniuse.com/#feat=input-range。
數據列表：

<input type="text" name="favfruit"list="fruit" /> 
<datalist id="fruit"><option>備選列表項目1</option><option>備選列表項目2</option><option>備選列表項目3</option></datalist>

3、以下控件爭議較大，瀏覽器對其支持也不統一，W3C曾經放棄把它們列入HTML5，不過最后還是保留了下來：

顏色：<input type="color" />。
全局日期和時間：<input type="datetime" />。
局部日期和時間：<input type="datetime-local" />。
月：<input type="month" />。
時間：<input type="time" />。
周：<input type="week" />。
輸出：<output></output>。

4、HTML5新增的表單屬性如下：

accept：限制用戶可以上傳文件的類型。
autocomplete：如果對form元素或特定的字段添加autocomplete=“off”，就會關閉瀏覽器對該表單或該字段的自動填寫功能。默認值為on。
autofocus：頁面加載后將焦點放到該字段。
multiple：允許輸入多個電子郵件地址，或者上傳多個文件。
list：將datalist與input聯系起來。
maxlength：指定textarea的最大字符數，HTML5之前的文本框就支持該特性。
pattern：定義一個用戶所輸入的文本在提交之前必須遵循的模式。
placeholder：指定一個出現在文本框中的提示文本，用戶開始輸入后該文本消失。
required：需要訪問者在提交表單之前必須完成該字段。
formnovalidate：關閉HTML5的自動驗證功能。應用于提交按鈕。
novalidate：關閉HTML5的自動驗證功能。應用于表單元素。

提示：有關瀏覽器支持信息，https://caniuse.com/上的信息通常比www.wufoo.com/html5上的更新一些，不過后者仍然是有關HTML5表單信息的一個重要資源。Ryan Seddon的H5F(https://github.com/ryanseddon/H5F)可以為舊式瀏覽器提供模仿HTML5表單行為的JavaScript方案。

2、定義表單

每個表單都以<form>標簽開始，以</form>標簽結束。兩個標簽之間是各種標簽和控件。每個控件都有一個name屬性，用于在提交表單時標識數據。訪問者通過“提交”按鈕提交表單，觸發“提交”按鈕時，填寫的表單數據將被發送給服務器端的處理腳本。

【示例】新建HTML5文檔，保存為test.html，在<body>內使用<form>標簽設計一個簡單的用戶登錄表單。

    <form method="post" action="show-data.php"><!-- 各種表單元素 --><fieldset><h2 class="hdr-account">登錄</h2><div class="fields"><p class="row"><label for="first-name">用戶名:</label><input type="text" id="first-name" name="first_name" class="field-large" /></p><p class="row"><label for="last-name">昵稱:</label><input type="text" id="last-name" name="last_name" class="field-large" /></p></div></fieldset><!-- 提交按鈕 --><input type="submit" value="提交" class="btn" /></form>

在這里插入圖片描述

<form>標簽包含很多屬性，其中HTML5支持的屬性如下表所示。
在這里插入圖片描述
提示：如果使用method="get"方式提交表單，表單中的數據會顯示在瀏覽器的地址欄里；如果使用method="post"方式提交表單，表單中的數據不會顯示在瀏覽器的地址欄里，這樣比較安全。同時，使用post可以向服務器發送更多的數據。如果需要在數據庫中保存、添加和刪除數據，那么就應選擇post方式提交數據。

3、組織表單

使用<fieldset>標簽可以組織表單結構，為表單對象進行分組，這樣表單會更容易理解。在默認狀態下，分組的表單對象外面會顯示一個包圍框。

使用<legend>標簽可以定義每組的標題，描述每個分組的目的，有時這些描述還可以使用h1～h6標題。默認顯示在<fieldset>包含框的左上角。

對于一組單選按鈕或復選框，建議使用<fieldset>把它們包裹起來，為其添加一個明確的上下文，讓表單結構顯得更清晰。

【示例】為表單的四個部分分別使用<fieldset>標簽，并將公共字段部分的性別單選按鈕使用一個嵌套的fieldset包圍起來。被嵌套的fieldset添加radios類，方便為其添加特定的樣式。同時，還在其中添加了一個legend元素，用于描述單選按鈕。

    <h1>表單標題</h1><form method="post" action="show-data.php"><fieldset><h2 class="hdr-account">字段分組標題</h2>... 用戶名字段 ...</fieldset><fieldset><h2 class="hdr-address">字段分組標題</h2>... 聯系地址字段 ...</fieldset><fieldset><h2 class="hdr-public-profile">字段分組標題</h2>... 公共字段 ...<div class="row"><fieldset class="radios"><legend>性別:</legend><input type="radio" id="gender-male" name="gender" value="male" /><label for="gender-male">男士/label><input type="radio" id="gender-female" name="gender" value="female" /><label for="gender-female">女士</label></fieldset></div></fieldset><fieldset><h2 class="hdr-emails">電子郵箱</h2>... Emails字段 ...</fieldset><input type="submit" value="提交表單" class="btn" /></form>

在這里插入圖片描述
使用fieldset元素對表單進行組織是可選的，使用legend也是可選的（使用legend則必須有fieldset）。不過，推薦使用fieldset和legend對相關的單選按鈕、復選框進行分組。

4、常用表單控件

4.1、文本框

文本框是訪問者輸入單行字符串的控件，常用于提交姓名、地址等信息。每個文本框都是通過帶有type="text"的input標簽定義。除了type之外，還有一些其他可用的屬性，其中最重要的就是name。服務器端的腳本使用name獲取訪問者在文本框中輸入的值或預設的值（即value屬性值）。注意，name和value對其他的表單控件也是很重要的，具有相同的功能。

HTML5允許使用下面兩種形式的定義文本框。

    <input type="text" /><input type="text">

4.2、標簽

標簽(label)是描述表單字段用途的文本。label元素有一個特殊的屬性：for。如果for的值與一個表單字段的id的值相同，該label就與該字段顯式地關聯起來。如果訪問者與標簽進行交互，如使用鼠標單擊標簽，與之對應的表單字段就會獲得焦點，這對提升表單的可用性和可訪問性都有幫助。因此，建議在label元素中包含for屬性。

【示例】使用label標記提示標簽，提升用戶體驗。

    <p class="row"><label for="name">用戶名<span class="required">*</span>:</label><input type="text" id="name" name="name" class="field-large" required="required" aria-required="true" /></p>

在這里插入圖片描述
也可以將一個表單字段放在一個包含標簽文本的label內，例如：

    <label>用戶名：<input type="text" name="name" /></label>。

在這種情況下，就不需要使用for和id了。不過，將標簽與字段分開是更常見的做法，原因之一是這樣更容易添加樣式。

4.3、密碼框

密碼框與文本框的唯一區別，就是在密碼框中輸入的文本會使用圓點或星號進行隱藏。密碼框的作用是防止其他人看到用戶輸入的密碼。如果要真正地保護密碼，可以使用安全服務器(https://)。

使用type="password"創建密碼框，而不要用type=“text”，例如：

    <p class="row"><label for="password">密碼:</label><input type="password" id="password" name="password" /></p>

在這里插入圖片描述

當訪問者在表單中輸入密碼時，密碼會以圓點或星號的形式隱藏起來。但提交表單后訪問者輸入的真實值會被發送給服務器。信息在發送過程中沒有加密。

使用size="n "屬性可以定義密碼框的大小，n表示密碼框寬度，以字符為單位。如果需要，可以使用maxlength="n "設置密碼框允許輸入的最大字符數。

4.4、單選按鈕

為input元素設置type="radio"屬性，可以創建單選按鈕。

【示例】設計一個性別選項組。

    <fieldset class="radios"><legend>姓名</legend><p class="row"><input type="radio" id="gender-male" name="gender" value="male" /><label for="gender-male">男士</label></p><p class="row"><input type="radio" id="gender-female" name="gender" value="female" /><label for="gender-female">女士</label></p></fieldset>

在這里插入圖片描述
同一組單選按鈕的name屬性值必須相同，這樣在同一時間只有其中一個能被選中。value屬性也很重要，因為對于單選按鈕來說，訪問者無法輸入值。

name="radioset"用于識別發送至服務器的數據，同時用于將多個單選按鈕聯系在一起，以確保同一組中最多只有一個被選中。推薦使用fieldset組織單選按鈕組，并用legend進行描述。

4.5、復選框

在一組單選按鈕中，只允許選擇一個答案，但在一組復選框中，可以選擇任意數量的答案。為input元素設置type="checkbox"屬性，可以創建復選框。

【示例】演示如何創建復選框。

    <div class="fields checkboxes"><p class="row"><input type="checkbox" id="email" name="email[]" value="電子郵箱" /><label for="email">電子郵件</label></p><p class="row"><input type="checkbox" id="phone" name="email[]" value="電話" /><label for="phone">電話</label></p></div>

在這里插入圖片描述
標簽文本不需要與value屬性值一致。因為標簽文本用于在瀏覽器中提示復選框，而value則是發送到服務器端腳本的數據。

創建.checkboxes類，可以方便地為復選框添加樣式。使用checked或checked="checked"可以設置復選框在默認情況下處于選中狀態。

訪問者可以根據需要選擇任意數量的復選框，每個復選框對應的value值，以及復選框組的name名稱都會被發送給服務器端腳本。

使用name=“email"可以識別發送到服務器端的數據。對于組內所有復選框使用同一個name值，可以將多個復選框組織在一起。空的方括號是為PHP腳本的name準備的，如果使用PHP處理表單，使用name=” email[]"就會自動地創建一個包含復選框值的數組，名為$_POST[‘email’]。

4.6、文本區域

如果要設計多行文本框，如回答問題、評論反饋等，可以使用文本區域。
【示例1】演示如何創建一個反饋框。

    <label for="jianyi">建議：</label><textarea id="jianyi" name="jianyi" cols="40" rows="5" class="field-large"></textarea>

在這里插入圖片描述
maxlength="n"設置輸入的最大字符數，cols="n"設置文本區域的寬度（以字符為單位），rows="n"設置文本區域的高度（以行為單位）。

也可以使用CSS更好地控制文本區域的尺寸。如果沒有使用maxlength限制文本區域的最大字符數，最大可以輸入32 700個字符，如果輸入內容超出文本區域，則會自動顯示滾動條。

textarea沒有value屬性，在和標簽之間包含的文本，將作為默認值顯示在文本區域中。可以設置placeholder屬性，定義用于占位的文本。

使用wrap屬性，可以定義當輸入內容大于文本區域寬度時的顯示方式：

wrap=“hard”，如果文本區域內的文本自動換行顯示，則提交文本中會包含換行符。當使用"hard"時，必須設置cols屬性。
wrap=“soft”，為默認值，提交的文本不會為自動換行位置添加換行符。

【示例2】比較設置wrap="hard"與wrap="soft"時，提交數據的不同，效果如下圖所示。

客戶端表單

    <form action="test.php"  method="post"><textarea name="test" maxlength=40 rows=6 wrap="hard" cols=30></textarea><input type="submit" value="提交"/></form>

在這里插入圖片描述

服務器端腳本：

    <?phpecho "<pre>".$_POST['test']."</pre>";?>

4.7、選擇框

選擇框為訪問者提供一組選項，允許從中選擇。如果允許單選，則呈現為下拉菜單樣式；如果允許多選，則呈現為一個列表框，在需要時會自動顯示滾動條。

選擇框由select和option元素合成。通常，在select元素里設置name屬性，在每個option元素里設置value屬性。

【示例1】創建一個簡單的城市選擇框。

    <label for="state">省市</label><select id="state" name="state"><option value="BJ">北京</option><option value="SH">上海</option>...</select>

在這里插入圖片描述
在下拉菜單中，默認選中的是第一個選項；而在列表框中，默認沒有選中的項。

使用size="n"設置選擇框的高度（以行為單位）。使用multiple或者multiple="multiple"允許多選。每個選項的value屬性值是選項選中后要發送給服務器的數據，如果省略value，則包含的文本會被發送給服務器。使用selected或者selected="selected"可以指定該選項被默認選中。

使用<optgroup>標簽可以對選擇項目進行分組，一個<optgroup>標簽包含多個<option>標簽，然后使用label屬性設置分類標題，分類標題是一個不可選的偽標題。

【示例2】使用optgroup元素對下拉菜單項目進行分組。

    <select name="選擇城市"><optgroup label="山東省"><option value="濰坊">濰坊</option><option value="青島" selected="selected">青島</option></optgroup><optgroup label="山西省"><option value="太原">太原</option><option value="榆次">榆次</option></optgroup></select>

在這里插入圖片描述

4.8、上傳文件

為input元素設置type="file"屬性，可以創建文件域，用來把本地文件上傳到服務器。

【示例】演示如何創建上傳控件。

    <form method="post" action="show-data.php" enctype="multipart/form-data"><label for="picture">圖片:</label><input type="file" id="picture" name="picture" /><p class="instructions">最大700k，JPG, GIF 或PNG</p></form>

在這里插入圖片描述
使用multiple屬性可以允許上傳多個文件。

4.9、隱藏字段

隱藏字段用于存儲表單中的數據，但不會顯示給訪問者，可以視為不可見的文本框。它常用于存儲先前表單收集的信息，以便將這些信息同當前表單的數據一起提交給服務器腳本進行處理。

【示例】演示如何定義隱藏域。

    <form method="post" action="your-script.php"><input type="hidden" name="step" value="6" /><input type="submit" value="提交" /></form>

在這里插入圖片描述
注意：不要將密碼、信用卡號等敏感信息放在隱藏字段中。雖然它們不會顯示到網頁中，但訪問者可以通過查看HTML源代碼看到它。

4.10、提交按鈕

提交按鈕可以呈現為文本。

    <input type="submit" value="提交表單" class="btn" />

也可以呈現為圖像，使用type="image"可以創建圖像提交按鈕，width和height屬性為可選。

    <input type="image" src="button-submit.png"  width="188" height="95" alt="提交表單" />

如果激活“提交”按鈕，可以將表單數據發送給服務器端的腳本。如果不設置name屬性，則“提交”按鈕的value屬性值就不會發送給服務器腳本。如果省略value屬性，那么根據不同的瀏覽器，“提交”按鈕會顯示默認的“提交”文本。如果有多個“提交”按鈕，可以為每個按鈕設置name屬性和value屬性，從而讓腳本知道用戶按下的是哪個按鈕，否則最好省略name屬性。

5、HTML5新型輸入框

5.1、定義email框

email類型的input元素是一種專門用于輸入email地址的文本框，在提交表單的時候，會自動驗證email輸入框的值。如果不是一個有效的電子郵件地址，則該輸入框不允許提交該表單。

【示例】email類型的應用。

    <form action="demo_form.php" method="get">請輸入您的email地址：<input type="email" name="user_email" /><br /><input type="submit" /></form>

以上代碼在Chrome瀏覽器中的運行結果如下圖所示：
在這里插入圖片描述

如果輸入了錯誤的email地址格式，單擊“提交”按鈕時會出現如下圖所示的“請在電子郵件地址中包括‘@’”的提示。
在這里插入圖片描述
對于不支持type="email"的瀏覽器來說，將會以type="text"來處理，所以并不妨礙舊版瀏覽器瀏覽采用HTML5中type="email"輸入框的網頁。

5.2、定義URL框

url類型的input元素提供用于輸入url地址的文本框。當提交表單時，如果所輸入的是url地址格式的字符串，則會提交給服務器；如果不是，則不允許提交。

【示例】url類型的應用。

    <form action="demo_form.php" method="get">請輸入網址：<input type="url" name="user_url" /><br/><input type="submit" /></form>

以上代碼在Chrome瀏覽器中的運行結果如下圖所示。
在這里插入圖片描述
。如果輸入了錯誤的url地址格式，單擊“提交”按鈕時會出現如下圖所示的“請輸入網址”的提示。

對于不支持type="url"的瀏覽器，將會以type="text"來處理。

5.3、定義數字框

number類型的input元素提供用于輸入數值的文本框。用戶還可以設定對所接收的數字的限制，包括允許的最大值和最小值、合法的數字間隔或默認值等。如果所輸入的數字不在限定范圍之內，則會提示錯誤信息。number類型的屬性如下表所示。
在這里插入圖片描述
【示例】number類型的應用。

    <form action="demo_form.php" method="get">請輸入數值：<input type="number" name="number1" min="1" max="20" step="4"><input type="submit" /></form>

以上代碼在Chrome瀏覽器中的運行結果如下圖所示。
在這里插入圖片描述
如果輸入了不在限定范圍之內的數字，單擊“提交”按鈕時會出現如下圖所示的提示。

5.4、定義范圍框

range類型的input元素提供用于輸入包含一定范圍內數字值的文本框，在網頁中顯示為滑動條。用戶可以設定對所接收的數字的限制，包括規定允許的最大值和最小值、合法的數字間隔或默認值等。如果所輸入的數字不在限定范圍之內，則會出現錯誤提示。

range類型的屬性如下表所示。
在這里插入圖片描述
可以看出，range類型的屬性與number類型的屬性相同。這兩種類型的不同在于外觀表現上，支持range類型的瀏覽器都會將其顯示為滑塊的形式，而不支持range類型的瀏覽器則會將其顯示為普通的文本框，即以type="text"來處理。

【示例】range類型的應用。

    <form action="demo_form.php" method="get">請輸入數值：<input type="range" name="range1" min="1" max="30" /><input type="submit" /></form>

在這里插入圖片描述

5.5、定義日期選擇器

HTML5提供了多個可用于選取日期和時間的輸入類型，即6種日期選擇器控件，可選擇的日期格式包括date（日期）、month（月）、week（星期）、time（時間）、datetime（日期+時間）、dateime-local（日期+時間+時區），如下表所示。
在這里插入圖片描述
提示：UTC時間就是0時區的時間，而本地時間就是本地時區的時間。例如，北京時間為早上8點，則UTC時間為0點，也就是說，UTC時間比北京時間晚8小時。

date類型：date類型的日期選擇器用于選取日、月、年，即選擇一個具體的日期。例如，2021年1月10日，選擇后會以2021/01/10的形式顯示。

【示例1】date類型的應用。

    <form action="demo_form.php" method="get">請輸入日期： <input type="date" name=" date1" /><input type="submit" /></form>

在這里插入圖片描述
單擊右側小圖標時會顯示日期控件，用戶可以使用日期控件選擇具體日期。

month類型：month類型的日期選擇器用于選取月、年，即選擇一個具體的月份。例如，2021年1月，選擇后會以“2021年01月”的形式顯示。

【示例2】month類型的應用。

    <form action="demo_form.php" method="get">請輸入月份： <input type="month" name=" month1" /><input type="submit" /></form>

在這里插入圖片描述

week類型：week類型的日期選擇器用于選取周和年，即選擇一個具體的周。例如2021年1月第1周，選擇后會以“第01周，2021”的形式顯示。

【示例3】week類型的應用。

    <form action="demo_form.php" method="get">請選擇年份和周數： <input type="week" name="week1" /><input type="submit" /></form>

在這里插入圖片描述

time類型：time類型的日期選擇器用于選取時間，具體到小時和分鐘。例如，選擇時間后會以00:00的形式顯示。

【示例4】time類型的應用。

    <form action="demo_form.php" method="get">請選擇或輸入時間： <input type="time" name="time1" /><input type="submit" /></form>

在這里插入圖片描述
除了可以使用控制按鈕之外，還可以直接輸入時間值。如果輸入了錯誤的時間格式并單擊“提交”按鈕，則在Chrome瀏覽器中會自動更正為最接近的合法值，而在IE10瀏覽器中則以普通的文本框顯示。

time類型支持使用一些屬性來限定時間的大小范圍或合法的時間間隔，如下表所示。
在這里插入圖片描述

【示例5】使用下列代碼來限定時間。

    <form action="demo_form.php" method="get">請選擇或輸入時間：<input type="time" name="time1" step="5" value="09:00"><input type="submit" /></form>

可以看到，在輸入框中出現設置的默認值09:00，并且當單擊微調按鈕時，會以5 s為單位遞增或遞減。當然，用戶還可以使用min和max屬性指定時間的范圍。
在這里插入圖片描述
在date類型、month類型、week類型中也支持使用上述屬性值。

datetime類型:datetime類型的日期選擇器用于選取時間、日、月、年，其中時間為UTC時間。

【示例6】datetime類型的應用。

    <form action="demo_form.php" method="get">請選擇或輸入時間：<input type="datetime" name="datetime1" /><input type="submit" /></form>

在這里插入圖片描述
注意：IE、Edge、Firefox和Chrome最新版本不再支持元素，Chrome和Safari部分版本支持，Opera 12及更早的版本完全支持。

datetime-local類型：datetime-local類型的日期選擇器用于選取時間、日、月、年，其中時間為本地時間。

【示例7】datetime-local類型的應用。

    <form action="demo_form.php" method="get">請選擇或輸入時間：<input type="datetime-local" name="datetime-local1" /><input type="submit" /></form>

在這里插入圖片描述

5.6、定義搜索框

search類型的input元素提供用于輸入搜索關鍵詞的文本框。從外觀上看，search類型的input元素與普通的text類型的input元素的區別：當輸入內容時，右側會出現一個×圖標，單擊即可清除搜索框。

【示例】Search類型的應用示例。

    <form method="get" action="search-results.php" role="search"><label for="search">請輸入搜索關鍵詞：</label><input type="search" id="search" name="search" size="30" placeholder="輸入的關鍵字" /><input type="submit" value=" Go " /></form>

在這里插入圖片描述
搜索框是應用placeholder的最佳控件。同時，注意這里的form用的是method=“get”，而不是method=“post”。這是搜索字段的常規做法（無論是type=“search”，還是type=“text”）。如果在搜索框中輸入要搜索的關鍵詞，在搜索框右側就會出現一個×按鈕，單擊該按鈕可以清除已經輸入的內容。

5.7、定義電話號碼框

tel類型的input元素提供專門用于輸入電話號碼的文本框。它并不限定只輸入數字，因為很多電話號碼還包括其他字符，如+、-、(、)等，例如，86-0536-8888888。

【示例】tel類型的應用。

    <form action="demo_form.php" method="get">請輸入電話號碼：<input type="tel" name="tel1" /><input type="submit" value="提交"/></form>

在這里插入圖片描述
從某種程度上說，所有的瀏覽器都支持tel類型的input元素，因為它們都會將其作為一個普通的文本框顯示。HTML5規則并不需要瀏覽器執行任何特定的電話號碼語法或以任何特別的方式顯示電話號碼。

5.8、定義拾色器

color類型的input元素提供專門用于選擇顏色的文本框。當color類型的文本框獲取焦點后，會自動調用系統的顏色窗口，包括蘋果系統也能彈出相應的系統色盤。

【示例】color類型的應用。

    <form action="demo_form.php" method="get">請選擇一種顏色：<input type="color" name="color1" /><input type="submit" value="提交"/></form>

以上代碼在Edge瀏覽器中的運行結果如圖7.28所示。單擊顏色文本框，會打開“顏色”控件，如下圖所示。
在這里插入圖片描述

選擇一種顏色之后，可以看到顏色文本框顯示對應顏色效果，如下圖所示。
在這里插入圖片描述

6、HTML5輸入屬性

6.1、定義自動完成

autocomplete屬性可以幫助用戶在輸入框中實現自動完成輸入，取值包括on和off，用法如下所示。

    <input type="email" name="email" autocomplete="off" />

autocomplete屬性適用input類型，包括text、search、url、telephone、email、password、datepickers、range和color。

autocomplete屬性適用于form元素。默認狀態下，表單的autocomplete屬性處于打開狀態，其包含的輸入域會自動繼承autocomplete狀態，也可以為某個輸入域單獨設置autocomplete狀態。
在這里插入圖片描述
注意：在某些瀏覽器中，需要先啟用瀏覽器本身的自動完成功能，才能使autocomplete屬性起作用。

【示例】設置autocomplete為“on”時，可以使用HTML5新增的datalist元素和list屬性提供一個數據列表供用戶進行選擇。下面演示如何應用autocomplete屬性、datalist元素和list屬性實現自動完成。

    <h2>輸入你最喜歡的城市名稱</h2><form autocompelete="on"><input type="text" id="city" list="cityList"><datalist id="cityList" style="display:none;"><option value="BeiJing">BeiJing</option><option value="QingDao">QingDao</option><option value="QingZhou">QingZhou</option><option value="QingHai">QingHai</option></datalist></form>

在瀏覽器中預覽，當用戶將焦點定位到文本框中，會自動出現一個城市列表供用戶選擇，如下圖所示。而當用戶單擊頁面的其他位置時，這個列表就會消失。
在這里插入圖片描述
當用戶輸入時，該列表會隨用戶的輸入而自動更新。例如，當輸入字母q時，會自動更新列表，只列出以q開頭的城市名稱，如下圖所示。隨著用戶不斷地輸入新的字母，下面的列表還會隨之變化。

提示：多數瀏覽器都帶有輔助用戶完成輸入的自動完成功能，只要開啟了該功能，瀏覽器就會自動記錄用戶所輸入的信息，當再次輸入相同的內容時，瀏覽器就會自動完成內容的輸入。從安全性和隱私的角度考慮，這個功能存在較大的隱患。如果不希望瀏覽器自動記錄這些信息，則可以為form或form中的input元素設置autocomplete屬性，關閉該功能。

6.2、定義自動獲取焦點

autofocus屬性可以實現在頁面加載時，讓表單控件自動獲得焦點。用法如下所示。

    <input type="text" name="fname" autofocus="autofocus" />

autocomplete屬性適用所有<input>標簽的類型，如文本框、復選框、單選按鈕、普通按鈕等。

注意：在同一頁面中只能指定一個autofocus對象，當頁面中的表單控件比較多時，建議為最需要聚焦的控件設置autofocus屬性值，如在頁面中搜索文本框，或者許可協議的“同意”按鈕等。

【示例1】演示如何應用autofocus屬性。

    <form><p>請仔細閱讀許可協議：</p><p><label for="textarea1"></label><textarea name="textarea1" id="textarea1" cols="45" rows="5">許可協議具體內容......</textarea></p><p><input type="submit" value="同意" autofocus><input type="submit" value="拒絕"></p></form>

在這里插入圖片描述
頁面載入后，按“同意”按鈕自動獲得焦點，因為通常會希望用戶直接單擊該按鈕。如果將“拒絕”按鈕的autofocus屬性的值設置為on，則頁面載入后焦點就會在“拒絕”按鈕上，如下圖所示，但從頁面功用的角度來說并不合適。
在這里插入圖片描述
【示例2】如果瀏覽器不支持autofocus屬性，可以使用JavaScript實現相同的功能。在下面的腳本中，先檢測瀏覽器是否支持autofocus屬性，如果不支持則獲取指定的表單域，為其調用focus()方法，強迫其獲取焦點。

    <script>if (!("autofocus" in document.createElement("input"))) {document.getElementById("ok").focus();}</script>

6.3、定義所屬表單

form屬性可以設置表單控件歸屬的表單，它適用于所有<input>標簽的類型。

提示：在HTML4中，用戶必須把相關的控件放在表單內部，即<form>和</form>之間。在提交表單時，在<form>和</form>之外的控件將被忽略。

【示例】form屬性必須引用所屬表單的id，如果一個form屬性要引用兩個或兩個以上的表單，則需要使用空格將表單的id值分隔開。下面是一個form屬性應用。

    <form action="" method="get" id="form1">請輸入姓名：<input type="text" name="name1" autofocus/><input type="submit"  value="提交"/></form>請輸入住址：<input type="text" name="address1" form="form1" />

如果填寫姓名和住址并單擊“提交”按鈕，則name1和address1會被分別賦值為所填寫的值。例如，如果在姓名處填寫“zhangsan”，住址處填寫“北京”，則單擊“提交”按鈕后，服務器端會接收到“name1=zhangsan”和“address1=北京”。用戶也可以在提交后觀察瀏覽器的地址欄，可以看到有“name1=張三&address1=北京”的信息。
在這里插入圖片描述

6.4、定義表單重寫

HTML5新增了5個表單重寫屬性，用于重寫標簽屬性設置，簡單說明如下。

formaction：重寫<form>標簽的action屬性。
formenctype：重寫<form>標簽的enctype屬性。
formmethod：重寫<form>標簽的method屬性。
formnovalidate：重寫<form>標簽的novalidate屬性。
formtarget：重寫<form>標簽的target屬性。

注意：表單重寫屬性僅適用于submit和image類型的input元素。

【示例】通過formaction屬性，實現將表單提交到不同的服務器頁面。

    <form action="1.asp" id="testform">請輸入電子郵件地址：<input type="email" name="userid" /><br /><input type="submit" value="提交到頁面1" formaction="1.asp" /><input type="submit" value="提交到頁面2" formaction="2.asp" /><input type="submit" value="提交到頁面3" formaction="3.asp" /></form>

在這里插入圖片描述

6.5、定義高和寬

height和width屬性僅用于設置<input type="image">標簽的圖像高度和寬度。

【示例】演示height與width屬性的應用。

    <form action="testform.asp" method="get">請輸入用戶名: <input type="text" name="user_name" /><br /><input type="image" src="images/submit.png" width="72" height="26" /></form>

源圖像的大小為288px×104px，使用以上代碼將其大小限制為72px×267px，在Chrome瀏覽器中的運行結果如下圖所示。
在這里插入圖片描述

6.6、定義列表選項

list屬性用于設置輸入域的datalist，datalist是輸入域的選項列表。list屬性適用于text、search、url、telephone、email、date pickers、number、range和color類型的<input>標簽。

注意：目前，最新的主流瀏覽器都已支持list屬性，不過呈現形式略有不同。

6.7、定義最小值、最大值和步長

min、max和step屬性用于為包含數字或日期的input輸入類型設置限值，適用于date pickers、number和range類型的<input>標簽。具體說明如下：

max屬性：設置輸入框所允許的最大值。
min屬性：設置輸入框所允許的最小值。
step屬性：為輸入框設置合法的數字間隔（步長）。例如，step=“4”，則合法值包括-4、0、4等。

【示例】設計一個數字輸入框，并規定該輸入框接收0～12的值，且數字間隔為4。

    <form action="testform.asp" method="get">請輸入數值：<input type="number" name="number1" min="0" max="12" step="4" /><input type="submit" value="提交" /></form>

如果單擊數字輸入框右側的微調按鈕，則可以看到數字以4為步進值遞增。
在這里插入圖片描述

6.8、定義多選

multiple屬性可以設置輸入域一次選擇多個值，適用于email和file類型的<input>標簽。

【示例】在頁面中插入一個文件域，使用multiple屬性允許用戶一次可以提交多個文件。

    <form action="testform.asp" method="get">請選擇要上傳的多個文件：<input type="file" name="img" multiple /><input type="submit" value="提交" /></form>

如果單擊“添加文件”按鈕，則會允許在打開的對話框中選擇多個文件。選擇文件并單擊“打開”按鈕后會關閉對話框。
在這里插入圖片描述

6.9、定義匹配模式

pattern屬性規定用于驗證input域的模式。模式就是JavaScript正則表達式，通過自定義的正則表達式匹配用戶輸入的內容，以便進行驗證。該屬性適用于text、search、url、telephone、email和password類型的<input>標簽。

【示例】使用pattern屬性設置文本框必須輸入6位數的郵政編碼。

    <form action="/testform.asp" method="get">請輸入郵政編碼: <input type="text" name="zip_code" pattern="[0-9]{6}"title="請輸入6位數的郵政編碼" /><input type="submit" value="提交" /></form>

在這里插入圖片描述

6.10、定義替換文本

placeholder屬性用于為input類型的輸入框提供一種文本提示，這些提示可以描述輸入框期待用戶輸入的內容，在輸入框為空時顯示，而當輸入框獲取焦點時則自動消失。placeholder屬性適用于text、search、url、telephone、email和password類型的<input>標簽。

【示例】placeholder屬性的應用。請注意比較本例與上例提示方法的不同。

    <form action="/testform.asp" method="get">請輸入郵政編碼:<input type="text" name="zip_code" pattern="[0-9]{6}"placeholder="請輸入6位數的郵政編碼" /><input type="submit" value="提交" /></form>

在這里插入圖片描述
當輸入框獲得焦點并輸入字符時，提示文字消失：

6.11、定義必填

required屬性用于定義輸入框填寫的內容不能為空，否則不允許提交表單。該屬性適用于text、search、url、telephone、email、password、date pickers、number、checkbox、radio和file類型的<input>標簽。

【示例】使用required屬性規定文本框必須輸入內容。

    <form action="/testform.asp" method="get">請輸入姓名: <input type="text" name="usr_name" required="required" /><input type="submit" value="提交" /></form>

當輸入框內容為空并單擊“提交”按鈕時，會出現“請填寫此字段”的提示，只有輸入內容之后才允許提交表單。
在這里插入圖片描述

6.12、定義復選框狀態

在HTML4中，復選框有兩種狀態：選中和未選中。HTML5為復選框添加了一種狀態—未知，使用indeterminate屬性可以對其進行控制，它與checked屬性一樣，都是布爾屬性，用法相同。

    <label><input type="checkbox" id="chk1" >未選中狀態</label><label><input type="checkbox" id="chk2" checked >選中狀態</label><label><input type="checkbox" id="chk3" indeterminate >未知狀態</label>

在這里插入圖片描述
【示例】在JavaScript腳本中直接設置或訪問復選框的狀態。

    <style>input:indeterminate {width: 20px; height: 20px;}  /*未知狀態的樣式*/input:checked {width: 20px; height: 20px;}        /*選中狀態的樣式*/</style><script>chk3.indeterminate = true;                        //設置為未知狀態chk2.indeterminate = false;                       //設置為確知狀態if ( chk3.indeterminate ){ alert("未知狀態") }else{if ( chk3.checked ){ alert("選中狀態") }else{ alert("未選中狀態") }}</script>

值得注意的是，目前瀏覽器僅支持使用JavaScript腳本控制未知狀態，如果直接為復選框標簽設置indeterminate屬性，則無任何效果，如下圖所示。
在這里插入圖片描述
另外，復選框的indeterminate狀態的價值僅是視覺意義，在用戶界面上看起來更友好，復選框的值仍然只有選中和未選中兩種。

6.13、獲取文本選取方向

HTML5為文本框和文本區域控件新增了selectionDirection屬性，用來檢測用戶在這兩個元素中使用鼠標選取文字時的操作方向。如果是正向選擇，則返回forward；如果是反向選擇，則返回backford；如果沒有選擇，則返回forward。

【示例】簡單演示如何獲取用戶選擇文本的操作方向。

    <script>function ok() {var a=document.forms[0]['test'];alert(a.selectionDirection);}</script><form><input type="text"  name="test" value="selectionDirection屬性"><input type="button" value="提交" onClick="ok()"></form>

6.14、訪問標簽綁定的控件

HTML5為label元素新增control屬性，允許使用該屬性訪問label綁定的表單控件。

【示例】使用包含一個文本框，然后通過label.control來訪問文本框。

    <script type="text/javascript">function setValue() {var label =document.getElementById("label");label.control.value = "010888";    // 訪問綁定的文本框，并設置它的值}</script><form><label id="label">郵編 <input id="code" maxlength="6"></label><input type="button" value="默認值" onclick="setValue()"></form>

在這里插入圖片描述

提示：可以通過label元素的for屬性綁定文本框，然后使用label的control屬性訪問它。

7.15、訪問控件的標簽集

HTML5為所有表單控件新增labels屬性，允許使用該屬性訪問與控件綁定的標簽對象，該屬性返回一個NodeList對象（節點集合），再通過下標或for循環可以訪問某個具體綁定的標簽。

【示例】使用text.labels.length獲取與文本框綁定的標簽個數，如果僅綁定一個標簽，則創建一個標簽，然后綁定到文本框上，設置它的屬性，并顯示在按鈕前面。然后判斷用戶輸入的信息，并把驗證信息顯示在第二個綁定的標簽對象中，效果如下圖所示。
在這里插入圖片描述

7、HTML5新表單元素

7.1、定義數據列表

datalist元素用于為輸入框提供一個可選的列表，供用戶輸入匹配或直接選擇。如果不想從列表中選擇，也可以自行輸入內容。

datalist元素需要與option元素配合使用，每一個option選項都必須設置value屬性值。其中<datalist>標簽用于定義列表框，<option>標簽用于定義列表項。如果要把datalist提供的列表綁定到某輸入框上，還需要使用輸入框的list屬性引用datalist元素的id。

【示例】演示datalist元素和list屬性如何配合使用。

    <form action="testform.asp" method="get">請輸入網址：<input type="url" list="url_list" name="weblink" /><datalist id="url_list"><option label="新浪" value="http://www.sina.com.cn" /><option label="搜狐" value="http://www.sohu.com" /><option label="網易" value="http://www.163.com" /></datalist><input type="submit" value="提交" /></form>

在Chrome瀏覽器中運行，當用戶單擊輸入框之后，就會彈出一個下拉列表，供用戶選擇網址，效果如下圖所示。
在這里插入圖片描述

7.2、定義密鑰對生成器

keygen元素的作用是提供一種驗證用戶的可靠方法。

作為密鑰對生成器，當提交表單時，keygen元素會生成兩個鍵：私鑰和公鑰。私鑰存儲于客戶端；公鑰被發送到服務器，可用于之后驗證用戶的客戶端證書。

目前，瀏覽器對該元素的支持不是很理想。

【示例】keygen屬性的應用。

    <form action="/testform.asp" method="get">請輸入用戶名: <input type="text" name="usr_name" /><br>請選擇加密強度: <keygen name="security" /><br><input type="submit" value="提交" /></form>

在這里插入圖片描述

7.3、定義輸出結果

output元素用于在瀏覽器中顯示計算結果或腳本輸出，其語法如下。output元素應該位于表單結構的內部，或者設置form屬性指定所屬表單，也可以設置for屬性綁定輸出控件。

    <output name="">Text</output>

【示例】下面是output元素的一個應用示例。該示例計算用戶輸入的兩個數字的乘積。

    <script type="text/javascript">function multi(){a=parseInt(prompt("請輸入第1個數字。",0));b=parseInt(prompt("請輸入第2個數字。",0));document.forms["form"]["result"].value=a*b;}</script><body onload="multi()"><form action="testform.asp" method="get" name="form">兩數的乘積為: <output name="result"></output></form></body>

在這里插入圖片描述

8、HTML5表單屬性

8.1、定義自動完成

autocomplete屬性用于規定form中所有元素都擁有自動完成功能。該屬性在介紹input屬性時已經介紹過，用法與之相同。

但是，當autocomplete屬性用于整個form時，所有從屬于該form的控件都具備自動完成功能。如果要關閉部分控件的自動完成功能，則需要單獨設置autocomplete=“off”，具體示例可參考autocomplete屬性的介紹。

8.2、定義禁止驗證

HTML5表單控件具有自動驗證功能，如果要禁止驗證，可以使用novalidate屬性，該屬性規定在提交表單時不應該驗證form或input域。它適用于<form>標簽，以及text、search、url、telephone、email、password、date pickers、range和color類型的<input>標簽。

【示例1】使用novalidate屬性取消整個表單的驗證。

    <form action="testform.asp" method="get" novalidate>請輸入電子郵件地址: <input type="email" name="user_email" /><input type="submit" value="提交" /></form>

在這里插入圖片描述
【補充】：HTML5為form、input、select和textarea元素定義了一個checkValidity()方法。調用該方法，可以顯式地對表單內所有元素內容或單個元素內容進行有效性驗證。checkValidity()方法將返回布爾值，以提示是否通過驗證。

【示例2】使用checkValidity()方法，主動驗證用戶輸入的email地址是否有效。

    <script>function check(){var email = document.getElementById("email");if(email.value==""){alert("請輸入email地址");return false;}else if(!email.checkValidity()){alert("請輸入正確的email地址");return false;}elsealert("您輸入的email地址有效");}</script><form id=testform onsubmit="return check();" novalidate><label for=email>email</label><input name=email id=email type=email /><br/><input type=submit></form>