百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>html5教程> HTML5中的input类型包括哪些属性
分享文章到:

HTML5中的input类型包括哪些属性

发布时间:09/01 来源:未知 浏览: 关键词:
HTML5中的input类型包括email、url、number、range、search等属性,每一种属性都具有不一样的功效

今天将介绍HTML5中新的输入类型input,这些新功效将大大的帮忙我们实现更多的功效乃至供给更好的会员体验,接下来在文章中将为大家具体介绍input类型的用途。

【引荐课程:HTML5教程

HTML5中input属性

input类型的属性

(1)email属性:适用于包括 e-mail 地址的输入域,在提交表单时,会主动验证 email 域的值。

当我们输入错误值的时候他会主动提醒要输入准确的格局,并告诉你缺少了什么

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

结果图

未标题-3.jpg

(2)url属性:适用于包括 URL 地址的输入域。在提交表单时,会主动验证 url 域的值。

当输入错误时显示请输入网址

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

结果图

未标题-3.jpg

(3)number属性:适用于包括数值的输入域。还能够设定对所接受的数字的限制

max:指同意的数字的最大值

min:指同意的数字的最小值

step:指合法的数字间隔,例:step=3代表数字间隔为3

value:默许值

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

结果图

GIF.gif

(4)range属性:适用于包括必然范畴内数字值的输入域,它的显示为滑动条

max:同意的最大值

min:同意的最小值

step:同意的合法的数字间隔

value:默许值

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

未标题-3.jpg


(5)search属性:适用于搜索域,比方站点搜索或 Google 搜索。

search 域显示为常规的文本域

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

结果图

未标题-3.jpg

总结:以上就是本篇文章的全部内容了,但愿通过这篇文章能让大家关于HTML5中的input类型有必然的理解并且可以利用到实际案例中去。

以上就是HTML5中的input类型包括哪些属性的具体内容,更多请关注百分百源码网其它相关文章!

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有151人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板