一、input type類型
1.Input 類型 - email
在提交表單時，會自動驗證 email 域的值。
E-mail: <input type="email" name="user_email" />
當不符合郵箱的時候會自動彈出
2.Input 類型 - url
url 類型用於應該包含 URL 地址的輸入域。
在提交表單時，會自動驗證 url 域的值。
Homepage: <input type="url" name="user_url" />
錯誤時提示
3.Input 類型 - number
number 類型用於應該包含數值的輸入域。
您還能夠設定對所接受的數字的限定：
Points: <input type="number" name="points" min="1" max="10" />
可以店家右邊上下箭頭加減，當不符合的時候
| 屬性 | 值 | 描述 |
|---|---|---|
| max | number | 規定允許的最大值 |
| min | number | 規定允許的最小值 |
| step | number | 規定合法的數字間隔（如果 step="3"，則合法的數是 -3,0,3,6 等） |
| value | number | 規定默認值 |
4.Input 類型 - range
range 類型用於應該包含一定范圍內數字值的輸入域。
range 類型顯示為滑動條。
您還能夠設定對所接受的數字的限定：
<input type="range" name="points" min="1" max="10" />
可以左右滑動
| 屬性 | 值 | 描述 |
|---|---|---|
| max | number | 規定允許的最大值 |
| min | number | 規定允許的最小值 |
| step | number | 規定合法的數字間隔（如果 step="3"，則合法的數是 -3,0,3,6 等） |
| value | number | 規定默認值 |
5.Input 類型 - Date Pickers（日期選擇器）
HTML5 擁有多個可供選取日期和時間的新輸入類型：
- date - 選取日、月、年
- month - 選取月、年
- week - 選取周和年
- time - 選取時間（小時和分鍾）
- datetime - 選取時間、日、月、年（UTC 時間）
- datetime-local - 選取時間、日、月、年（本地時間）
下面的例子允許您從日歷中選取一個日期：
Date: <input type="date" name="user_date" />
Date: <input type="month" name="user_date" />
6.Input 類型 - search
search 類型用於搜索域，比如站點搜索或 Google 搜索。
search 域顯示為常規的文本域。
輸入時會自動彈出X
7.Input類型--color
定義拾色器
<input type="color">
其他input類型
| 值 | 描述 |
|---|---|
| button | 定義可點擊按鈕（多數情況下，用於通過 JavaScript 啟動腳本）。 |
| checkbox | 定義復選框。 |
| file | 定義輸入字段和 "瀏覽"按鈕，供文件上傳。 |
| hidden | 定義隱藏的輸入字段。 |
| image | 定義圖像形式的提交按鈕。 |
| password | 定義密碼字段。該字段中的字符被掩碼。 |
| radio | 定義單選按鈕。 |
| reset | 定義重置按鈕。重置按鈕會清除表單中的所有數據。 |
| submit | 定義提交按鈕。提交按鈕會把表單數據發送到服務器。 |
| text | 定義單行的輸入字段，用戶可在其中輸入文本。默認寬度為 20 個字符。 |
二、input 表單屬性
屬性
New : HTML5新標簽。
| 屬性 | 值 | 描述 |
|---|---|---|
| accept | audio/* video/* image/* MIME_type | 規定通過文件上傳來提交的文件的類型。 (只針對type="file") |
| align | left right top middle bottom | HTML5已廢棄，不贊成使用。規定圖像輸入的對齊方式。 (只針對type="image") |
| alt | text | 定義圖像輸入的替代文本。 (只針對type="image") |
| autocompleteNew | on off | autocomplete 屬性規定 <input> 元素輸入字段是否應該啟用自動完成功能。 |
| autofocusNew | autofocus | 屬性規定當頁面加載時 <input> 元素應該自動獲得焦點。 |
| checked | checked | checked 屬性規定在頁面加載時應該被預先選定的 <input> 元素。 (只針對 type="checkbox" 或者 type="radio") |
| disabled | disabled | disabled 屬性規定應該禁用的 <input> 元素。 |
| formNew | form_id | form 屬性規定 <input> 元素所屬的一個或多個表單。 |
| formactionNew | URL | 屬性規定當表單提交時處理輸入控件的文件的 URL。(只針對 type="submit" 和 type="image") |
| formenctypeNew | application/x-www-form-urlencoded multipart/form-data text/plain | 屬性規定當表單數據提交到服務器時如何編碼(只適合 type="submit" 和 type="image")。 |
| formmethodNew | get post | 定義發送表單數據到 action URL 的 HTTP 方法。 (只適合 type="submit" 和 type="image") |
| formnovalidateNew | formnovalidate | formnovalidate 屬性覆蓋 <form> 元素的 novalidate 屬性。 |
| formtargetNew | _blank _self _parent _top framename | 規定表示提交表單后在哪里顯示接收到響應的名稱或關鍵詞。(只適合 type="submit" 和 type="image") |
| heightNew | pixels | 規定 <input>元素的高度。(只針對type="image") |
| listNew | datalist_id | 屬性引用 <datalist> 元素，其中包含 <input> 元素的預定義選項。 |
| maxNew | number date | 屬性規定 <input> 元素的最大值。 |
| maxlength | number | 屬性規定 <input> 元素中允許的最大字符數。 |
| minNew | number date | 屬性規定 <input>元素的最小值。 |
| multipleNew | multiple | 屬性規定允許用戶輸入到 <input> 元素的多個值。 |
| name | text | name 屬性規定 <input> 元素的名稱。 |
| patternNew | regexp | pattern 屬性規定用於驗證 <input> 元素的值的正則表達式。 |
| placeholderNew | text | placeholder 屬性規定可描述輸入 <input> 字段預期值的簡短的提示信息 。 |
| readonly | readonly | readonly 屬性規定輸入字段是只讀的。 |
| requiredNew | required | 屬性規定必需在提交表單之前填寫輸入字段。 |
| size | number | size 屬性規定以字符數計的 <input> 元素的可見寬度。 |
| src | URL | src 屬性規定顯示為提交按鈕的圖像的 URL。 (只針對 type="image") |
| stepNew | number | step 屬性規定 <input> 元素的合法數字間隔。 |
| type | button checkbox color date datetime datetime-local file hidden image month number password radio range reset search submit tel text time url week |
type 屬性規定要顯示的 <input> 元素的類型。 |
| value | text | 指定 <input> 元素 value 的值。 |
| widthNew | pixels | width 屬性規定 <input> 元素的寬度。 (只針對type="image") |
三、補充 label標簽
<label for="male">Male</label> <input type="radio" name="sex" id="male" value="male"><br> <label for="female">Female</label> <input type="radio" name="sex" id="female" value="female"><br><br>
<label> 標簽為 input 元素定義標注（標記）。
label 元素不會向用戶呈現任何特殊效果。不過，它為鼠標用戶改進了可用性。如果您在 label 元素內點擊文本，就會觸發此控件。就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。
<label> 標簽的 for 屬性應當與相關元素的 id 屬性相同。
四、補充input maxlength 屬性
定義和用法：
maxlength 屬性與 input type="text" 或 input type="password" 配合使用。
注意：字節不等同於字符，字節不等同於字符，字節不等同於字符。
maxlength 屬性規定輸入字段的最大長度，以字符個數計。英文一個字母一個字符，漢字雖然占兩個字節，但是只占一個字符。