HTML5表單在原有表單特性的基礎上增加了一些比較便捷的特性，使得我們實現一些常用的表單的小部件、輸入類型、輸入驗證不再那麼大費周章。上一篇文章提到了HTML5實現的幾種新的輸入類型，現在我們更加詳盡的瞭解HTML5的表單產生的新特性和功能。 1. 輸入類型和輸入屬性 菜鳥教程上給出了HTML5新增 ...
HTML5表單在原有表單特性的基礎上增加了一些比較便捷的特性，使得我們實現一些常用的表單的小部件、輸入類型、輸入驗證不再那麼大費周章。上一篇文章提到了HTML5實現的幾種新的輸入類型，現在我們更加詳盡的瞭解HTML5的表單產生的新特性和功能。
1. 輸入類型和輸入屬性
菜鳥教程上給出了HTML5新增加的input輸入類型，可以在上面嘗試一下不同類型的樣子，基本可以滿足日常開發需求了。類型不同會照成什麼內在差異呢？主要有三點，首先，瀏覽器會根據輸入類型進行基本的數據校驗，例如type="email"，如果用戶輸入的內容不包括@符號，那麼這就是不合法的輸入，瀏覽器會給出相應的提示。不同類型的第二點影響就是在移動端上，在瀏覽器上瀏覽頁面時，如果輸入項類型不同，設備給出的虛擬鍵盤就會根據該類型的不同而不同，比如如果type="email"，輸入時在蘋果手機上給出的鍵盤類型就增加了@符號。第三點則是帶來的便捷了，你輸入值如果是顏色類型，那麼瀏覽器會給你一個顏色選擇的面板，從而選擇或者輸入相應的顏色，如果單獨實現一個這種顏色選擇器方便用戶輸入的話就顯得有些麻煩了；。
輸入屬性控制了一些特殊的內容，介紹三個輸入屬性：
placeholder: 相信大家最常用的就是這個屬性了，126郵箱的賬戶和密碼都用了這個placeholder，placeholder實際上就是文本占位符，當用戶輸入了內容占位符自動消失，起到了提示的作用。
autofocus: 看例子就明白了，它用於定義在頁面載入時應該獲取焦點的輸入元素。
required: 設定這個屬性就說明該輸入時必填項，如果用戶沒有填如該內容就提交表單，瀏覽器會給出相應的提示。
2. min max data-*輸入屬性 <output>
max min 屬性定義了number, range輸入的最大值與最小值。
data-*的作用是將鍵值對數據綁定到一些元素上。通過dom元素的dataset對象獲得：
<input type="number" data-price="21" >
js代碼：
let element = document.getElementById('testid'); let price = element.dataset.price
<output> 元素的作用是將結果顯示給用戶：
<body>
<output id='test'>122</output>
</body>
<script type="text/javascript">
let ss = document.getElementById('test')
ss.value = 888;
</script>
這個小例子就實現了將output的值設置為888;
