h5改良的input元素种类

增加与改良的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="[e-mail]" /><!--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=12var 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>