HTML5 学习笔记6-改良的input元素

最新推荐文章于 2024-09-18 21:08:41 发布

RonnyZhao

最新推荐文章于 2024-09-18 21:08:41 发布

阅读量287

点赞数

分类专栏：学习笔记文章标签： html 新手表单

本文链接：https://blog.csdn.net/qq_19919127/article/details/54140148

版权

学习笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1、改良的input元素种类

    <!--url类型-->
    <form action="">
        <input type="url" name="url" value="http://www.so.com">
        <input type="submit" value="提交">
    </form>
    <br>
    <!--email类型-->
    <form action="">
        <input type="email" name="email" value="2411099927@qq.com">
        <input type="submit" value="提交">
    </form>
    <br>
    <!--date类型-->
    <input type="date" name="date" value="">
    <br><br>
    <!--time类型-->
    <input type="time" name="time" value="10:00">
    <br><br>
    <!--datetime类型-->
    <input type="datetime" name="datetime" value="2008-02-14">
    <br><br>
    <!--datetime-local-->
    <input type="datetime-local" name="datetimelocal" value="">
    <br><br>
    <!--month类型-->
    <input type="month" name="month" value="2015-01-01">
    <br><br>
    <!--week类型-->
    <input type="week" name="week" value="">
    <br><br>
    <!--number类型-->
    <input type="number" name="number" value="55" min="0" max="100" step="5">
    <form action="">
        <input type="number" id="num1">+<input type="number" id="num2">=
        <input type="number" id="result" readonly>
        <input type="button" value="计算" οnclick="jisuan()">
    </form>
    <script>
        function jisuan(){
            var num1=document.getElementById("num1").valueAsNumber;
            var num2=document.getElementById("num2").valueAsNumber;
            document.getElementById("result").valueAsNumber=num1+num2;
        }
    </script>
    <br><br>
    <!--range类型-->
    <input type="range" name="range" value="10" min="0" max="100" step="5">
    <br><br>
    <!--search类型-->
    <input type="search" name="search" value="">
    <br><br>
    <!--Tel类型-->
    <input type="tel" name="tel" value="">
    <br><br>
    <!--color类型-->
    <input type="color" name="color" value="" οnchange="document.body.style.backgroundColor=document.getElementById('currentColor').textContent=this.value;">
    <span id="currentColor"></span>
    <br><br>
    <!--output元素的追加-->
    <form action="" id="myform">
        <input type="range" id="range" min="0" max="100" step="5" value="10" οnchange="cg()">
        <output id="output">10</output>
    </form>
    <script>
        function cg(){
            var number=document.getElementById("range").value;
            document.getElementById("output").value=number;
        }
    </script>

2、表单验证

    <form action="" id="textform" οnsubmit="check()" novalidate="true">
        <label for="email">Email</label>
        <input type="email" name="email" id="email">
        <input type="submit" value="提交">
    </form>
    <script>
        function check(){
            var email=document.getElementById("email");
            if(email.value==""){
                alert("请输入Email");
            }else if(!email.checkValidity()){
                alert("请输入正确的Email");
                return false;
            }
        }
    </script>