本文主要包含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>