HTML5新增的input元素属性：placeholder、required、autofocus、min、max等

HTML5 大幅度地增加与改良了 input 元素的属性，可以简单地使用这些属性来实现 HTML5 之前需要使用 JavaScript 才能实现的许多功能。

下面将详细介绍这些新增的 input 元素的属性。

  HTML5新增的input元素类型和属性

《HTML5新增的input元素类型：number、range、email、color、date等》

《HTML5新增的input元素属性：placeholder、required、autofocus、min、max等》

1、placeholder 属性

当用户没有输入值时，输入型控件可以通过 placeholder 属性向用户显示描述说明或者提示信息。使用 placeholder 属性只需要将说明性文字作为该属性的值即可。除了普通的文本输入框，email、number、url 等其他类型的输入框也都支持 placeholder 属性。

属性用法如下：

<form>
    账号：<input type="text" placeholder="请输入账号"/></br>
    密码：<input type="text" placeholder="请输入密码"/></br>
    <input type="submit" value="提交"/>
</form>

执行结果：

2、required 属性

required 属性的主要目的是确保表单控件中的值已填写，一旦为某个输入型控件设置了 required 属性，就必须填写此项，否则无法提交表单。

属性用法如下：

<form>
    电子邮箱：<input type="email" required /></br>
    <input type="submit" value="提交"/>
</form>

执行结果：

3、pattern 属性

pattern 属性的主要目的是根据表单控件上设置的格式规则验证输入是否为有效格式。通过在 input 元素中使用 pattern 属性，并将属性值设为某个格式的正则表达式，该属性实现在提交表单时会检查其内容是否符合给定格式。

属性用法如下：

<form>
    请输入内容：<input type="text" pattern="[0-9][A-Z]{3}" placeholder="一个数字和三个大写字母"/>
    <input type="submit" value="提交"/>
</form>

执行结果：

4、autofocus 属性

给文本框、选择框或按钮控件加上 autofocus 属性，当页面打开时，该控件将会自动获得光标焦点。

属性用法如下：

用户名称：<input type="type" autofocus  />

5、autocomplete 属性

浏览器通过 autocomplete 属性能够知晓是否应该保存输入值以备将来使用。autocomplete 属性应该用来保护敏感用户数据，避免本地浏览器对它们进行不安全的存储。对于 autocomplete 属性，可以指定“on”、“off”、“”（不指定）这3种值。

属性用法如下：

<input type="text" autocomplete="on" />

6、list 属性

该元素类似于选择框（select），但是当用户想要设置的值不在选择列表之内时，允许其自行输入，该属性本身并不显示，而是当文本框获得焦点时以提示输入的方式显示。

属性用法如下：

<fieldset>
    <legend>请输入搜索关键字：</legend>
    <input type="search" list="myList"/>
    <datalist id="myList">
        <option value="HTML5">HTML5</option>
        <option value="CSS3">CSS3</option>
        <option value="JavaScript">JavaScript</option>
    </datalist>
    <input type="submit" value="搜索"/>
</fieldset>

执行结果：

7、min、max 和 step 属性

通过设置 min 和 max 属性，可以将输入控件的数值输入范围限定在最低值和最高值之间。设置其 step 属性能够制定输入值递增或递减的梯度。

属性用法如下：

数值1：<input type="number"  value="25" min="10" max="100" step="5"/></br>
数值2：<input type="range"  value="45" min="0" max="100" step="5"/>

执行结果：