新增的input表单

最新推荐文章于 2022-07-08 19:25:26 发布

daisy_oo

最新推荐文章于 2022-07-08 19:25:26 发布

阅读量342

点赞数 2

分类专栏：前端学习

本文链接：https://blog.csdn.net/qq_27597973/article/details/50718170

版权

前端学习专栏收录该内容

26 篇文章 0 订阅

订阅专栏

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="计算" οnclick="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" οnchange="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" οnchange="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" οnsubmit="check()" novalidate="true">
			<label for="email">Email</label>
			<input name="email" type="email" id="email" /><br />
			<input type="submit" />
		</form>
	
	
	
	</body>
</html>