表单新增功能

1. 表单控件新增属性

属性名 属性含义
placeholder 设置输入框、文本域的提示文字。
required 设置表单空姐必填或者必选，否则表单无法提交，该属性不需要设置值。
autofocus 自动获取焦点，，该属性不需要设置值。
autocomplete 是否显示输入记录，值:on（默认值）、off。
pattern 值是正则表达式，对文本框或文本域进行验证，表单提交的时候验证。
form 该属性的值可以指定表单的 id 值，与表单关联，表单控件可以写在表单的外面。

2. 新增的表单控件（input 元素的 type 属性新增的值）

2.1 输入框类（5个）

<!-- 邮箱 提交表单验证 -->
<input type="email" placeholder="请输入邮箱">

<!-- URL 提交表单验证-->
<input type="url" placeholder="请输入网址">

<!-- 数字 非数字无法输入，提交表单验证数字范围 -->
<input type="number" placeholder="请输入数字">
<input type="number" max="16" min="-10" placeholder="请输入数字">
<input type="number" step=".1" min=".1" placeholder="小数">

<!-- 电话 不会进行验证，移动端点击弹出数字键盘-->
<input type="tel" placeholder="请输入电话">

<!-- 搜索框 没有验证功能-->
<input type="search" placeholder="搜索框">

2.2 范围选择框（1个）

<input type="range" name="num01">
<input type="range" max="1000" min="-1000" name="num02" value="-1000">
<input type="range" max="10" min="0" step="2" name="num03">

2.3 颜色选择框（1个）

<input type="color">

2.4 日期时间选择框类（5个）

<!-- 选择年月日 -->
<input type="date">
<!-- 选择年月 -->
<input type="month">
<!-- 选择年周 -->
<input type="week">
<!-- 选择时间 -->
<input type="time">
<!-- 选择日期和时间 -->
<input type="datetime-local">

3. form 标签新增属性

novalidate        让表单不进行验证，该属性不要值

4. 输入框的搜索提示

<input type="search" list="searchData">
<datalist id="searchData">
    <option value="hello world"></option>
    <option value="hello xiaole"></option>
    <option value="nihao"></opti on>
    <option value="ab"></option>
    <option value="aaa"></option>
    <option value="abc"></option>
    <option value="abb"></option>
</datalist>

results matching ""

    No results matching ""