HTML5新增的表单属性

整理时间：2017-10-4 整理人：info#haixia.net(将#替换成@，来信必复)

序号	属性名称	描述
1	placeholder	占位符，类似于value属性，设置默认值可提示信息
2	autofocus	自动焦点，页面渲染时自动获取焦点
3	required	必填项，如果为空则无法提交并将焦点自动定位在上面
4	pattern	对输入内容进行正则验证
5	list	限定输入内容的列表，列表由标签创建
6	height和width	`<input type="image">`input类型为图像时，设置图像的宽高
7	min、max和step	input类型为数字或日期类型时，设置取值范围与步长（间隔）
8	novalidate	用在`<form>`标签中，提交时不对数据进行验证

1、placeholder:设置提示信息或默认值

<input type="text" name="name" placeholder="用户名不能为空">

2、autofocus 自动获取输入焦点

<input type="text" name="name" placeholder="用户名不能为空" autofocus>

3、required 设置字段为必填项

<input type="text" name="name" placeholder="用户名不能为空" required>

4、pattern 正则表达式验证，更精准地控制用户输入

序号	模式	描述	实例
1	[]	限定范围	[0-9]、[a-z]、[A-Z][0-9a-zA-Z]
2	{}	限定数量	{3}必须为3个，{3,6}3个到6个之间，{3,}至少3个
3	^	限制开头	^php[0-9][a-z]{2,5} php开头跟一个数字再跟2个5个字母，例如：php5aaa
4	$	限制结尾	[0-9]{2}[a-z]{3}abc$

注释：pattern 属性适用于以下 <input> 类型：text, search, url, telephone, email 以及 password 。

<input type="text" name="country" pattern="[A-Za-z]{3}" placeholder="三字母国家代码（不分大小写）"

5、list:list的属性值与datalist的id值必须一致，实现datalist列表与控件绑定

<label for="search">搜索：</label>
<input type="text" id="search" list="keyword">
<datalist id="keyword">
<option value="html">html</option>
<option value="css">css<option>
<option value="javascript">javascript</option>
<option value="php">php</option>
<option value="python">python</option>
</datalist>

6、width和height：只需要设置其中一个即可，另一个等比例缩放
```
<input type="image" src="1.jpg" width="50" alt="提交">
```

7、min\max\step:区间与步长设置

工资：<input type="number" name="number" min="1200" max="12000" step="500">

8、novalidate：提交时放弃数据验证

<form action="addEdit.php" method="post" novalidate>

秒客网

HTML5新增的表单属性

HTML5新增的表单属性

相关文章