HTML5有哪些新的表单属性

如题所述

表单结构更灵活要提交数据的控件可以布局在form标签之外,看下面的代码,表单元素可以写到form元素之外,只需在元素中加入form="form1"属性,也可提交到form元素指定的服务器地址新增表单元素我们以前学过的表单元素包括“text”、“button”、“file”、"radio"等,html5中新增加了一些表单元素,下面列出这些元素及其作用email类型用于验证email的格式,当提交表单时会自动验证email域的值url类型用于验证URL地址的格式,当提交表单时会自动验证url域的值number类型会根据你的设置提供选择数字的功能,min属性设置最小值、max属性设置最大值,value属性设置当前值,step属性设定每次增长的值,某些浏览器还不支持range类型用于应该包含一定范围内数字值的输入域,其会以一个滑块的形式展现,min属性设置最小值、max属性设置最大值,value属性设置当前值,如果没有设置,则其默认值的范围是1-100日期和时间类型:HTML5拥有多个可供选取日期和时间的新输入类型:date-选取日、月、年month-选取月、年week-选取周和年time-选取时间(小时和分钟)datetime-选取时间、日、月、年(UTC时间)datetime-local-选取时间、日、月、年(本地时间)search类型用于搜索域,比如站点搜索或Google搜索,为其加上results="s"属性,则会在搜索框前面加上一个搜索图标tel类型用于验证输入的是否是电话格式的内容,此元素现在还没有浏览器支持color类型会提供一个颜色拾取器,供用户选择颜色,并将用户选择的颜色填充到此元素中案例如下,大家可以将代码拷贝或者自己编写之后,在浏览器中查看效果浏览器的支持情况chrome:firefox:Opera:MicrosoftEdge:好,我们对微软的进步进行表扬!新增表单属性除了新增的表单元素之外,html5中还新增了一些表单属性新的form属性:autocompletenovalidate新的input属性:autocompleteautofocusformformoverrides(formaction,formenctype,formmethod,formnovalidate,formtarget)height和widthlistmin,max和stepmultiplepattern(regexp)placeholderrequired在下面的案例中,我们对一些常用的属性做了解释,大家直接看代码和代码旁边的注释,然后对照浏览器的运行结果就理解其意义了
温馨提示:内容为网友见解,仅供参考
第1个回答  2020-06-11
新增表单元素:

用于表单的密钥对生成器字段
不同类型的输出,比如脚本的输出。
新增表单属性:

autocomplete 自动完成
novalidate不验证数据
formaction 用于描述表单提交的URL地址,会覆盖
元素中的action属性.

formenctype 表单提交到服务器的数据编码 (只对form表单中 method="post" 表单)
formmethod 表单提交方式,会覆盖 的method 属性。
formnovalidate 表单提交无需被验证,会覆盖 元素的novalidate属性.
formtarget 表单提交数据接收后,怎么的展示。
list 表示input输入域的 datalist(datalist 是输入域的选项列表)
min max step ** 用来给input 类型为数字或日期的添加限定约束的
multiple 多种多样表示 元素中可选择多个值。
pattern 正则表达式用于验证 元素的值。
placeholder 占位提供一种提示(hint),描述输入域所期待的值。
required 被要求的,必须的, 规定必须在提交之前填写输入域(不能为空)。
step 步伐、一步、步长,规定输入域合法的数字间隔
相似回答