html5 input类型

来源：互联网发布：json 双引号编辑：程序博客网时间：2024/05/16 18:45
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <script type="text/javascript">        /*         *valueMissing：是否空值,配合required属性使用         *typeMismatch：类型是否匹配，配合email、number、url等类型使用         *patternMismatch：是否匹配成功正则表达式，配合pattern属性使用         *toolong ：是否超过指定长度，配合maxlength使用         *rangeUnderflow ：判断当前元素值是否小于min，与min属性配合，不与max比较         *rangeOverflow ：判断当前元素值是否大于max，与max属性配合，不与min比较         *stepMismatch ：判断当前元素值是否符合step要求，与step属性配合         */        function validateText(obj){             if(obj.validity.valueMissing){                      obj.setCustomValidity("此项不能为空！！！");             }else if(obj.validity.patternMismatch){                obj.setCustomValidity("只能输入a-z之间的字母！！！");                       }else{                //当字段正确时需要把错误提示信息去掉                obj.setCustomValidity("");              }        }        //获取颜色值        function getColor(){            var color=document.getElementById("color").value;            alert(color);   //结果：#00ffff        }        //获取日期值        function getDate(){            var date=document.getElementById("date").value;            alert(date);  //结果：2017-2-23        }        //获取时间值        function getTime(){            var time=document.getElementById("time").value;            alert(time);  //结果：04:32        }        //获取日期时间值(UTC)        function getDatetime(){            var datetime=document.getElementById("datetime").value;            alert(datetime);  //结果：谷歌暂时不可用        }        //获取本地日期时间值        function getDatetimeLocal(){            var datetimeLocal=document.getElementById("datetimeLocal").value;            alert(datetimeLocal);  //结果：2017-2-23T12:45        }        //获取月值        function getMonth(){            var month=document.getElementById("month").value;            alert(month);  //结果：2017-2        }        //获取周值        function getWeek(){            var week=document.getElementById("week").value;            alert(week);  //结果：2017-W12        }    </script></head><body>    <form action="1.php" method="post">        <br><br>        <label>文本：</label>        <!-- autofocus:是否开启自动获取焦点，默认为关闭off -->        <!-- autocomplete:是否保存已提交表单的值，在下次填写表单时自动提示曾经输入的值，默认为开启on -->        <!-- required:指定该项必填，当不加required属性时默认不必填 -->        <!-- placeholder:当输入字段为空时显示提示信息，并会在字段获得焦点时消失 -->        <!-- pattern:使用正则表达式校验字段是否符合要求 -->        <input type="text" id="text" autofocus="on" autocomplete="off"   required placeholder="请输入文本" pattern="^[a-z]+$"    onblur="validateText(this);">        <!-- 颜色选择器 -->        <!-- 当颜色发生改变时会触发onchange事件 -->        <!-- 可通过样式改变颜色显示框的宽高，但无法改变弹出的颜色选择器的宽高 -->        <!-- 谷歌浏览器中[版本 51.0.2704.106 m,测试时间：2017-3-4]，弹出颜色选择器后点击[大正方形]那块区域无法改变颜色，只有先点击[基本颜色]或[自定义颜色]或[超长方形渐变色]改变了第一次颜色后，第二次才能正常使用[大正方形]改变颜色 -->        <label>颜色：</label><input type="color" id="color" onchange="getColor();" style="width: 100px;height: 30px;"  >        <br><br>        <label>日期：</label><input type="date" id="date"  onblur="getDate()">        <br><br>        <label>时间：</label><input type="time" id="time" onblur="getTime();">        <br><br>        <!-- 世界协调时间、UTC+8=北京时间 -->        <label>日期时间(UTC)：</label><input type="datetime" id="datetime" onblur="getDatetime()">        <br><br>        <!-- 当地时间 -->        <label>日期时间(本地)：</label><input type="datetime-local" id="datetimeLocal" onblur="getDatetimeLocal()">        <br><br>        <label>月份：</label><input type="month" id="month" onblur="getMonth();">        <br><br>        <label>周：</label><input type="week" id="week" onblur="getWeek();">        <br><br>        <label>邮件：</label><input type="email" id="email" >        <br><br>        <label>数字：</label><input type="number" id="number">        <br><br>        <label>滑块：</label><input type="range" id="range">        <br><br>        <label>搜索：</label><input type="search" id="search">        <br><br>        <label>电话号码：</label><input type="tel" id="tel">        <br><br>        <label>网址：</label><input type="url" id="url">        <br><br>        <input type="submit" value="提交">    </form></body></html>
0 0