美文网首页从零开始学前端css
(3.1HTML5 属性变化)input

(3.1HTML5 属性变化)input

作者: 越IT | 来源:发表于2017-01-10 22:26 被阅读26次

    ●Input

    ·电子邮件Input类型

    <input type=“email” name=“email”>
    

    PC端无差距,移动端差异。

    ·统一资源定位符Input类型

    <input type=“url” name=“url”>
    

    只适用于Iphone手机

    ·电话号码Input类型

    <input type="tel" name="tel">
    

    仅在移动端有效果。浏览器均不支持


    ·数字Input类型

    <input type="number" name="number">
    
    number PC端效果.gif number手机端效果

    ●Date Pickers Input类型

    Date——选取选取日、月、年
    Month ——选取月、年
    Week ——选取周和年
    Time ——选取时间(小时和分钟)

    Datetime——选取时间、日、月、年(UTC 时间)
    Datetime-local ——选取时间、日、月、年(本地时间)

    区别:
    1.兼容性:
    Datetime仅Safari和opera浏览器。
    Datetime-local仅chrome、Safari和opera兼容。
    2.一个本地时间,一个UTC时间

    input(datepicker)PC端的效果.gif

    ·Date Pickers date Input类型

    移动端仅仅在iPhone上有效果

    <input type=“date” name=“date”>
    
    iPhone端的date效果

    ·Date Pickers month Input类型

    <input type=“month” name=“month”>
    
    iphone端的month效果

    ·Date Pickers time Input类型

    <input type=“time” name=“time”>
    
    iphone端的time效果

    ·Date Pickers datetime Input类型

    <input type=“datetime” name=“datetime”>
    
    iPhone端的date效果

    ●其他input类型

    ·Range Input类型

    <input type=“range” name=“range” min=“1” max=“10”>
    
    range类型.gif

    ·Search Input类型

    <input type=“search” name=“search”>
    

    ![Uploading color类型的效果_250337.gif . . .]

    search类型效果.gif

    ·Color Input类型

    <input type=“color” name=“color”>
    
    color类型的效果.gif

    相关文章

      网友评论

        本文标题:(3.1HTML5 属性变化)input

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