使用H5設計表單
強大的HTML5，極大地增強了表單的設計能力，實現了很多以前需要大量編碼才能實現的功能。下面我們一起來看看吧。
l 傳統表單元素
action屬性，給出絕對地址，可以指向任何服務器
method屬性，查詢建議用get方式，增刪改建議用post方式
<input>必要屬性有name和type,它的類型有text,password,checkbox[複選框],button,radio,reset,submit,hidden,file,image[圖像按鈕]
<select>創建下拉菜單和列表框，至少包含一個<option>選項元素
文本域<textarearows="" cols=""></textarea>
圖像按鈕<buttonname="" type="按鈕類型"></button>
標籤元素一定與其它某個控件相關聯<label for="關聯控件的id屬性值"></label>
l 新增輸入類型
email用來輸入郵件地址的文本框，會自動對其格式進行驗證<input type="email" id="emailadd"multiple="true"/>
url用來輸入URL地址的文本框，會自動檢測其格式<input type="url" id="myrul"/>
number輸入指定範圍數字，有微調控件<input name="textYear" type="number"min="1950" max="2050" step="1"value="1990"/>
range輸入指定範圍數字，以滑動條展示，<input id="textred" type="range"min="0" max="255" step="1" value="0"onchange="changeColor()"/>
telephone number驗證電話號碼，必要屬性type和patter,<inputtype="telephone" pattern="^\d{3}-\d{8}|\d{4}-\d{7}$"name="tele"/>
search用來輸入搜索關鍵字的文本框，與text類型僅僅是外觀不同<inputtype="search" id="searchtext"/>
color顏色選擇器<input type="color" id="changeCol"value="#00a2e8"width="300"/>
日期時間類型：用於輸入時間的文本框，type取值有date,month,week,time,datetime,datetime-local例如<input name="date1"type="date"/>
l 新增表單屬性
autocomplete屬性，是否啓動自動完成功能，針對輸入框默認的on表示啓用，off表示不啓用
autofocus屬性，規定當前頁面加載時是否允許某一個輸入控件自動獲取焦點<input type="text" name="username"autofocus="true"/>
disabled屬性，使控件變爲灰色，不可用狀態；readonly僅不可編輯，但依然可以提交數據
form屬性使得控件不必放在<form>標籤下，可以在頁面任何地方。<input type="text" name="myName"form="form1"/>
list屬性是爲單行文本框增加的，可以指定預定義選項，list的屬性值是某個datalist的id值
multiple屬性允許控件輸入多個值，如上傳控件可以一次選擇多個文件上傳<input type="file" name="images"multiple="multiple"/>
placeholder爲輸入框顯示提示信息，空則出現，用則消失<input type="text" name="name"placeholder="請輸入真實姓名"/>
pattern讓輸入框可以使用正則表達式<input type="password" pattern="\w{6,12}">
required屬性檢查輸入是否爲空，強制"必選"，否則無法提交表單<inputtype="text" name="book" required="required"/>
l 新增表單元素
datalist元素，選項放在option標籤中，作用是輔助文本框的輸入，文本框list屬性值爲datalist的id值。功能類似於<select>選擇框,但更強大
keygen元素作用類似於密碼文本框，更強大。<keygen name="security"/>
output可以顯示不同控件的內容，當它所關聯的input控件的值發生變化時，就觸發form的oninput事件<output name="sum"for="num1 num2"></output>
optgroup對各種類型的選項進行組合，常用在select標記和option標記之間，對option進行分組
l 提交時的驗證處理
自動驗證：是表單的默認驗證方式，常用到的屬性有required，pattern,min,max,step等
顯示驗證：所有表單控件都可以通過checkValidity()來實現驗證，需要提交按鈕觸發JS函數
自定義驗證：所有的input控件可以通過調用setCustomValidity()函數驗證
取消驗證：所有控件（包括form）都可以通過novalidate="true"來實現避免驗證的功能