美文网首页
HTML5 表单新属性值

HTML5 表单新属性值

作者: 詹小云 | 来源:发表于2017-02-12 13:26 被阅读0次

    HTML5为表单增添了很多新属性,其中input最为出众,type值增加了许多类型,如email、date。这些值省了我们写正则表达式的麻烦,十分方便。而且在用户输入不对应的值还会提示用户格式不对,不过提示语比较单一,但是通过js修改也不难。

    input --type值

    • url :路径
    • email:电子邮箱
    • date:日期
    • time: 时间
    • datetime-local :日期到时间
    • month: 年月
    • week:年周
    • number:数字
      数字还设有最大最小值
      eg:min="0" max="10"就只能输入0-10的数字
    • tel:电话号码
    • color:颜色
    • rang:范围
      还有一些附带值
    • value="num": 默认值
    • step="num" :数字间隔
    • min="num": 最小值
    • max="num" :最大值

    eg:输入最小值为0,默认值为0,最大值为10,数字间隔为10的range

    <input type="range" value="0" step="10" min="0" max="10"/>
    

    表单属性

    • required:规定表单不能为空
    • pattern=“reg”:填写的内容需符合pattern里的正则表达式
    • list=“pro_list”:与datalist配合使用,下拉列表
      eg :
                <input type="text" list="pro_list"/><!--类似于select-->
                <datalist id="pro_list">
                    <option value="a" label="a">a</option>
                    <option value="b" label="b">b</option>
                </datalist>
    

    相关文章

      网友评论

          本文标题:HTML5 表单新属性值

          本文链接:https://www.haomeiwen.com/subject/swbgittx.html