088_html5表单属性

自由与束缚JavaJavaScript

已于 2024-02-24 10:28:17 修改

阅读量251

点赞数

分类专栏： html学习文章标签： html5 web前端

于 2020-10-13 20:00:08 首次发布

本文链接：https://blog.csdn.net/aihiao/article/details/109023745

版权

html学习专栏收录该内容

89 篇文章 2 订阅

订阅专栏

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. autocomplete属性, 允许浏览器预测对字段的输入。当用户在字段开始键入时, 浏览器基于之前键入过的值, 应该显示出在字段中填写的选项。

3.4. 多数浏览器默认会缓存input的值, 只有使用ctl+F5强制刷新的才可以清除缓存记录。浏览器可以根据input的name属性的值来记忆的, 下次再有同样name值的时候, 并且有autocomplete属性, 浏览器就会提示上次输入过的值。

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>