3. 智能表单

Form 表单补充

1. H5新增input类型

1. 在其他版本的HTML中，表单包含的元素非常有限，并且属性也不多，尤其是在数据交互过程中数据的验证需要编写大量的JavaScript代码

2. 以上的不足都已经在HTML5中被克服，HTML5在以上的基础上增加了许多标签和属性，为开发人员带来了极大的方便

电子邮件类型
功能描述：输入E-mail地址的文本框
语法：<input type="email"/>
注意：输入的内容中必须包含”@”，”@”后面必须具有内容

搜索类型
功能描述：输入搜索关键字的文本框
语法：<input type="search"/>

URL类型
功能描述：输入WEB站点的文本框
语法：<input type="url"/>
注意：输入的内容中必须包含"http://"，后面必须有内容

颜色类型
功能描述：预定义的颜色拾取控件
语法：<input type="color"/>

数字类型
功能描述：只能接受数字
语法：<input type="number"/>
属性：min：当前域能接受的最小值; max：当前域能接受的最大值; step：决定了域所接受值递增或递减的步长，默认为1

范围类型/滑块
功能描述：允许用户选择一个范围内的值
语法：<input type="range" min="0" max="100" value="80"/>
属性：min：范围的下限值; max：范围的上限值; value：设置初始值

日期类型
功能描述：创建一个日期输入域
语法：<input type="date" />

周类型
功能描述：与date类型相似，但只能选择周
语法：<input type="week" />

月份类型
功能描述：与date类型相似，但只能选择月份
语法：<input type="month" />

<datalist> 数据选择器

<datalist> 包含了一组<option>元素，这些元素表示其它表单控件可选值，常与input标签配合使用
实际开发中：需要自动补全的内容列表项可能很多，不可能挨个展示在页面中，一般是通过ajax局部页面刷新技术实现的。

<label>Choose a browser from this list:
<input list="browsers" name="myBrowser" /></label>
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
</datalist>

2. 新增表单属性

multiple
作用：支持在一个域中输入多个值，逗号隔开，一般配合邮箱和URL使用
语法：<input type="email" multiple/>

required
作用：必填
语法：<input type="text" required/>

minlength和 maxlength
作用：定制元素允许的最小字符数和最大字符数
语法：<input type="text" minlength="6" maxlength="18"/>

autocomplete
作用: on/off，用于为输入框添加一组建议的输入项

novalidate
作用: 关闭验证，可用于form标签

tabindex
作用: 控制 input 标签按 tab 键获取到焦点的顺序

以下是代码示例 :

<form action="提交的地址" method="get">
        <p>
            姓名: <input type="text" name="username" autocomplete="off">
        </p>
        <p>
            电子邮件类型
            <!-- 输入E-mail地址的文本框 -->
            <input type="email" multiple  />
            <!-- 注意：输入的内容中必须包含”@”，”@”后面必须具有内容 -->
        </p>
        <p>
            搜索类型
            <!-- 功能描述：输入搜索关键字的文本框 -->
            <input type="search" required minlength="6" />
        </p>

        <p>
            URL类型
            <!-- 功能描述：输入WEB站点的文本框 -->
            <input type="url" tabindex="1" />
            <!-- 注意：输入的内容中必须包含"http://"，后面必须有内容 -->
        </p>

        <p>
            颜色类型
            <!-- 功能描述：预定义的颜色拾取控件 -->
            <input type="color" />
        </p>

        <p>
            数字类型
            <!-- 功能描述：只能接受数字 -->
            <input type="number" min="日期类型5" max="10" step="2" />
            <!-- 属性：min：当前域能接受的最小值; max：当前域能接受的最大值; step：决定了域所接受值递增或递减的步长，默认为1  -->
        </p>

        <p>
            范围类型/滑块
            <!-- 功能描述：允许用户选择一个范围内的值 -->
            <input type="range" min="0" max="10" value="1" />
            <!-- 属性：min：范围的下限值; max：范围的上限值; value：设置初始值 -->
        </p>

        <p>
            日期类型
            <!-- 功能描述：创建一个日期输入域 -->
            <input type="date" />
        </p>
        <p>
            周类型
            <!-- 功能描述：与date类型相似，但只能选择周 -->
            <input type="week" />
        </p>
        <p>
            月份类型
            <!-- 功能描述：与date类型相似，但只能选择月份 -->
            <input type="month" />
        </p>
        <p>
            <!-- <datalist> 数据选择器 -->

            <!-- <datalist> 包含了一组<option>元素，这些元素表示其它表单控件可选值，常与input标签配合使用
                        实际开发中：需要自动补全的内容列表项可能很多，不可能挨个展示在页面中，一般是通过ajax局部页面刷新技术实现的。 -->

                        <!-- 想要实现选取元素放到input表单中,必须让input的list=""跟datalist的id=""相同 -->
            <label>Choose a browser from this list:
                <input list="test" name="myBrowser" /></label>
            <datalist id="test">
                <option value="Chrome">
                <option value="Firefox">
                <option value="Internet Explorer">
                <option value="Opera">
                <option value="Safari">
            </datalist>

            城市:<input type="text" list="city">
            <datalist id="city">
                <option value="北京"></option>
                <option value="上海"></option>
                <option value="郑州"></option>
            </datalist>
        </p>

        <input type="submit" tabindex="2">
    </form>