HTML5改良的input元素

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/NGUever15/article/details/78203498

HTML5改良的input元素

url类型

        <form>
            <input name="url" type="url" value="http://www.jikexueyuan.com" />
            <input type="submit" value="提交"/>
        </form>

当数据类型为 url时才能提交

当数据类型不为url时，会提示输入网址。

email类型

        <form>
            <input name="email" type="email" value="[email protected]" />
            <input type="submit" value="提交" />
        </form>

当输入不为email类型的时候，会记进行提示。

date类型

<input type="date" name="data" value=" " />

time类型

<input type="time" name="time" value="10:00" />

value 是默认时间值

datetime类型

<input type="datetime" name="datetime" value=" " />

datetime-local类型

datetime-local 本地时间

<input type="datetime-local" name="datetimelocal"  />

month类型

<input type="month" name="month" value="2010-10-10" />

week类型

<input type="week" name="week"  />

number类型

    <input type="number" name="number" value="15" min="10" max="100" step="10" />

计算器

 <script>
                function sum(){
                    var n1 = document.getElementById("num1").valueAsNumber;
                    var n2 = document.getElementById("num2").valueAsNumber;
                    document.getElementById("result").valueAsNumber = n1+n2;
                }
        </script>
        <form>
                <input type="number" id="num1" />
                +
                <input type="number" id="num2" />
                =
                <input type="number" id="result" readonly />
                <input type="button" value="计算" onclick="sum()" />
        </form>

输入10和5，点击计算，得出结果为15

range类型

<input type="range" name="range" value="25" min="0" max="100" step="5" />

范围通过滑动条来控制

output元素的追加

   <script>
                function value_change(){
                    var number = document.getElementById("range").value;
                    document.getElementById("output").value = number;
                }
        </script>
        <form id="testform">
                <input id="range" type="range" min="0" max="100" step="5" value="10" onchange="value_change()"/>
                <output id="output">10</output>
        </form>

滑动条变化的时候，后面的数值也跟着改变

color类型

   <input type="color" onchange="document.body.style.backgroundColor =document.getElementById('currentColor').textContent = this.value; "/>
        <span id="currentColor"></span>

通过所选颜色来控制 body的背景色

表单验证

<script>
                function check(){
                    var email = document.getElementById("email");
                    if(email.value==""){
                        alert("请输入email");
                        return false;
                    }else if(!email.checkValidity()){
                        alert("请输入正确的Email地址");
                        return false;
                    }
                }
        </script>
        <form id="testform" onsubmit="check()" novalidate="true">
                <label for="email">Email</label>
                <input type="email" name="email" id="email" />
                <br />
                <input type="submit" />
        </form>

什么都不输入时，点击提交，提示如上。

输入错误的email时，点击提交，提示如上。

本博客内容到此结束，欢迎交流探讨！