新增的input表单

来源：互联网发布：apache ab 参数说明编辑：程序博客网时间：2024/06/08 20:04
html5的新增的input表单的一些用法
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>input元素</title></head><body><!--url类型 --><form><input name="url" type="url" value="http://jikexueyuan.com"/><input type="submit" value="提交" /></form><!--email类型 --><form><input type="email" name="email"  value="1264575091@qq.com" /><input type="submit" value="提交" /></form><!--date类型 --><input type="date" name="date" value="" /><!--time类型 --><br/><input type="time" name="time" value="10:00"/><!--datetime类型 --><input type="datetime" name="datetime" value=""/><!--datetime-local类型 --><input name="datetimelocal" type="datetime-local" /><!--month元素 --><input name="month" type="month" value="2010-10" /><!--week元素 --><input name="week" type="week" /><!--number类型 --><input name="number" type="number" value="15" min="10" max="100" step="5"/><br><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> <!--range元素--><input name="range" 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 元素的追加--><br /><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><!--表单验证--><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="testform1" onsubmit="check()" novalidate="true"><label for="email">Email</label><input name="email" type="email" id="email" /><br /><input type="submit" /></form></body></html>
2 0