【HTML5】HTML5改良的input元素

HTML5改良的input元素

1、增加与改良的input元素

1、url类型、email类型、date类型、time类型、datetime类型（UTC格式时间）、datetime-local类型、month类型、week类型、number类型、range类型、search类型、Tel类型、color类型

示例：

<!--url类型-->
<form>
    <input name="url" type="url" value="http://www.baidu.com">
    <input type="submit" value="提交">

</form>

<!--date类型-->
<form action="">
    <input type="date" name="date">
</form>

<!--time系列类型-->
<input type="time" name="time" value="10:00">
<input type="datetime" value="10:00">
<form action="">
    <input type="datetime-local" value="10:00">
    <input type="submit" value="提交">
</form>
<input type="month" name="month" value="2020-1-1">
<input type="week">

<!--number类型-->
<form action="">
    <input type="number" name="number" value="15" min="10" max="100" step="5">
</form>
<br>

<!--range类型-->
<input type="range" value="25" min="0" max="100" step="5">

<!--search类型-->
<input type="search">

<!--tel类型-->
<input type="tel">

<!--color类型-->
<input type="color" onchange="document.body.style.backgroundColor = document.getElementById('currentcolor').textContent = this.value">
<span id="currentcolor"></span>

<!--output元素的追加-->
<script>
    function value_change(){
        var number = document.getElementById("range").value;
        document.getElementById("output").value = number;
    }
</script>
<form action="" id="testform">
    <input id="range" type="range" value="25" min="0" max="100" step="5" onchange="value_change()">
    <output id="output">10</output>
</form>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5BUCXTkJ-1581682926482)(C:\Users\46493\AppData\Roaming\Typora\typora-user-images\image-20200126211636322.png)]

2、表单验证

<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 action="" id="testform" onsubmit="check()" novalidate="ture">
    <label for="email">Email</label>
    <input type="email" id="email" name="email"><br>
    <input type="submit">
</form>

el>

```