记不住就存下来---- HTML 5 功能丰富的 input 元素



color
让 <input../>元素生成一个颜色选择器. 当用户在选择颜色选择器中选中指定颜色后,该文本框自动显示用户选中的颜色,该文本框的 value 为该颜色的值, 形如 #xxxxxx 的颜色值.
date
让<input../>元素生成一个日期选择器.
time
让<input../>元素生成一个事件选择器.
datetime
让<input../>元素生成一个 UTC 日期,时间选择器.
datatime-local
让<input../>元素生成一个本地日期,时间选择器.
week
让<input../>元素生成一个供用户选择第几周的文本框.
month
让<input../>元素生成一个月份选择器.
email
让<input../>元素生成一个 E-mail 输入框.
浏览器会自动检查该文本框的 value , 如果用户在该文本框内输入的内容不符合 E-mail 格式,
浏览器将会不允许提交表单, 并自动生成提示. 当指定 type= “email”时, <input../>元素可指定如下属性:
multiple : 该属性的值可以是 multiple  或省略属性值. 如果指定了该属性值, 则表明该文本框内允许输入多个 E-mail 地址.
tel
让<input../>元素生成一个只能输入电话号码的文本框, 但这种类型的文本框并没有提供额外的要求,
也就是用户完全可以向 type= “tel” 的文本框内输入任意文字串.浏览器不会作太多额外的检查.
url
让<input../>元素生成一个 URL 输入框.浏览器会自动检查该文本框的 value ,
如果用户在该文本框内输入的内容不符合 URL 格式, 浏览器将会不允许提交表单,并自动生成提示.
number
让<input../>元素生成一个只能输入数字的文本框.
range
让<input../>元素生成一个拖动条,通过拖动条使得用户只能输入指定范围内,指定步长的值.
当文本框的 type= “range”时, 该文本框内还可以指定如下三个属性:
(1). min  : 指定该拖动条的最小值.
(2). max : 指定该拖动条的最大值.
(3). step : 指定该拖动条的步长.
search
让<input../>元素生成一个专门用于输入搜索关键字的文本框.这种类型的文本框与 type = “text” 的文本框没有太大区别.

颜色选择器


对于所有与日期相关的文本框,浏览器都会自动生成一个日期选择器或时间选择器, 当用户单击 type= “datetime” 的文本框时,会看到如下:


对于 type= “month” , type = “week” 的 <input../>元素, 浏览器同样会生成一个日期选择框供用户选择, 只是用户选择是加你工会显示一个月份或第几周.


对于 type = “email” 的文本框, 如果用户输入的字符串不符合 E-mail 规则, 当用户单击提交该表单时, 浏览器将会阻止提交该表单,并自动生成提示信息.


对于 type = “range” 的文本框, 浏览器会自动生成一个拖动条, 允许用户通过拖动该拖动条来输入数值.










评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值