html5中type,HTML5 新增表单,你可能不知道的type新属性

本文介绍了HTML5新增的input类型,如email、url、number、range以及日期时间选择器,展示了它们在表单验证中的应用,同时涵盖了表单属性如autocomplete、autofocus等的使用。
摘要由CSDN通过智能技术生成

HTML 新增输入类型

email 类型用于应该包含 e-mail 地址的输入域,在提交表单时,会自动验证 email 域的值。

e481276f98ea40e0272b6b492b922ae4.png

url 类型用于应该包含 URL 地址的输入域,在提交表单时,会自动验证 url 域的值。

3caa42aad243b8652a9918f78885118e.png

number 类型用于应该包含数值的输入域,min,max为可输入最小值和最大值

bb9c478cb183b3efb6995872ef4a2afe.png

6abc3888fb5d71926e5c00c8922a7671.png

range 类型用于应该包含一定范围内数字值的输入域,显示为滑动条。min,max为可拉动最小值和最大值

ff48d834c9f099b69718286dcb852ac5.png

6abc3888fb5d71926e5c00c8922a7671.png

HTML5 拥有多个可供选取日期和时间的新输入类型:

date - 选取日、月、年month - 选取月、年week - 选取周和年time - 选取时间(小时和分钟)datetime - 选取时间、日、月、年(UTC 时间)datetime-local - 选取时间、日、月、年(本地时间)

757c34dbdb7aa2fb935437f3d2d0099c.png

浏览器支持

0683612a649a20b817a0ee584f0c8e4c.png

HTML5 表单属性

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能

fdb7e493cf165a52c9091c146f154270.png

autofocus 属性规定在页面加载时,域自动地获得焦点

800a4603bae2d84020ab3c66645813d4.png

form 属性规定输入域所属的一个或多个表单,属性必须引用所属表单的 id

d55e48552e2f4b1ab93aae164941aba7.png

表单重写属性(form override attributes)允许您重写 form 元素的某些属性设定。

formaction - 重写表单的 action 属性formenctype - 重写表单的 enctype 属性formmethod - 重写表单的 method 属性formnovalidate - 重写表单的 novalidate 属性formtarget - 重写表单的 target 属性

bb51b6205a0353a131967a1672c9ac1e.png

height 和 width 属性规定用于 image 类型的 input 标签的图像高度和宽度(只适用于type属性为 image 类型的 标签)

07dac507fad66d107408a6d7a70b24ee.png

min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定(约束)。max 属性规定输入域所允许的最大值。min 属性规定输入域所允许的最小值。step 属性为输入域规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)。只适用于type属性为:date pickers、number 以及 range。

d7cfd408edb132873abd60c62f9f2fd7.png

multiple 属性规定输入域中可选择多个值,只适用于type属性为:email 和 file

dae8b205e6bb6881111ecc6739ce47a4.png

novalidate 属性规定在提交表单时不应该验证 form 或 input 域

ad4335cf1725fa4c57283ab027807055.png

浏览器支持

0c84068c60ecce316ddaf29843961364.png

举报/反馈

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值