[网页编程]-11 HTML5 表单增强

学坝教育

已于 2024-01-04 15:05:25 修改

阅读量388

点赞数 5

文章标签： html5 前端 html 学习开发语言

于 2023-12-13 10:27:54 首次发布

本文链接：https://blog.csdn.net/xuebajiaoyu/article/details/134965575

版权

HTML5中的表单增强确实好用,大家可以来试试看

测试代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<form>
			
			<p>
				<!--邮箱-->
				邮箱: <input type="email" />
				
			</p>
			
			
			<p>
				<!--数字-->
				年龄: <input type="number" />
				
			</p>
			
			<p>
				<!--滑动器-->
				滑动器: <input type="range" />
				
			</p>
			
			<p>
				<!--搜索框-->
				搜索: <input type="search" />
				
			</p>
			
			
			<p>
				<!--日期的框-->
				日期: <input type="date" />
				
			</p>
			
			
			<p>
				<!--日期的框-->
				日期: <input type="week" />
				
			</p>
			
			<p>
				<!--日期的框-->
				日期: <input type="month" />
				
			</p>
			
			<p>
				<!--颜色-->
				日期: <input type="color" />
				
			</p>
			
			<p>
				<!--网址-->
				网址: <input type="url" />
				
			</p>
			
			
			<p>
				
				<input type="submit" value="提交" />
				<input type="reset" value="清空" />
			</p>
			
		</form>
		
		<hr />
		<!--
			H5中表单增强的属性
			
			placeholder
			
			autofocus:自动的获得焦点
			
			
			max：最大值
			
			min：最小值
			
			minlength:最小长度
			
			maxlength:最大长度
			
		-->
		<form>
			
			<p>
				
				账号:<input type="text"  placeholder="手机号/邮箱/账号" autofocus/>
				
			</p>
			
			<p>
				密码:<input type="number" max="130" min="0" />
			</p>
			
			
			<p>
				
				密码:<input type="password"  minlength="2" maxlength="4" />
				
			</p>
			<p>
				
				<input type="submit" value="提交" />
				<input type="reset" value="清空" />
			</p>
		</form>
		
	</body>
</html>