1、placeholder
当用户还没有输入值时，输入型控件可能通过placeholder向用户显示描述性说明文字或者提示信息，这在目前网站中很常见，一些JS框架都会提供类似功能，简单的说下在旧版本中常用的解决方案，为输入控件创建一个label，然后通过CSS控制些label的位置使之覆盖在输入控件上面，当label获得焦点时，浏览器会把焦点指向输入控件。不过有了placeholder，新的浏览器就内置了这一功能，其特性值会以浅灰色样式显示在输入框中，当输入框获得焦点并有值后，该提示信息自动消失。
<label for="uname">姓名:</label>
<input type="text" id="uname" name="uname" placeholder="用户名">
2、required
required 属性规定必须在提交之前填写输入域（不能为空）。它是表单验证最简单的一种方式方法，使用方法：
<label for="uname">姓名:</label>
<input type="text" id="uname" name="uname" placeholder="用户名" required>
3、list特性和datalist
通过使用list，开发人员能够为某个输入型控件构造一个选值列表，其使用方法：
网站: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
4、pattern
pattern 属性规定用于验证 input 域的模式（pattern），模式（pattern） 是正则表达式。那些type为email或url的输入控件内置相关正则表达式，如果value不符合其正则表达式，那表单将通不过验证，无法提交。使用方法：
<label for="url">网站:</label>
<input type="url" id="url" name="url" placeholder="http://www.abc.com" required pattern="(http|https)://.+">
5、novalidate
novalidate 属性规定在提交表单时不应该验证 form 或 input 域。
<form action="doreg.php" method="post"novalidate="true">
<label for="uname">姓名:</label>
<input type="text" id="uname" name="uname" placeholder="用户名" required>
<button class="submit" type="submit">提交</button>
</form>
网友评论