表单里input新增的type类型

142 阅读2分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 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",允许用户选择多个文件和输入多个邮箱