HTML5新特性，新的 Input 型別
阿新 • • 發佈：2021-07-01
HTML5 擁有多個新的表單輸入型別。這些新特性提供了更好的輸入控制和驗證。
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
一、示範程式碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <!-- color 型別用在input欄位主要用於選取顏色，如下所示： //--> 選擇你喜歡的顏色: <inputtype="color" name="favcolor"> <br/> <!-- date 型別允許你從一個日期選擇器選擇一個日期。 //--> 生日: <input type="date" name="bday"> <br/> <!-- datetime 型別允許你選擇一個日期（UTC 時間）。 //--> 生日 (日期和時間): <input type="datetime" name="bdaytime"> <br/> <!-- datetime-local 型別允許你選擇一個日期和時間 (無時區). //-->生日 (日期和時間): <input type="datetime-local" name="bdaytime"> <br/> <!-- email 型別用於應該包含 e-mail 地址的輸入域。 //--> E-mail: <input type="email" name="email"> <br/> <!-- month 型別允許你選擇一個月份。 //--> 生日 (月和年): <input type="month" name="bdaymonth"> <br/> <!-- number 型別用於應該包含數值的輸入域。 //--> 數量 ( 1 到 5 之間 ): <input type="number" name="quantity" min="1" max="5"> <br/> <!-- 定義一個不需要非常精確的數值（類似於滑塊控制）: //--> <input type="range" name="points" min="1" max="10"> <br/> <!-- search 型別用於搜尋域，比如站點搜尋或 Google 搜尋。 //--> Search Google: <input type="search" name="googlesearch"> <br/> <!-- 定義輸入電話號碼欄位: //--> 電話號碼: <input type="tel" name="usrtel"> <br/> <!-- time 型別允許你選擇一個時間。 //--> 選擇時間: <input type="time" name="usr_time"> <br/> <!-- url 型別用於應該包含 URL 地址的輸入域。 //--> 新增您的主頁: <input type="url" name="homepage"> <br/> <!-- week 型別允許你選擇周和年。 //--> 選擇周: <input type="week" name="week_year"> </body> </html>
二、輸出介面
三、inputs標籤的更多用法，參考：