HTML5学习(5) 新增input type

最新推荐文章于 2018-01-29 14:06:52 发布

Symbol

最新推荐文章于 2018-01-29 14:06:52 发布

阅读量824

点赞数

分类专栏： HTML5 文章标签： input html5 search date email button

本文链接：https://blog.csdn.net/wcf_szkingdom/article/details/7886940

版权

HTML5 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<body>
    <!--HTML5 新增input type-->
    
    <!--email 邮件-->
    E-mail: <input type="email" /><br>
    
    <!--url 超链接-->
    Homepage: <input type="url" /><br>
    
    <!--number  一定范围的数字,min,max,step(数字间隔),value(默认值)-->
    Points: <input type="number" name="points" min="1" max="10" /><br>
    
    <!--range 一定范围的输入,属性同number-->
    <input type="range" name="points" min="1" max="10" /><br>
    <!-- search -->
    search:<input type="search" /><br>
    <!--Date Pickers（数据检出器）(date,month,week,time,datetime(UTC时间),datetime-local)-->
    <!--   
        date - 选取日、月、年
        month - 选取月、年
        week - 选取周和年
        time - 选取时间（小时和分钟）
        datetime - 选取时间、日、月、年（UTC 时间）
        datetime-local - 选取时间、日、月、年（本地时间）
    -->
    date:<input type="date"/><br>
    month:<input type="month" /><br>
    week:<input type="week" /><br>
    time:<input type="time" /><br>
    datetime:<input type="datetime" /><br>
    datetime-local:<input type="datetime-local" /><br>
    <button οnclick="GetAllValues()" >取值</button>
    <script type="text/javascript">
    function GetAllValues()
    {
        var str = "";
        var inputs = document.getElementsByTagName("input");
        for(var i=0;i<inputs.length;i++)
        {
            str += inputs[i].type + ":" +inputs[i].value + "\n";
        }
        alert(str);
    }
    </script>
</body>

总结:

新增类型有:email,url,number,range,search,date,month,time,week,datetime,datetime-local

Symbol

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5学习(5) 新增input type

E-mail: Homepage: Points: search: <!-- date - 选取日、月、年 month - 选取月、年 week - 选取周和年 time - 选取时间（小时和分钟）
复制链接

扫一扫