圖文并茂將HTML5中的新增表單元素徹底搞明白
在HTML4.01中，表單的類型以及使用方法都非常有限。HTML5在HTML4.01的基礎(chǔ)上，對表單進行了以下兩個方向的擴展。
新增input元素類型。
新增其他表單元素。
這兩個方向的擴展，使得代碼量大大減少，可以極大地提高開發(fā)效率。
1、新增input元素類型
在HTML5中，大量地增加了input元素的種類。換句話說就是，input元素的type屬性新增了大量屬性值，如下表所示：
1.1、驗證型：
1.1.1、email
當(dāng)type屬性取值為“email”時，表示這是輸入電子郵件的文本框（語義化）。
語法：
舉例：
結(jié)果：
說明：
當(dāng)我們輸入非電子郵件格式的字符，然后點擊【提交】按鈕時，會發(fā)現(xiàn)無法提交并且彈出提示內(nèi)容，效果如圖所示。這里有一點要說明，即必須是submit按鈕才會彈出提示內(nèi)容，使用其他按鈕（如button按鈕）則不會。這是因為email類型的文本框采用了瀏覽器內(nèi)置的驗證機制，而瀏覽器內(nèi)置的驗證機制必須使用submit按鈕才會觸發(fā)。
1.1.2、tel
當(dāng)type屬性取值為“tel”時，表示這是輸入電話號碼的文本框（語義化）。
語法：
舉例：
結(jié)果：
說明：
當(dāng)我們輸入非電話號碼格式的字符，然后點擊【提交】按鈕時，卻發(fā)現(xiàn)居然可以提交！這是怎么回事呢？其實tel類型文本框并不具備完備的驗證功能，如果想要達到驗證效果，則需要結(jié)合3.2節(jié)介紹的pattern屬性來實現(xiàn)。
1.1.3、url
當(dāng)type屬性取值為“url”時，表示這是輸入URL的文本框（語義化）。
語法：
舉例：
結(jié)果：
說明：
當(dāng)我們輸入非URL格式的字符，然后點擊【提交】按鈕時，會發(fā)現(xiàn)無法提交并且彈出提示內(nèi)容，效果如圖所示。所謂的URL格式字符，指的是以“http://”或者“https://”開頭的網(wǎng)絡(luò)地址。
1.2、取值型：
1.2.1、range
當(dāng)type屬性取值為“range”時，我們可以通過拖動滑動條獲取某一個范圍內(nèi)的數(shù)字。
語法：
min屬性用于設(shè)置最小值，max屬性用于設(shè)置最大值，step屬性用于設(shè)置間隔數(shù)。這3個屬性的取值可以是整數(shù)，也可以是小數(shù)。
舉例：
結(jié)果：
說明：
上面這句代碼表示：滑動條最小值為-10，最大值為10，每次拖動只能改變5（增加5或減少5）。value="-10"用于設(shè)置滑動條的初始值，設(shè)置不同的value值，滑塊也會出現(xiàn)在對應(yīng)數(shù)值的位置。在實際開發(fā)中，range類型元素都是需要結(jié)合javaScript來操作的，上面這個例子就是最簡單也是最經(jīng)典的。此外，output元素用于定義表單元素的輸出結(jié)果。
1.2.2、number
當(dāng)type屬性取值為“number”時，我們可以通過使用微調(diào)按鈕來獲取某一個范圍的數(shù)字。
語法：
min屬性用于設(shè)置最小值，max屬性用于設(shè)置最大值，step屬性用于設(shè)置間隔數(shù)。它們的屬性取值可以是整數(shù)，也可以是小數(shù)。number類型跟range類型功能非常相似，都是獲取某一個范圍內(nèi)的數(shù)字。不過兩者的外觀不一樣，其中number類型使用的是“微調(diào)按鈕”，而range類型使用的是“滑塊”。
舉例：
結(jié)果：
說明：
在這個例子中，我們可以直接在文本框中輸入數(shù)字，也可以通過右邊的微調(diào)按鈕來改變數(shù)字。
1.2.3、color
當(dāng)type屬性取值為“color”時，我們可以直接使用瀏覽器自帶的取色工具來獲取顏色值。
語法：
value屬性用于設(shè)置顏色初始值，格式必須是十六進制顏色值如#F1F1F1，不能是關(guān)鍵字（如black）和rgba顏色（如rgba(255, 255, 255, 0.5)）。
舉例：
結(jié)果：
說明：
當(dāng)我們點擊color類型元素時，瀏覽器會彈出自帶的取色工具，以方便直接選取顏色值，如下圖所示。
1.2.4、date
當(dāng)type屬性取值為“date”時，我們可以直接使用瀏覽器自帶的日歷工具來獲取日期（年、月、日）。
語法：
value屬性用于設(shè)置日期初始值，格式必須如“2018-05-20”。
舉例：
結(jié)果：
說明：
當(dāng)我們點擊date類型元素時，瀏覽器會彈出自帶的日歷工具，以方便直接選取日期，如下圖所示。此外，value屬性用于設(shè)置日期初始值，格式必須如“2021-07-27”，像“2018–7-27”這種是無效的。
1.2.5、time
當(dāng)type屬性取值為“time”時，我們可以直接使用瀏覽器自帶的工具來獲取時間（時、分）。
語法：
value屬性用于設(shè)置時間初始值，格式必須如“08:04”。
舉例：
結(jié)果：
說明：
當(dāng)我們點擊time類型元素時，文本框右邊會出現(xiàn)微調(diào)按鈕，以方便調(diào)整時間，如下圖所示。此外，value屬性用于設(shè)置時間初始值，格式必須如“08:04”，像“8:4”這種是無效的。
1.2.6、month
當(dāng)type屬性取值為“month”時，我們可以使用瀏覽器自帶的工具來獲取“月數(shù)”。
語法：
value屬性用于設(shè)置初始值，格式必須如“2021-07”。
舉例：
結(jié)果：
說明：
當(dāng)我們點擊month類型元素時，瀏覽器會彈出選擇框，以方便選擇哪個月份，如下圖所示。
1.2.7、week
當(dāng)type屬性取值為“week”時，我們可以使用瀏覽器自帶的工具來獲取“周數(shù)”。
語法：
value屬性用于設(shè)置初始值，格式必須如“2021-W04”。其中，“W”是“week”的縮寫。
舉例：
結(jié)果：
說明：
當(dāng)我們點擊week類型元素時，瀏覽器會彈出選擇框，以方便選擇第幾周，如下圖所示。
2、新增其他表單元素
前面介紹的都是input元素新增的類型，實際上HTML5還新增了3個表單元素：output、datalist、keygen。
2.2、output
在HTML5中，我們可以使用output元素來定義表單元素的輸出結(jié)果或計算結(jié)果。
語法：
舉例：
結(jié)果：
說明：
output元素一般放在form元素內(nèi)部，并且配合其他表單元素（如文本框等）來使用。
2.2、datalist
在HTML5中，我們可以使用datalist元素來為文本框提供一個可選的列表。
語法：
舉例：
結(jié)果：
說明：
如果想要把datalist綁定到某個文本框，需要設(shè)置該文本框的list屬性值等于datalist的id值。
3、其他新增元素
Html5除了新增結(jié)構(gòu)元素和表單元素之外，HTML5還增加了大量語義化元素，其中最重要的有以下6個，下面分別做介紹。
3.1、address
在HTML5中，我們可以使用更具有語義化的address元素來為“整個頁面”或者“某一個article元素”添加地址信息（電子郵件或真實地址）。當(dāng)address元素應(yīng)用于整個頁面時，它一般放于整個頁面的底部（footer元素內(nèi)部），表示該網(wǎng)站所有者的地址信息。一個頁面可以有多個article元素，比如有些頁面就有好幾篇文章。當(dāng)address元素應(yīng)用于article元素時，它一般放在article元素內(nèi)部的footer元素內(nèi)，表示該篇文章所有者的地址信息。當(dāng)然，address元素也可以放于section元素內(nèi)。
舉例1-應(yīng)用于整個頁面：
效果圖1：
舉例2-應(yīng)用于article元素：
效果圖2：
3.2、time
在HTML5中，我們可以使用更具有語義化的time元素來顯示頁面中的日期時間信息。
語法：
datetime屬性取值是一個時間，可以省略不寫。datetime屬性中的時間是提供給搜索引擎看的，而time標(biāo)簽內(nèi)的時間是提供給用戶看的，兩者內(nèi)容可以一樣也可以不一樣。time元素與datetime屬性的關(guān)系，有點類似于img元素與alt屬性的關(guān)系。
舉例：
結(jié)果：
說明：
在實際開發(fā)中，大多數(shù)情況下我們是不用datetime屬性的。用一句話總結(jié)就是：對于time元素的使用，我們不必過于拘泥，想要顯示一段有意義的日期時間，用括起來就可以了。
3.3、progress
在HTML5中，我們可以使用progress元素以進度條的形式來顯示某一個任務(wù)的完成度，如上傳文件、下載文件等。
語法：
max屬性表示最大值，value屬性表示當(dāng)前值。對于progress元素來說，它只有max屬性，而沒有min屬性。為什么呢？原因很簡單：任何進度條的最小值都是0，因此progress元素默認(rèn)最小值也是0。此外，max和value必須是0或正數(shù)，并且max值必須大于等于value值。
舉例1：
結(jié)果1：
說明1：
“進度=value/max”，因此雖然兩個progress元素的max和value不一致，但是進度是相同的，都是80%。
舉例2：
O%
結(jié)果2：
說明2：
在這個例子中，我們使用定時器setInterval()來實現(xiàn)進度條的不斷增加。當(dāng)我們點擊【顯示進度】按鈕后，進度條會不斷增加，效果如上圖所示。在實際開發(fā)中，progress元素一般結(jié)合上傳文件或下載文件操作來顯示進度，或者展示一個loading圖標(biāo)，以便增強用戶體驗。
3.4、meter
在HTML5中，我們可以使用進度條的形式來顯示數(shù)據(jù)所占的比例。
語法：
舉例：
結(jié)果：
說明：
meter元素跟progress元素非常相似，都是以進度條形式來顯示數(shù)據(jù)比例。不過，兩者在語義上有很大的區(qū)別：
meter元素一般用于顯示靜態(tài)數(shù)據(jù)比例。所謂的靜態(tài)數(shù)據(jù)，指的是很少改變的數(shù)據(jù)，例如男生人數(shù)占全班人數(shù)的比例。
progress元素一般用于顯示動態(tài)數(shù)據(jù)比例。所謂“動態(tài)數(shù)據(jù)”，指的是會不斷改變的數(shù)據(jù)，例如下載文件的進度。
3.5、figure和figcaption
如下圖所示“圖片+圖注”效果，在實際開發(fā)中經(jīng)常可以見到。對于初學(xué)者來說，我們很可能使用如下代碼來實現(xiàn)：
Html5
但是這種實現(xiàn)方式語義并不好。在HTML5中，引入了figure和figcaption這兩個元素來增強圖片的語義化。
語法：
