HTML5表單_輸入型別
阿新 • • 發佈：2019-01-25
HTML5新的input型別
HTML5 擁有多個新的表單輸入型別。這些新特性提供了更好的輸入控制和驗證。
- url
- number
- range
- Date pickers (date, month, week, time, datetime, datetime-local)
- search
- color
瀏覽器支援：
| Input type | IE | Firefox | Opera | Chrome | Safari |
|---|---|---|---|---|---|
| No | 4.0 | 9.0 | 10.0 | No | |
| url | No | 4.0 | 9.0 | 10.0 | No |
| number | No | No | 9.0 | 7.0 | No |
| range | No | No | 9.0 | 4.0 | 4.0 |
| Date pickers | No | No | 9.0 | 10.0 | No |
| search | No | 4.0 | 11.0 | 10.0 | No |
| color | No | No | 11.0 | No | No |
email型別
email 型別用於應該包含 e-mail 地址的輸入域。
在提交表單時，會自動驗證 email 域的值。
<!DOCTYPE HTML>
<html>
<body>
<form url型別
url 型別用於應該包含 URL 地址的輸入域。
在提交表單時，會自動驗證 url 域的值。
<!DOCTYPE HTML> number型別
number 型別用於應該包含數值的輸入域。
您還能夠設定對所接受的數字的限定：
<!DOCTYPE HTML>
<html>
<body>
<form action="/example/html5/demo_form.asp" method="get">
Points: <input type="number" name="points" min="1" max="10" step="3" value="6" />
<input type="submit" />
</form>
</body>
</html>range型別
range 型別用於應該包含一定範圍內數字值的輸入域。
range 型別顯示為滑動條。
<!DOCTYPE HTML>
<html>
<body>
<form action="/example/html5/demo_form.asp" method="get">
Points: <input type="range" name="points" min="1" max="10" />
<input type="submit" />
</form>
</body>
</html>date型別
HTML5 擁有多個可供選取日期和時間的新輸入型別：
- date - 選取日、月、年
- month - 選取月、年
- week - 選取周和年
- time - 選取時間（小時和分鐘）
- datetime - 選取時間、日、月、年（UTC 時間）
- datetime-local - 選取時間、日、月、年（本地時間）
<!DOCTYPE HTML>
<html>
<body>
<form action="/example/html5/demo_form.asp" method="get">
Date: <input type="date" name="user_date" />
<input type="submit" />
</form>
</body>
</html>search型別
search 型別用於搜尋域，比如站點搜尋或 Google 搜尋。
search 域顯示為常規的文字域。