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>标签中，提交时不对数据进行验证 |
<input type="text" name="name" placeholder="用户名不能为空">
<input type="text" name="name" placeholder="用户名不能为空" autofocus>
<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="提交">
工资：<input type="number" name="number" min="1200" max="12000" step="500">
<form action="addEdit.php" method="post" novalidate>