088_html5表单属性

1. html5的新的表单属性

1.1. 新的form属性:

autocomplete
novalidate

1.2. 新的input属性:

autocomplete
autofocus
form
Form overrides(formaction,formenctype,formmethod,formnovalidate,formtarget)
height和width
list
min, max和step
multiple
pattern(regexp)
placeholder
required

2. 浏览器支持

3. autocomplete属性

3.1. autocomplete属性规定form或input域应该拥有自动完成功能。

3.2. autocomplete适用于<form>标签, 以及以下类型的<input>标签: text, search, url, telephone, email, password, datepickers, range以及color。

3.3. 当用户在自动完成域中开始输入时, 浏览器应该在该域中显示填写的选项。

3.4. 在某些浏览器中, 您可能需要启用自动完成功能, 以使该属性生效。

3.5. 例子

3.5.1. 代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>autocomplete属性</title></head><body><form action="autocomplete.html" method="get" autocomplete="on">First name: <input type="text" name="fname" /><br />Last name: <input type="text" name="lname" /><br />E-mail: <input type="email" name="email" autocomplete="off" /><br /><input type="submit" /></form><p>请填写并提交此表单, 然后重载页面, 来查看自动完成功能是如何工作的。</p><p>请注意, 表单的自动完成功能是打开的, 而e-mail域是关闭的。</p></body>
</html>

3.5.2. 效果图

4. autofocus属性

4.1. autofocus属性规定在页面加载时, 域自动地获得焦点。

4.2. autofocus属性适用于所有<input>标签的类型。

4.3. 例子

4.3.1. 代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>autocomplete属性</title></head><body><form action="autocomplete.html" method="get" autocomplete="on">First name: <input type="text" name="fname" /><br />Last name: <input type="text" name="lname" /><br />E-mail: <input type="email" name="email" autocomplete="off" /><br /><input type="submit" /></form><p>请填写并提交此表单, 然后重载页面, 来查看自动完成功能是如何工作的。</p><p>请注意, 表单的自动完成功能是打开的, 而e-mail域是关闭的。</p></body>
</html>

4.3.2. 效果图

5. form属性

5.1. form属性规定输入域所属的一个或多个表单。

5.2. form属性适用于所有<input>标签的类型。

5.3. form属性必须引用所属表单的id。

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

5.5. 例子

5.5.1. 代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>form属性</title></head><body><form action="form.html" method="get" id="user_form">First name: <input type="text" name="fname" /><input type="submit" /></form><p>下面的输入域在form元素之外, 但仍然是表单的一部分。</p>Last name: <input type="text" name="lname" form="user_form" /></body>
</html>

5.5.2. 效果图

6. height和width属性

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

6.2. height和width属性只适用于image类型的<input>标签。

6.3. 例子

6.3.1. 代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>height和width属性</title></head><body><form action="image.html" method="get">User name: <input type="text" name="user_name" /><br /><input type="image" src="eg_submit.jpg" width="99px" height="99px" /></form></body>
</html>

6.3.2. 效果图

7. list属性

7.1. list属性规定输入域的datalist。datalist是输入域的选项列表。

7.2. list属性适用于以下类型的<input>标签: text, search, url, telephone, email, date pickers, number, range以及color。

8. multiple属性

8.1. multiple属性规定输入域中可选择多个值。

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

8.3. 例子

8.3.1. 代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>multiple属性</title></head><body><form action="multiple.html" method="get">Select images: <input type="file" name="img" multiple="multiple" /><input type="submit" /></form><p>当您浏览文件时, 请试着选择多个文件。</p></body>
</html>

8.3.2. 效果图

9. novalidate属性

9.1. novalidate属性规定在提交表单时不应该验证form或input域。

9.2. novalidate属性适用于<form>以及以下类型的<input>标签: text, search, url, telephone, email, password, date pickers, range以及color。

9.3. 例子

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>novalidate属性</title></head><body><!-- form表单中所有要验证的元素, 都不进行验证了。本例中不再验证邮箱和url域输入的有效性。 --><form action="novalidate.html" method="get" novalidate="novalidate">E-mail: <input type="email" name="user_email" /> <br />Homepage: <input type="url" name="user_url" /> <br /><input type="submit" /></form></body>
</html>

10. placeholder属性

10.1. placeholder属性提供一种提示(hint), 描述输入域所期待的值。

10.2. placeholder属性适用于以下类型的<input>标签: text, search, url, telephone, email以及password。

10.3. 提示(hint)会在输入域为空时显示出现, 会在输入域获得焦点时消失。

10.4. 例子

10.4.1. 代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>placeholder属性</title></head><body><form action="placeholder.html" method="get"><input type="search" name="user_search" placeholder="Search W3School" /><input type="submit" /></form></body>
</html>

