h5---表单---新增控件类型

新增的有哪些控件：

1.email、2.url、3.number、4.range
5.Date pickers (date, month, week, time, datetime, datetime-local)
6.search、7.color、8.tel

type=“number”

type=“range”

type=Date Pickers（日期选择器）

type=”tel”

tel并不是来验证手机号码的，因为全球手机号码格式的标准不同。
它的目的是能够在移动端打开数字键盘，
而数字键盘就限制了用户只能填写数字而不能填写其他字符。（在PC端无法展示）

浏览器兼容

<datalist></datalist>

说明：数据列表标签，定义输入框的选项列表，
选项列表是通过该元素内的option元素进行创建的。
该元素与input元素配合使用，来定义input可能的值。

用法：要把这个datalist元素定义的选项列表绑定到输入框，
将input元素的list属性的值设置为datalist元素的id属性值

 <datalist id="searchList">
        <option label="top1">鹿晗送祝福</option>
        <option label="top2">李荣浩结婚</option>
        <option label="top3">向佐郭碧婷</option>
    </datalist>
    <input type="text" placeholder="请输入搜索内容" list="searchList">

output

输出标签，标记定义一些输出类型，计算表单结果。
注意：oninput 事件是在用户输入时触发的事件

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
    <!-- 输入一定范围内的数值 -->
    0<input type="range" id="a" value="50">100
    +<input type="number" id="b" value="50">=
    <output name="x" for="a b"></output>
</form>

属性解析：

①for 规定一个或多个元素的 id 列表，以空格分隔。
这些元素描述了计算中使用的元素与计算结果之间的关系
②name 规定 <output> 元素的名称

optgrou

选项组标签，将select元素中的选项进行逻辑分类，
在select元素中直接定义，不允许嵌套，既不能进行第二次分组
①disabled：加载时禁用该选项组
②label: 用来定义分组显示的标签名

 <select>
        <optgroup label="国漫">
            <option>哪吒</option>
            <option>葫芦娃</option>
        </optgroup>
        <optgroup label="日漫">
            <option>奥特曼</option>
            <option>海贼王</option>
        </optgroup>
    </select>

fieldset

	当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，
	它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。
	常与legend 元素配合使用：<legend>为 fieldset 元素定义标题

标签属性

1.required 属性：
	表明该元素是必填项，当提交表单的时候会自动验证该元素的内容是否不为空。

2.autofocus 属性
	在打开页面时使元素自动获取焦点，只有当一个页面是以使用某个控件为主要目的时，
	才对该控件使用 autofocus 属性。一个页面只能有一个控件有该属性。

3.list属性：
	指定一个datalist作为下拉提示单，输入框通过 list 属性和 datalist 关联起来；
	value 为选中后输入框的内容（可以不加），label 为 value 的辅助描述性内容。

<input type="text" list="field">
    <datalist id="field">
      <option value="嵌入式" label="c"></option>
      <option value="前端" label="web"></option>
      <option value="后端" label="java"></option>
    </datalist>

4.multiple属性：
	文件上传多选或多个邮箱地址 ，可以选择多个文件；
	在email中，可以输入多个邮箱地址，以逗号分隔

5.pattern属性：
	规定用于验证 input 域的模式，模式为正则表达式，验证表单元素

<label>
        帐号：<input 
                   type="text" 
                    required 
                    autofocus 
                    placeholder="请输入账号" 
                    pattern="^[0-9a-zA-Z]{6,16}$" />
                    请输入a-zA-Z0-9且长度6-16位的字符
</label>

6.autocomplete属性：
	规定表单是否应该启用自动完成功能，适用于 <form>，
	部分输入框和form都可以设置自动提示 off关闭，on开启（默认是on）
	自动补全属性，当表单元素设置了自动完成功能后，
	会记录用户输入过的内容，双击表单元素会显示历史输入。
	取值：on:打开 ，off:关闭

7.novalidate属性：
	取消表单验证，规定当提交表单时不对其进行验证，如果使用该属性，
	则表单不会验证表单的输入
	通过将novalidate属性放置到form元素上，form元素的原生校验特征就会忽略，
	这样就可以防止它同你的自己写的JavaScript的校验方法起冲突。

8.formnovalidate 属性：
	<input> 标签使用该属性，则提交表单时按钮不会执行验证过程

10、禁用属性：disabled
11、只读属性：readonly(只读文本框)： true false
12、长度属性：size=“初始长度”
13、选中属性：selected(默认选中项) 【列表】
14、选中属性：checked (单选按钮选中状态)【单选、复选】
15、输入的最大字符数 ：maxlength:type为text或password时
16、指定按钮是否被选中：checked:type为radio或checkbox时
17、setCustomValidity：修改 pattern 校验失败时，默认提示信息

新增表单事件

①oninput：当元素中的内容改变时触发
②oninvalid：当验证不通过时触发

<form>
    用户名：<input type="text" required placeholder="请输入用户名" id="user"><br>
    手机号：<input type="tel" id="phone" required 
            pattern="^1(3|4|5|6|7|8|9)\d{9}$"><br>
    <input type="submit"> <br>
</form>
<script>
    document.getElementById("user").oninput = function (ev) {
        console.log(this.value);
    };
    document.getElementById("phone").oninvalid = function (ev) {
        // 设置默认提示信息
        this.setCustomValidity("请输入正确的手机号码！")
    };
</script>