html5版本新增了很多类型,我们挑一些常用的进行展示:
详细学习地址可以参照w3c进行学习:
https://www.w3school.com.cn/html5/att_input_type.asp
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="get">
<!--email:
html5的类型可以增加校验
-->
<input type="email" name="email" />
<!--url-->
<input type="url" />
<!--color-->
<input type="color" />
<!--number:
min:最小值
max:最大值
step:步长
value:默认值:一定在步长的范围中,否则不能提交
-->
<input type="number" min="1" max="10" step="3" value="4"/>
<!--range-->
1<input type="range" min="1" max="10" name="range" step="3"/>10
<!--date-->
<input type="date" />
<!--month-->
<input type="month" />
<!--week-->
<input type="week" />
<!--提交按钮-->
<input type="submit" />
</form>
</body>
</html>
![](/i/l/?n=23&i=blog/2531222/202301/2531222-20230102173136710-1732742021.gif)
![点击并拖拽以移动](/i/l/?n=23&i=blog/2531222/202301/2531222-20230102173136710-1732742021.gif)
HTML5新增属性
<!--
HTML5新增属性:
multiple:多选
placehoder:默认提示
autofocus:自动获取焦点
required:必填项
-->
<input type="text" autofocus="autofocus"/>
<input type="text" required="required" />
![](/i/l/?n=23&i=blog/2531222/202301/2531222-20230102173136710-1732742021.gif)
![点击并拖拽以移动](/i/l/?n=23&i=blog/2531222/202301/2531222-20230102173136710-1732742021.gif)