HTML5 引入什么新的表单属性

🌙
手机阅读
本文目录结构

<form>新属性

autocomplete

属性规定表单是否应该启用自动完成功能。

autocomplete 属性适用于 <form>,以及下面的 <input> 类型:

text, search, url, telephone, email, password, date,pickers, range 以及 color。

语法是<form autocomplete="on|off">

novalidate

如果使用该属性,则提交表单时不进行内容的验证。

novalidate 属性适用于:<form>,以及以下类型的 <input> 标签:

text, search, url, telephone, email, password, date pickers, range 以及 color。

语法:novalidate="novalidate"

<input>新属性

autocomplete

同上;

演示

autofocus

规定输入字段在页面加载时是否获得焦点,加载完成后,光标马上定位在该 input;

(不适用于 type=“hidden”)语法:autofocus=“autofocus”;

或者写一个 autofocus 也可以的;

form

form 属性的值必须是其所属表单的 id。

如需引用一个以上的表单,请使用空格分隔的列表。

formaction

属性覆盖 form 元素的 action 属性,比如两个提交按钮的时候,一个是正常提交,一个是管理员提交。该属性适用于 type=“submit” 以及 type=“image”。

语法是 formaction="#"

formenctype

formenctype 属性覆盖 form 元素的 enctype 属性。

该属性与 type=“submit” 和 type=“image” 配合使用。

属性规定在发送到服务器之前应该如何对表单数据进行编码。

formmethod

覆盖表单的 method 属性。

适用于 type=“submit” 和 type=“image”

formnovalidate

formnovalidate 属性覆盖 form 元素的 novalidate 属性。

如果使用该属性,则提交表单时按钮不会执行验证过程。

formtarget

覆盖表单的 target 属性。

适用于 type=“submit” 和 type=“image”, 该属性规定在何处打开 action URL。

height 和 width

height 和 width 属性规定用于 image 类型的 <input> 标签的图像高度和宽度。

list

引用包含输入字段的预定义选项的 datalist 。

<form action="#">
    选择网址
    <input type="url" list="url_list_broszhu" name="link" />
    <datalist id="url_list_broszhu">
        <option label="百度" value="http://www.baidu.com"></option>
        <option label="谷歌" value="http://www.google.com"></option>
        <option label="微软" value="http://www.microsoft.com"></option>
        <option label="阿西河前端教程" value="https://www.axihe.com/"></option>
    </datalist>
    <input type="submit"/>
</form>
选择网址

min 和 max

min 属性与 max 属性配合使用,可创建合法值范围,两个要一对用。

语法是 选择 0-10 数字:<input type="number" name="points" min="0" max="10" />

multiple

如果使用该属性,则允许一个以上的值,比如上传文件的时候,设置这个属性后可以一次选择几个图片;

multiple 属性适用于以下类型的 <input> 标签:email 和 file。

pattern (regexp)

描述了一个正则表达式用于验证 <input> 元素的值;注释:pattern 属性适用于以下 <input> 类型:text, search, url, telephone, email 以及 password 。

提示:请使用标准的 “title” 属性来描述模式。

placeholder

提供可描述输入字段预期值的提示信息(hint)。

该提示会在输入字段为空时显示,并会在字段获得焦点时消失。

required

规定必需在提交之前填写输入字段。 如果使用该属性,则字段是必填(或必选)的。

step

为输入域规定合法的数字间隔。 如果 step=“3”,则合法的数是 -3,0,3,6 等

提示: step 属性可以与 max 和 min 属性创建一个区域值。

更多参考

上面知识点的详细介绍,可以在 HTML5 表单属性 查看,

还有一个 HTML5 新的 Input 类型也建议了解一下

更多面试题

如果你想了解更多的前端面试题,可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

面试题
HTML CSS JavaScript
jQuery Vue.js React
算法 HTTP Babel
BootStrap Electron Gulp
Node.js 前端经验相关 前端综合
Webpack 微信小程序 -

这些题库还在更新中,如果你有不错的面试题库欢迎分享给我,我整理后放上来;人人为我,我为人人,互帮互助,共同提高,祝大家都拿到心仪的Offer!

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了