input標簽主要用於Web表單的創建交互，以便接受來自用戶的數據。 我們通過更改type屬性的值，來實現不同的輸入類型。在以前的寫法中表單元素必須放在form元素所包含的里面，而在html5中，我們可以把它們寫在頁面上的任何一個地方，只需要給該元素增加一個form屬性，form屬性的值為form表單的id。例如：
1 <form method="get" id="test"> 2 <input type="text" name="name"/> 3 <input type="password" name="password"/> 4 <input type="submit" value="提交"> 5 </form> 6 <input type="text" name="confirm" form="test">
html5新增表單屬性
color：用於指定顏色的控件。
date：用於輸入日期的控件（年，月，日，不包括時間）。
datetime：基於 UTC 時區的日期時間輸入控件（時，分，秒及幾分）。
datetime-local：用於輸入日期時間控件，不包含時區。
email：用於編輯 e-mail 的字段。 合適的時候可以使用 :valid 和 :invalid CSS 偽類。
month：用於輸入年月的控件，不帶時區。
number: 用於輸入浮點數的控件。
range：用於輸入不精確值控件。如果未指定相應的屬性，控件使用如下缺省值： min：0 max：100 value：min + (max-min)/2，或當 max 小於 min 時使用。
search：用於輸入搜索字符串的單行文本字段。換行會被從輸入的值中自動移除。
tel：用於輸入電話號碼的控件；換行會被自動從輸入的值中移除A，但不會執行其他語法。可以使用屬性，比如 pattern 和 maxlength 來約束控件輸入的值。恰當的時候，可以應用 :valid 和 :invalid CSS 偽類。
time：用於輸入不含時區的時間控件。
url：用於編輯URL的字段。換行會被自動從輸入值中移隊。可以使用如：pattern 和 maxlength 樣的屬性來約束輸入的值。 恰當的時候使可以應用 :valid 和 :invalid CSS 偽類。
week：用於輸入一個由星期-年組成的日期，日期不包括時區。
使用上述屬性的時候，當在表單提交，和觸發填寫時候，支持html5的瀏覽器會提示類型是否正確，如果沒有設置novalidate屬性當輸入不正確是無法提交的。不支持的將以默認屬性"text"。
html5新增form 屬性
autocomplete： 屬性規定輸入字段是否應該啟用自動完成功能。自動完成允許瀏覽器預測對字段的輸入。當用戶在字段開始鍵入時，瀏覽器基於之前鍵入過的值，應該顯示出在字段中填寫的選項。<form autocomplete="on|off">
novalidate :屬性規定當提交表單時不對其進行驗證。如果使用該屬性，則表單不會驗證表單的輸入。<form novalidate="novalidate">
input 屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| accept | mime_type | 規定通過文件上傳來提交的文件的類型。 |
| align |
|
不贊成使用。規定圖像輸入的對齊方式。 |
| alt | text | 定義圖像輸入的替代文本。 |
| autocomplete |
|
規定是否使用輸入字段的自動完成功能。 |
| autofocus | autofocus | 規定輸入字段在頁面加載時是否獲得焦點。 （不適用於 type="hidden"） |
| checked | checked | 規定此 input 元素首次加載時應當被選中。 |
| disabled | disabled | 當 input 元素加載時禁用此元素。 |
| form | formname | 規定輸入字段所屬的一個或多個表單。 |
| formaction | URL | 覆蓋表單的 action 屬性。 （適用於 type="submit" 和 type="image"） |
| formenctype | 見注釋 | 覆蓋表單的 enctype 屬性。 （適用於 type="submit" 和 type="image"） |
| formmethod |
|
覆蓋表單的 method 屬性。 （適用於 type="submit" 和 type="image"） |
| formnovalidate | formnovalidate | 覆蓋表單的 novalidate 屬性。 如果使用該屬性，則提交表單時不進行驗證。 |
| formtarget |
|
覆蓋表單的 target 屬性。 （適用於 type="submit" 和 type="image"） |
| height |
|
定義 input 字段的高度。（適用於 type="image"） |
| list | datalist-id | 引用包含輸入字段的預定義選項的 datalist 。 |
| max |
|
規定輸入字段的最大值。 請與 "min" 屬性配合使用，來創建合法值的范圍。 |
| maxlength | number | 規定輸入字段中的字符的最大長度。 |
| min |
|
規定輸入字段的最小值。 請與 "max" 屬性配合使用，來創建合法值的范圍。 |
| multiple | multiple | 如果使用該屬性，則允許一個以上的值。 |
| name | field_name | 定義 input 元素的名稱。 |
| pattern | regexp_pattern | 規定輸入字段的值的模式或格式。 例如 pattern="[0-9]" 表示輸入值必須是 0 與 9 之間的數字。 |
| placeholder | text | 規定幫助用戶填寫輸入字段的提示。 |
| readonly | readonly | 規定輸入字段為只讀。 |
| required | required | 指示輸入字段的值是必需的。 |
| size | number_of_char | 定義輸入字段的寬度。 |
| src | URL | 定義以提交按鈕形式顯示的圖像的 URL。 |
| step | number | 規定輸入字的的合法數字間隔。 |
| type |
|
規定 input 元素的類型。 |
| value | value | 規定 input 元素的值。 |
| width |
|
定義 input 字段的寬度。（適用於 type="image"） |
007辦公資源網站 https://www.wode007.com
在下面的案例中，我們對一些常用的屬性做了解釋:
1 <body> 2 <!-- 3 placeholder:用於在文本框未輸入時提示作用 4 autofocus:用於控件自動獲取焦點 5 --> 6 <input type="search" name="key" value="" results="s" placeholder="君樂寶" autofocus="true"> 7 <input type="button" name="" value="搜索"><br> 8 <!-- 9 novalidate:在控件中加入了required、emial、url等驗證后，如果想讓這些驗證失效，可以在表單中將novalidate設置為tyue 10 --> 11 <form action="upload.php" method="post" accept-charset="utf-8" id="form1" novalidate="true"> 12 <!-- 13 required:必填 14 autocomplete:在網頁的文本框中輸入部分內容或者雙節時，經常會看到在下面顯示輸入過的內容， 15 這就是html5的新特性：自動完成，如果不想使用此功能，將其設置為off即可 16 --> 17 <input type="text" name="UserName" value="" required autocomplete="off"><br> 18 <!-- 19 multiple:在選擇文件時，默認只能單選，加上這個屬性后，則可以使用鼠標選中多個文件進行上傳 20 --> 21 <label>選擇文件</label> 22 <input type="file" name="upload" value="" multiple="multiple"><br> 23 <!-- 24 list：這個屬性要和datalist元素一起使用，指定此文本框的可選擇項，另外其相較於select的優點在於還可以輸入 25 --> 26 <label>區號：</label> 27 <input type="text" name="age" value="" list="list1"><br> 28 <datalist id="list1"> 29 <option value="0312">保定</option> 30 <option value="0311">石家庄</option> 31 <option value="010">北京</option> 32 <option value="0313">唐山</option> 33 </datalist> 34 <!-- 35 formaction:可以更改點擊此按鈕式提交到服務器的處理程序 36 formmethod:可以更改向服務器提交數據的方式 37 --> 38 <input type="submit" name="subsave" value="提交"> 39 <input type="submit" name="subresset" value="更改" formaction="1.php" formmethod="get"> 40 </form> 41 </body>