H5表单基础知识——新特性和函数

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>