(总结1)HTML5中新增加的表单元素

HTML5中新增加了很多元素标签使用，在经过了近一星期多的学习之后现在进行一下总结，方便日后查阅：

• H5中的智能表单

    <form action="">
        <fieldset>
            <legend>Html5中的智能表单</legend>
            <label for="email">
                email：<input type="email" name="email" id="email"/>
            </label>
            <label for="tel">
                tel:<input type="tel" name="tel" id="tel"/>
            </label>
            <label for="url">
                url:<input type="url" name="" id="url"/>
            </label>
            <label for="number">
                number:<input type="number" name="" id="number" step="3"/>
            </label>
            <label for="search">
                search:<input type="search" name="" id="search"/>
            </label>
            <label for="range">
                range:<input type="range" name="" id="range" value="60" min="0" max="100"/>
            </label>
            <label for="color">
                color:<input type="color" name="" id="color"/>
            </label>
            <label for="time">
                time:<input type="time" name="" id="time"/>
            </label>
            <label for="date">
                date:<input type="date" name="" id="date"/>
            </label>
            <label for="month">
                month:<input type="month" name="" id="month"/>
            </label>
            <label for="week">
                week:<input type="week" name="" id="week"/>
            </label>
            <input type="submit" value="提交"/>
        </fieldset>
    </form>

• 以及智能下拉菜单，和传统下拉标签进行一个对比

    <!--传统表单-->
    <select>
        <option>选项1</option>
        <option>选项1</option>
        <option>选项1</option>
        <option>选项1</option>
    </select>
    <br/><br/><br/>



    <!--h5新增表单-->
    车：<input type="text" list="car"/>
    <datalist id="car">
        <option>奔驰</option>
        <option>奔奔</option>
        <option>宝马</option>
        <option>宝俊</option>
        <option>保时捷</option>
        <option>奥迪</option>
        <option>奥拓</option>
    </datalist>

•  表单元素

<form action="">
        <fieldset>
            <legend>表单元素</legend>
            <label>
                output标签仅做展示用：<output>我是output</output>
            </label>
            <label>
                加密类型：<keygen/>
            </label>
            <label>
                度量器：<meter value="30" min="0" max="100"></meter>
            </label>
            <label>
                进度条：<progress></progress>
                <!--进度条：<progress  value="30" min="0" max="100"></progress> -->
            </label>

        </fieldset>
    </form>

• 表单属性

    autofocus:自动获取焦点
    autocomplete:自动补全（默认on开启） off关闭
    placeholder:占位符
    required:必填选项
    multiple:可多选（上传文件）
    novalidate:关闭默认的验证功能（form标签属性）
    pattern="1d{10}" 自定义正则表达式

• 表单事件

    <script>
        var txt1 = document.getElementsByTagName("input")[0];
        var txt2 = document.getElementsByTagName("input")[1];
        var txt3 = document.getElementsByTagName("input")[2];
        var num = 1;

        //oninput 当用户每一次输入的时候
        txt1.oninput = function () {
            txt2.value = num++;
        }
        //oninvalid 当验证不通过时触发
        txt3.oninvalid = function () {
            //setCustomValidity：验证不通过时提示的文字
            this.setCustomValidity("不要顽皮！请正确输入")
        }
    </script>