html5改良的input元素的种类

1.url类型、email类型、date类型、time类型、datetime类型、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>

<!--email类型-->

<form>

     <input type="email" type="email" value="admin@qq.com">

     <input type="submit" value="提交">

</form>

<!--date类型-->

<input type="date" name="date" value="">

<br/>

<!--time类型-->

<input name="time" type="time" value="10:00">

<!--datetime类型-->（utc编码格式，国际时间）

<input name="datetime" type="datetime" value="">

<!--datetime-local类型-->(本地时间，会进行判断)

<input name="datetimelocal" type="datetime-local">

<!--month元素-->(只能选择月份)

<input name="month" type="month" value="2010-01-01">

<!--week元素-->

<input name="week" type="week">

<!--number类型-->

<input name="number" type="number" value="12" min="10" max="100" step="5">

<!--计算器-->

<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元素

是一个只允许输入一段范围内数值的文本框，具有最大值和最小值属性，具有step属性，

<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元素的追加-->

<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="testform" onsubmit="check() " novalidate="true">

     <label for="email">Email</label>

     <input name="email" type="email" id="email"><br/>

     <input type="submit">

</form>