h5改良的input元素种类

作者：HXAcr 字体：[ ] 来源：互联网 时间：2017-10-01

本文主要包含h5等相关知识,HXAcr希望在学习及工作中可以帮助到您

增加与改良的input元素

url类型、email类型、data类型、time类型、datetime类型、datetime-local类型、month类型、number类型、range类型、search类型、Tel类型、color类型

 

<form> <!--url类型--> <input name="url" type="url" value="huxinai.site" /> <!--email类型--> <input name="email" type="email" value="72619@163.com" /> <!--date类型--> <input name="date" type="date" /> <!--time类型--> <input name="time" type="time" /> <!--datetime类型--> <input name="datetime" type="datetime" /> <!--datetime-local类型--> <input name="datetimelocal" type="datetime-local" /> <!--month类型--> <input name="month" type="month" /> <!--week类型--> <input name="week" type="week" /> <!--number类型--> <input name="number" type="number" /> <!--数字加法计算器 <form> <input type="number" id="num1" /> + <input type="number" id="num2" /> = <input type="number" id="result" readonly="readonly"/> <input type="button" value="计算" onclick="sum()" /> </form> <script> function sum(){ //var m = document.getElementById("num1").value; //var n = document.getElementById("num2").value; //如果使用.value，则结果为m，n拼起来。即1+2=12 var m = document.getElementById("num1").valueAsNumber; var n = document.getElementById("num2").valueAsNumber; document.getElementById("result").valueAsNumber = m+n; } </script> --> <!--range类型:只允许输入一段数值的文本框，可以指定每次拖动的步幅，默认最大值100--> <input name="range" type="range" value="50" min="0" max="100" step="5" /> <!--search类型--> <input name="search" type="search" /> <!--tel:不强制输入数字--> <input name="tel" type="tel" /> <!--color:选取颜色，提供一个颜色选择器--> <input name="color" type="color" onchange="document.body.style.backgroundColor = document.getElementById('xx').textContent = this.value" /> <span id="xx"></span> <!--output：h5追加的元素，定义不同类型的输出--> <input id="ra" type="range" min="0" max="100" step="5" value="10" onchange="mm()" /> <output id="output">10</output> </form> <script> function mm(){ var number = document.getElementById("ra").value; document.getElementById("output").value = number; } </script>

 

表单验证

 

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

 

您可能想查找下面的文章:

相关文章