今天將介紹HTML5中新的輸入類型input，這些新功能將大大的幫助我們實現更多的功能以及提供更好的用戶體驗，接下來在文章中將為大家詳細介紹input類型的用法。

【推薦課程：HTML5教程】

input類型的屬性

（1）email屬性：適用于包含 e-mail 地址的輸入域，在提交表單時，會自動驗證 email 域的值。

當我們輸入錯誤值的時候他會自動提示要輸入正確的格式，并告訴你缺少了什么

 form action= # method= get E-mail: input type= email name= email  input type= submit  /form 

效果圖

（2）url屬性：適用于包含 URL 地址的輸入域。在提交表單時，會自動驗證 url 域的值。

當輸入錯誤時顯示請輸入網址

 form action= # method= get URL: input type= url name= url  input type= submit  /form 

效果圖

（3）number屬性：適用于包含數值的輸入域。還能夠設定對所接受的數字的限定

max：指允許的數字的最大值

min：指允許的數字的最小值

step：指合法的數字間隔，例：step=3代表數字間隔為3

html' target='_blank'>value：默認值

 form action= # method= get  Points: input type= number name= points min= 1 max= 10 /  input type= submit  /form 

效果圖

（4）range屬性：適用于包含一定范圍內數字值的輸入域，它的顯示為滑動條

max：允許的最大值

min：允許的最小值

step：允許的合法的數字間隔

value：默認值

 form action= # method= get Range: input type= range name= points min= 1 max= 10 /  input type= submit  /form 

（5）search屬性：適用于搜索域，比如站點搜索或 Google 搜索。

search 域顯示為常規的文本域

 form action= # method= get Search: input type= search name= points min= 1 max= 10 /  input type= submit  /form 

效果圖

總結：以上就是本篇文章的全部內容了，希望通過這篇文章能讓大家對于HTML5中的input類型有一定的了解并且可以應用到實際案例中去。

以上就是HTML5中的input類型包含哪些屬性的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。