輸入類型
本章描述輸入類型的<input>元素。
輸入類型：文本
<input type="text">定義了文本輸入的一行輸入字段：
例
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form> 試一試» 這是怎樣的HTML代碼中會在瀏覽器中顯示：
名字：
姓：
輸入類型：密碼
<input type="password">定義了一個密碼字段 ：
例
<form>
User name:<br>
<input type="text" name="username"><br>
User password:<br>
<input type="password" name="psw">
</form> 試一試» 這是怎樣的HTML代碼中會在瀏覽器中顯示：
用戶名：
用戶密碼：
在密碼字段中的字符被掩碼(shown as asterisks or circles) 。
輸入類型：提交
<input type="submit">定義了提交表單輸入到表單處理程序的按鈕。
的形式處理程序通常是具有用於處理輸入數據的腳本服務器頁面。
表單處理程序是表單的action屬性指定：
例
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form> 試一試» 這是怎樣的HTML代碼中會在瀏覽器中顯示：
名字：
姓：
如果省略提交按鈕的值屬性，按鈕將獲得一個默認的文字：
例
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit">
</form> 試一試» 輸入類型： radio
<input type="radio">定義了一個radio按鈕 。
Radio按鈕，讓用戶選擇的選擇數量有限的只有一個：
例
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form> 試一試» 這是怎樣的HTML代碼中會在瀏覽器中顯示：
男
女
其他
輸入類型： checkbox
<input type="checkbox">定義了一個checkbox 。
Checkboxes讓用戶選擇的選擇數量有限的零個或多個選項。
例
<form>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
</form> 試一試» 這是怎樣的HTML代碼中會在瀏覽器中顯示：
我有一輛自行車
我有一輛車
輸入類型： button
<input type="button">定義了一個button ：
這是怎樣的HTML代碼中會在瀏覽器中顯示：
HTML5 Input類型
HTML5增加了幾個新input類型：
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
Input類型，而不是舊的Web瀏覽器的支持，將表現為input型文本。
Input類型： number
所述<input type="number">被用於應該包含一個數值輸入字段。
您可以設置號碼的限制。
根據瀏覽器的支持，這些限制可以適用於輸入字段。
例
<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form> 試一試» Input限制
下面是一些常見的列表input限制(some are new in HTML5) ：
| 屬性 | 描述 |
|---|---|
| disabled | 指定的輸入字段應該被禁用 |
| max | 規定輸入字段的最大值 |
| >maxlength | 指定字符的最大數目為輸入域 |
| min | 規定輸入場的最小值 |
| pattern | 正則表達式來檢查對輸入值 |
| readonly | 指定一個輸入域是只讀(cannot be changed) |
| required | 指定一個輸入字段是必需的(must be filled out) |
| size | 指定寬度(in characters)的輸入字段的 |
| step | 指定合法的數字間隔輸入字段 |
| value | 規定輸入字段的默認值 |
您將了解更多關於input在下一章限制。
例
<form>
Quantity:
<input type="number" name="points" min="0" max="100" step="10" value="30">
</form> 試一試» Input類型： date
所述<input type="date">被用於應該包含日期輸入字段。
根據瀏覽器的支持，日期選擇器可以在輸入字段中顯示的。
您可以添加限制的input ：
例
<form>
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br>
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>
</form> 試一試» Input類型：顏色
所述<input type="color">被用於應該包含一個顏色輸入字段。
根據瀏覽器的支持，顏色選擇器可以在輸入字段中顯示的。
Input類型：範圍
所述<input type="range">被用於應該包含的範圍內的值的輸入字段。
根據瀏覽器的支持，輸入字段，可以顯示為滑塊控件。
您可以使用following屬性來指定限制：最小，最大，步驟，值。
Input類型： month
所述<input type="month">允許用戶選擇一個月份和年份。
根據瀏覽器的支持，日期選擇器可以在輸入字段中顯示的。
Input類型： week
所述<input type="week">允許用戶選擇一個星期和一年。
根據瀏覽器的支持，日期選擇器可以在輸入字段中顯示的。
Input類型： time
所述<input type="time">允許用戶選擇時間(no time zone) 。
根據瀏覽器的支持，一時間選擇器可以在輸入字段中顯示的。
Input類型： datetime
所述<input type="datetime">允許用戶選擇一個日期和時間(with time zone) 。
 | 輸入類型的日期時間從HTML標準除去。 使用日期時間本地代替。 |
|---|
輸入類型：日期時間本地
所述<input type="datetime-local">允許用戶選擇一個日期和時間(no time zone) 。
根據瀏覽器的支持，日期選擇器可以在輸入字段中顯示的。
輸入類型：電子郵件
所述<input type="email">被用於應該包含電子郵件地址輸入字段。
根據瀏覽器支持，電子郵件地址，可以自動提交時驗證。
一些智能手機識別出郵件類型，並增加了".com"的鍵盤相匹配的電子郵件的輸入。
輸入類型：搜索
所述<input type="search">用於搜索字段(a search field behaves like a regular text field) 。
輸入類型：電話
所述<input type="tel">被用於應該包含一個電話號碼輸入字段。
該電話類型目前只在Safari 8支持。
輸入類型：網址
所述<input type="url">被用於應該包含一個URL地址的輸入域。
根據瀏覽器支持，URL字段可以自動提交時驗證。
一些智能手機識別URL類型，並增加了".com"的鍵盤相匹配的網址輸入。