H5新增表单type属性

HTML5表单元素详解

最新推荐文章于 2024-07-29 00:36:24 发布

原创最新推荐文章于 2024-07-29 00:36:24 发布 · 364 阅读

0 ·

CC 4.0 BY-SA版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="">
			用户名：<input type="text" /><br>		
			密码：<input type="password" /><br>
			邮箱：<input type="email" /><br><!--提供了默认的电子邮箱的完整验证，提交时验证，必须包含@必须包含域名，如果不能满足验证则会阻止当前的数据提交-->
			电话：<input type="tel" /><br>	<!--目的在移动端切换到数字键盘，意味着数字键盘限制了用户只能输入数字-->
			网址：<input type="url" /><br>	<!--提供了验证只能输入合法网址验证  必须包含http://-->
		           数字：<input type="number" value="10" max="20" min="0" /><br><!-- 只能输入数字（包含小数点）不能输入其他字符  value默认值max最大值min最小值-->
		           	
		    请输入商品名称：<input type="search" /><br><!--人性化的输入体验，右边可以删除，可删除全部-->
		    范围：<input type="range" max="100" min="0" value="50"/><br><!--max min value不写默认也是50-->
		  颜色：<input type="color" /><br><!--value值就是其颜色 可以选择颜色 可以通过js获取该value值为该颜色-->
		  	时间：<input type="time" /><br><!--时分秒-->
		  	日期：<input type="date" /><br>		  		
		  	<!--年月日 datetime大多浏览器不支持-->
		  	<!--年月日时分秒-->
		  	日期时间：<input type="datetime-local" /><br>
		  	月：<input type="month" /><br>
		  	<!---->
		  	周：<input type="week" /><br>
			<input type="submit" value="提交" />
		</form>
		
	</body>
</html>