携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第31天,点击查看活动详情 本章节为大家介绍一下 表单里input新增的类型
input新增type类型
color 作用:用于选取颜色
date 作用:用于用户选取日期
datetime 目前浏览器不支持 作用:允许用户选择一个日期和时间(utc:世界统一时间)
datetime-local 作用:允许用户选择一个日期和时间(本地时间)
month 作用:允许用户选择一个年份和月份
time 作用:允许用户选择一个时间
week 作用:允许用户选择年和第几周
email 作用:用于输入email地址,并且表单会自动验证e-mail是否合法(自动验证)
tel 作用:定义电话号码的输入框,与一般文本框一样,没有自动验证(因为各地电话号码格式不一样)
number 作用:控制用户输入数字的区间,可以设置最大和最小值,属性min和max(自动验证)
range 作用:显示一个滑块,包含一定范围内的数字,进行选择,一般用于不需要很精确的选择 属性:min、max、value、step(数字间隔) 要和js一起用,单独用不显示数字
search 作用:搜索域,定义一个搜索字段,显示效果与text一样。 特点:要有协议和域名才能提交传值。自动验证
url 作用:文本框里输入地址 (自动验证)
form标记新增的属性 autoplete="on开/off关" 作用:设置是否让浏览器自动记录之前输入过的值,可用在form里和input里。
novalidate 作用:表单提交时不在自动验证
input新增的属性
1、autofocus 自动获取焦点
2、placeholder 文本框内的提示信息
3、required 用来验证,表单项是否为空,有空的不允许提交,并提示 控制必填项
4、pattern 使用方法pattern=“正则表达式”,如果不符合,会自动验证,并且不会提交
5、form 使用form=id的方式将表单项指向相同的id的form表单
6、mulitple 允许用户输入选择多个值,使用的类型为type="file/email",允许用户选择多个文件和输入多个邮箱