10.4.2. 效果图

11. required属性

11.1. required属性规定必须在提交之前填写输入域(不能为空)。

11.2. required属性适用于以下类型的<input>标签: text, search, url, telephone, email, password, date pickers, number, checkbox, radio以及file。

11.3. 例子

11.3.1. 代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>required属性</title></head><body><form action="required.html" method="get">Name: <input type="text" name="usr_name" required="required" /><input type="submit" /></form></body>
</html>

11.3.2. 效果图

12. pattern属性

12.1. pattern属性规定用于验证input域的模式(pattern)。

12.2. 模式(pattern)是正则表达式。

12.3. pattern属性适用于以下类型的<input>标签: text, search, url, telephone, email以及password。

12.4. 例子

12.4.1. 代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>pattern属性</title></head><body><form action="pattern.html" method="get">Country code: <input type="text" name="country_code" pattern="[A-z]{3}" title="Three letter country code" /><input type="submit" /></form></body>
</html>

12.4.2. 效果图

13. min、max和step属性

13.1. min、max和step属性用于为包含数字或日期的input类型规定限定(约束)。

13.2. max属性规定输入域所允许的最大值。

13.3. min属性规定输入域所允许的最小值。

13.4. step属性为输入域规定合法的数字间隔(如果: step="3", 则合法的数是: -3,0,3,6等）。

13.5. min、max和step属性适用于以下类型的<input>标签: date pickers、number以及range。

13.6. 例子

13.6.1. 代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>min、max和step属性</title></head><body><form action="min_max_step.html" method="get">Points: <input type="number" name="points" min="0" max="10" step="3"/><input type="submit" /></form></body>
</html>

13.6.2. 效果图

14. 表单重写属性

14.1. 表单重写属性(form override attributes)允许您重写form元素的某些属性设定。

14.2. 表单重写属性有:

formaction - 重写表单的 action 属性
formenctype - 重写表单的 enctype 属性
formmethod - 重写表单的 method 属性
formnovalidate - 重写表单的 novalidate 属性
formtarget - 重写表单的 target 属性

14.3. 表单重写属性适用于以下类型的<input>标签: submit和image。

14.4. 这些属性对于创建不同的提交按钮很有帮助。

14.5. 例子

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>表单重写属性</title></head><body><form action="form_override_attributes.html" method="get" id="user_form" target="_blank">E-mail: <input type="email" name="userid" /><br /><input type="submit" value="Submit" formtarget="_self" /><br /><input type="submit" formaction="form_override_attributes.action" value="Submit as admin" /><br /><input type="submit" formnovalidate="true" value="Submit without validation" /><br /></form></body>
</html>

088_html5表单属性相关推荐

htmlparser设置表单属性值
想用htmlparser实现自动填写表单并提交,但暂时实现不了提交,计划通过httpclient实现.htmlparser可实现设置表单属性值,但貌似意义不大,其主要价值在解析html网页.设置表单属 ...
web前端入门学习 css（8）（新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡
https://www.bilibili.com/video/BV1pE411q7FU?p=276 文章目录 html5新特性 html5新增语义化标签 header头部 nav导航 article内 ...
js入门·表单详解一（修改表单属性，修改表单元素值）
实在javascript入门·Document对象入门讲解(访问表单,创建新页,获取页标题) 一文中,我们已经把表单的一些基本访问等弄清楚了,下面我们深入的学下表单的属性以及对表单元素的简单操作! 演 ...
html表单居中_如何在IE低版本中兼容HTML5表单属性placeholder属性
WEB开发数据提交是必不可少的,为了更友好的用户体验,通常需要给输入框一个默认的提示信息.HTML5技术提供了一个表单属性placeholder专门用于输入框默认提示,但是在IE低版本中根本不兼容. ...
[html] HTML5中新添加的表单属性有哪些？
[html] HTML5中新添加的表单属性有哪些? 用的最多的就是一个 placeholder 属性了,其他的基本都不知道,借机学习下 HTML5 表单属性,学完之后感觉我们很多自定义表单可以不用做了 ...
php form表单属性,HTML5 表单属性
HTML5 表单属性 HTML5 中新的表单属性 HTML5 的和标签添加了几个新属性,如下所示:新属性: autocomplete novalidate 新属性: autocomplete au ...
（14）H5新增表单属性
一.required属性演示 <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
操作元素之表单属性设置
操作元素之表单属性设置 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
HTML5新增表单属性（HTML5）
HTML5新增表单属性(HTML5) <!DOCTYPE html> <html lang="en"><head><meta charse ...

088_html5表单属性

088_html5表单属性相关推荐

最新文章

热门文章