HTML5中的input類型的屬性有哪些

今天就跟大家聊聊有關(guān)HTML5中的input類型的屬性有哪些，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

 HTML5中的input類型包含email、url、number、range、search等屬性，每一種屬性都具有不同的功能

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

input類型的屬性

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

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

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

效果圖

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

當(dāng)輸入錯誤時顯示請輸入網(wǎng)址

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

效果圖

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

max：指允許的數(shù)字的最大值

min：指允許的數(shù)字的最小值

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

value：默認(rèn)值

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

效果圖

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

max：允許的最大值

min：允許的最小值

step：允許的合法的數(shù)字間隔

value：默認(rèn)值

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

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

search 域顯示為常規(guī)的文本域

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

效果圖

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

看完上述內(nèi)容，你們對HTML5中的input類型的屬性有哪些有進(jìn)一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。