html5新增的表單元素類型有哪些

html5中新增的表單元素類型有：1、email類型；2、url類型；3、number類型；4、range類型；5、日期選擇器類型（date、month、week、time等）；6、search類型；7、color類型；8、tel類型。

本教學操作環境：windows7系統、HTML5版、Dell G3電腦。

HTML表單用於收集不同類型的使用者輸入，在HTML表單中 元素是最重要的表單元素。元素有很多形態，根據不同的 type 屬性，在原HTML表單中type類型有text、password、radio、submit等等，在新的HTML5中擁有多個新的表單輸入類型。 這些新特性提供了更好的輸入控制和驗證。

本文將介紹以下幾種新增的表單元素輸入類型：

• email
• url
• number
• range
• Date pickers（date，month，week，time，datetime，datetime-local）
• search
• color
• #tel

email類型

當的type屬性設定為email，在提交表單時，會自動驗證email域的值是否符合email的標準格式，再也不用自己用正規表示式去寫email的格式驗證了。

範例

Email：<input type="email" name="useremail" />

url類型

當的type屬性設定為url，在提交表單時，會自動驗證url網域的值是否符合url的標準格式。

範例

Linkpage:<input type="url" name="link_url" />

number類型

當的type屬性設定為number時，會自動檢驗輸入內容是否為數字類型，您也能夠設定該輸入方塊數字的限定。

範例

Number：<input type="number" name="user_num" min="1" max="10" />

用於數字限定的屬性：

##描述#max規定允許的最大值#min規定允許的最小值step規定合法的數字間隔（如果step=“3”，則合法的數是-3,0,3,6 等）value規定預設值disabled規定輸入欄位是停用的maxlength規定輸入欄位的最大字元長度#pattern規定用於驗證輸入欄位的模式readonly規定輸入欄位的值無法修改#required規定輸入欄位的值是必須的size規定輸入欄位的可見字元

#屬性

range類型

range 類型用於應該包含一定範圍內數字值的輸入域。 range 類型顯示為滑動條。您也能夠設定所接受的數字的限定。

範例

<input type="range" name="user_range" min="1" max="10" />

其用於數字限定的屬性同number類型前四個。

Date Pickers 日期選擇器類型

用於選取日期和時間。

範例

Date：<input type="date" name="user_date" />

用於選取日期和時間的輸入類型：

#date 選取日、月、年
month 選取月、年
week 選取週和年
time 選取時間（小時和分鐘）
datetime 選取時間、日、月、年（UTC時間，有時區）
datetime-local 選取時間、日、月、年（本地時間）

search類型

#用於搜尋字段，例如網站搜尋或Google 搜尋（搜尋字段的表現類似常規文字欄位）。

範例

Search Google:<input type="search" name="googlesearch">

color類型

當的type屬性設定為color，會自動檢驗輸入內容是否為顏色格式。

範例

Select your favorite color:<input type="color" name="favcolor">

tel類型

當的type屬性設定為tel，會自動檢驗輸入內容是否為電話號碼格式。

範例

Telephone:<input type="tel" name="usrtel">

相關推薦：《

html影片教學》

以上是html5新增的表單元素類型有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！