HTML5 新的 Input 類型
HTML5 擁有多個新的表單輸入類型。這些新特性提供了更好的輸入控制和驗證。
本章全面介紹這些新的輸入類型：
color
date
-
datetime
datetime-local
#email
month
- number
- range
#search
tel
注意:
並不是所有的主流瀏覽器都支援新的input類型，不過您已經可以在所有主流的瀏覽器中使用它們了。即使不被支持，仍然可以顯示為常規的文字域。Input 類型: colorcolor 類型用在input欄位主要用於選取顏色，如下所示：
實例
運行實例»實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="demo-form.php"> 选择你喜欢的颜色: <input type="color" name="favcolor"><br> <input type="submit"> </form> </body> </html>
點擊"運行實例"按鈕查看線上實例
Input 類型: datedate 類型允許你從一個日期選擇器選擇一個日期。
實例
運行實例»實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="demo-form.php"> 生日: <input type="date" name="bday"> <input type="submit"> </form> </body> </html>
點擊"運行實例" 按鈕查看線上實例
Input 類型: datetimedatetime 類型允許你選擇一個日期（UTC 時間）。
實例
運行實例»實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="demo-form.php"> 生日: <input type="date" name="bday"> <input type="submit"> </form> </body> </html>
點擊"運行實例" 按鈕查看線上實例
Input 類型: datetime-local
datetime-local 類型允許你選擇一個日期和時間(無時區).
##實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="demo-form.php"> 生日 (日期和时间): <input type="datetime-local" name="bdaytime"> <input type="submit"> </form> </body> </html>
#點擊"運行實例" 按鈕查看線上實例
Input 類型: email
email 類型用於應該包含e-mail 位址的輸入域。
實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="demo-form.php"> E-mail: <input type="email" name="usremail"> <input type="submit"> </form> <p><b>注意:</b> Internet Explorer 9 及更早IE版本不支持type="email" 。</p> </body> </html>
運行實例»
點擊"運行實例" 按鈕查看線上實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="demo-form.php"> 生日 ( 月和年 ): <input type="month" name="bdaymonth"> <input type="submit"> </form> </body> </html>#########執行實例 »######點擊 "執行實例" 按鈕查看線上實例######
Input 類型: number
number 類型用於應該包含數值的輸入域。
您也能夠設定對所接受的數字的限定：
實例
#
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="demo-form.php"> 数量 ( 1 到 5 之间): <input type="number" name="quantity" min="1" max="5"> <input type="submit"> </form> <p><b>注意:</b>Internet Explorer 9 及更早IE版本不支持 type="number" 。</p> </body> </html>
##執行實例»點擊"運行實例" 按鈕查看線上實例##使用下面的屬性來規定對數字類型的限定：
- max- 規定允許的最大值
- min - 規定允許的最小值
- #step - 規定合法的數字間隔（如果step="3"，則合法的數是-3,0,3,6 等）
- value - 規定預設值
- 嘗試帶有所有限定屬性的範例嘗試一下
range 類型用於應該包含一定範圍內數字值的輸入域。
range 類型顯示為滑動條。
實例<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<form action="demo-form.php" method="get">
Points: <input type="range" name="points" min="1" max="10">
<input type="submit">
</form>
<p><b>注意:</b> Internet Explorer 9 及更早IE版本不支持 type="range"。</p>
</body>
</html>
運行實例»點擊"運行實例" 按鈕查看線上實例
請使用下面的屬性來規定數字類型的限定：
- max - 規定允許的最大值
- min - 規定允許的最小值
- step - 規定合法的數字間隔
- value - 規定預設值
search 類型用於搜尋網域，例如網站搜尋或Google 搜尋。
實例<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<form action="demo-form.php" method="get">
Points: <input type="range" name="points" min="1" max="10">
<input type="submit">
</form>
<p><b>注意:</b> Internet Explorer 9 及更早IE版本不支持 type="range"。</p>
</body>
</html>
運行實例»點擊"運行實例" 按鈕查看線上實例
Input 類型: tel
實例
#<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<form action="demo-form.php">
电话号码: <input type="tel" name="usrtel"><br>
<input type="submit">
</form>
</body>
</html>
運行實例»##點擊"執行實例" 按鈕查看線上實例
time 類型允許你選擇一個時間。
實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="demo-form.php"> 选择时间: <input type="time" name="usr_time"> <input type="submit"> </form> </body> </html>
運行實例»
點擊"運行實例" 按鈕查看線上實例
url 類型用於應該包含URL 位址的輸入域。 在提交表單時，會自動驗證 url 網域的值。
實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="demo-form.php"> 添加你的主页: <input type="url" name="homepage"><br> <input type="submit"> </form> <p><b>注意:</b> Internet Explorer 9及更早IE版本不支持 type="url" 。</p> </body> </html>
執行實例 »
點擊 "執行實例" 按鈕查看線上實例
提示: iPhone 中的 Safari 瀏覽器支援 url 輸入類型，並透過改變觸控螢幕鍵盤來配合它（新增 .com 選項）。
Input 類型: week
week 類型允許你選擇週和年。
實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="demo-form.php"> 选择周: <input type="week" name="year_week"> <input type="submit"> </form> </body> </html>
運行實例»
點擊"運行實例" 按鈕查看線上實例
HTML5 <input> 標籤
| #描述 | |
|---|---|
