HTML5表單
新增的input輸入類型
HTML5中增加了表單方面的諸多功能，包括增加input輸入類型、表單元素、form屬性和input屬性等。
新的input輸入類型
- email類型的input元素是一種專門用於輸入E-mail地址的文本輸入框，在提交表單的時候，會自動驗證email輸入框的值，如果不是一個有效的E-mail地址，該輸入框不允許提交該表單。
<input type="email" name="user_email">
- url類型的input元素提供用於輸入url地址這類特殊文本的文本框。當提交表單時，如果所輸入的內容是url地址格式的文本，則會提交數據到服務器，如果不是url地址格式的文本，則不允許提交。
<input type="url" name="user_url">
- number類型的input元素提供用於輸入數值的文本框，可以設定所接受的數字的限制，包括規定允許的最大值和最小值、合法的數字間隔或默認值等。
<input type="number" name="number1"min="1" max="20" step="4">
max:規定允許的最大值
min：規定允許的最小值
step：規定合法的數字間隔（例如step="4",合法數字是-4、0、4、8等）
value：規定默認值
- range類型的input元素提供用於輸入包含一定範圍內數字值的文本框，在網頁中顯示為滑動條。
<input type="range" name="range1"min="1" max="30" step="4">
max:規定允許的最大值
min：規定允許的最小值
step：規定合法的數字間隔（例如step="4",合法數字是-4、0、4、8等）
value：規定默認值
- Date Pickers日期檢出器是網頁中經常要用到的一種控件，HTML5提供了多個可用於選取日期和時間的輸入類型，即6中日期檢出器控件，分別用於選擇以下日期格式：日期、月、星期、時間、日期+時間和日期+時間+時區。
|
輸入類型 |
HTML代碼 |
功能與說明 |
|
date |
<input type="date"> |
選取日、月、年 |
|
month |
<input type="month"> |
選取月、年 |
|
week |
<input type="week"> |
選取周和年 |
|
time |
<input type="time"> |
選取時間(小時和分鐘) |
|
datetime |
<input type="datetime"> |
選取時間、日、月、年(UTC時間) |
|
datetime-local |
<input type="datetime-local"> |
選取時間、日、月、年(本地時間) |
date、month、week、time類型支持使用一些屬性來限定時間的大小範圍或合法的時間間隔。
- search類型的input元素提供用於輸入搜索關鍵詞的文本框。
<input type="search" name="search1">
- tel類型的input元素提供專門用於輸入電話號碼的文本框。它並不限定只輸入數字。
<input type="tel" name="tel1">
- color類型的input元素提供專門用戶設置顏色的文本框。通過單擊文本框，可以快速打開拾色器面板，方便用戶可視化選擇一種顏色。
<input type="color" name="color1">
新增的input屬性
input元素不但新增了輸入類型，還新增了幾個input屬性，用於指定輸入類型的行為和限制，這些屬性分別是autocomplete、autofocus、form、formoverrides、placeholder、height和width、min和max、step、list、pattern以及required。
- 新增的autocomplete屬性可以幫助用戶在input類型的輸入框中實現自動完成內容輸入。autocomplete屬性有3種值：on、off和空值。
- 新增的autofocus屬性可以使得在頁面加載時，某表單控件自動獲得焦點，它是一個布爾值。這些控件可以是文本框、復選框、單選按鈕和普通按鈕等所有<input>標簽的類型。在同一頁面中只能指定一個antofocus屬性值。
- 新增form屬性可以把表單內的從屬元素寫在頁面中的任意位置，然後只需要為這個元素指定form屬性並設置屬性值為該表單的id。
<form action="" method="get"id="form1">
如果一個form屬性要引用兩個或兩個以上的表單，則需要使用空格將表單id分隔開。
<input type="text" name="address1"form="form1 form2 form3" />
- 新增的form override表單重新屬性，用於重寫form元素的某些屬性設定。表單重寫屬性並不適用於所有的input輸入類型，而是只適用於submit和image輸入類型。
- formaction:用於重寫表單的action屬性（實現將表單提交到不同的頁面中去）；
- formenctype：用於重寫表單的enctype屬性；
- formmethod：用於重寫表單的method屬性；
- formnovalidate：用於重寫表單的novalidate屬性；
- formtarget：用於重寫表單的target屬性
- 新增的height和width屬性規定用於image類型的input標簽的圖像高度和寬度，只適用於image類型的input標簽。
- 新增的datalist元素可以實現數據列表的下拉效果，外觀類似autocomplete，用戶可從列表中選擇，也可自行輸入，而list屬性用於指定輸入框所綁定的datalist元素，其值是某個datalist的id。
- 新增的min、max、step屬性用於為包含數字或日期的input輸入類型規定限制，適用於date、pickers、number和range標簽。
max:規定輸入框所允許的最大值
min：規定輸入框所允許的最小值
step：規定輸入框合法的數字間隔
- 新增的multiple屬性支持一次性選擇多個文件，並且該屬性同時支持新增的email類型。
選擇要上傳的多個文件：
<input type="file" name="img"multiple="multiple" />
- 新增pattern屬性用於驗證input類型輸入框中用戶輸入的內容是否與自定義的正則表達式相匹配，適用於text、search、url、telephone、email、password等input標簽。pattern屬性允許用戶自定義一個正則表達式，但用戶的輸入必須符合正則表達式所指定的規則。
- 新增placeholder屬性用於為input類型的輸入框提供一種提示（hint），這些提示可以描述輸入框期待用戶輸入何種內容，在輸入框為空時顯式出現，而當輸入框獲得焦點時則會消失。
- 新增required屬性用於規定輸入框填寫的內容不能為空，否則不允許用戶提交表單。該屬性適用於以下input輸入類型：text、search、url、telephone、email、password、date pickers、number、checkbox、radio和file。
新增的form元素
HTMl5新增了幾個form元素，分別是datalist、keygen和output。
- 新增的datalist元素用於為輸入框提供一個可選的列表，用戶可以直接選擇列表中的某一預設的項，從而免去輸入的麻煩。
- 新增的keygen元素是密鑰對生成器（key-pair generator），能夠使用戶驗證更為可靠。
<keygen name="security"/>
- 新增的output元素用於在瀏覽器中顯示計算結果或腳本輸出，包含完整的開始和結束標簽。
新增的form屬性
- 新增的autocomplete屬性用於規定form中所以元素都擁有自動完成功能
- 新增的novalidate屬性用於在提交表單時取消整個表單的驗證，即關閉對表單內所以元素的有效性檢查
HTML5表單