HTML5新的Input类型

本文介绍了HTML5中各种表单输入类型的使用方法及属性设置,包括email、url、number、range、datepickers、search等,展示了如何通过这些输入类型提高用户体验并确保数据的有效性。
摘要由CSDN通过智能技术生成

Input类型 - email

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

E-Mail: <input type=”email” name=”user_email” />

 

Input类型 - url

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

Homepage: <input type=”url” name=”user_url” />

 

Input类型 - number

number类型用于应该包含数值的输入域。您还能够设定对所接受的数字的限定:

Points: <input type=”number” name=”points” min=”1″ max=”10″ />

属性

描述

max

规定允许的最大值

min

规定允许的最小值

step

规定合法的数字间隔(如果step=”3″,则合法的数是-3,0,3,6 等)

value

规定默认值

 

Input类型 - range

range类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。

<input type=”range” name=”points” min=”1″ max=”10″ />

属性

描述

max

规定允许的最大值

min

规定允许的最小值

step

规定合法的数字间隔(如果step=”3″,则合法的数是-3,0,3,6 等)

value

规定默认值

 

Input类型 - Date Pickers(数据检出器) 

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

类型

描述

date

选取日、月、年

month

选取月、年

week

选取周和年

time

选取时间(小时和分钟)

datetime

选取时间、日、月、年(UTC 时间)

datetime-local

选取时间、日、月、年(本地时间)

示例:Date: <input type=”date” name=”user_date” />

 

Input类型 - search

search类型用于搜索域,比如站点搜索或Google 搜索。search域显示为常规的文本域。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值