HTML5 表单增强

HTML5新增表单选项

<form action="get">
    <!--颜色选择-->
    <input type="color" name="color"> <br>
    <!--邮箱输入-->
    <input type="email" name="email"> <br>
    <!--网址输入，只能输入完整的网址，包含‘http’这样的-->
    <input type="url" name="url"> <br>
    <!--电话号输入，只有手机号码-->
    <input type="tel" name="tel"> <br>
    <!--滑块 可以设置最大值，最小值，初始值-->
    <input type="range" name="range" min="100" max="200" value="100"> <br>
    <!--保证是数字类型的,可以设置默认值，位数-->
    <input type="number" name="number" value="5" step="2"> <br>
    <!--搜索类型的，多了一个快速清除的按键-->
    <input type="search" name="search" id=""> <br>
    <!--日期选择-->
    <input type="date" name="date"> <br>
    <!--月份选择-->
    <input type="month" name="month"> <br>
    <!--周选择-->
    <input type="week" name="week"> <br>
    <!--时间选择-->
    <input type="datetime-local" name="datatime"> <br>
    <!--提交-->
    <input type="submit">
</form>

HTML数据列表

<input type="text" list="mylist">
    <datalist id="mylist">
        <option value="手机"></option>
        <option value="手表"></option>
        <option value="手环"></option>
        <option value="手模"></option>
    </datalist>

HTML新的属性

<form action="get">
    <!--autofocus实现自动聚焦-->
    username<input type="text" name="username" autofocus> <br>
    <!--required必须填写字段-->
    password<input type="password" name="password" required> <br>
    <!--multiple支持多个地址用逗号隔开-->
    email<input type="email" name="email" multiple> <br>
    <!--pattern可以写正则表达式-->
    old username <input type="text" name="username" pattern="[0-9][A-Z]{3}"> <br>
    <input type="submit" value="submit">
</form>