HTML5中input输入框的种类

冷不防 2022-09-28 01:33 114阅读 0赞

1、问题背景

input输入框从HTML5版本开始，有多少种类型

2、实现源码

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>input输入框类型</title>
    		<style>
    			input{
    				width: 200px;
    				font-family: "微软雅黑";
    				font-size: 14px;
    			}
    		</style>
    	</head>
    	<body>
    		<div>
    			<input type="button" value="查询"/><br><br>
    			<input type="checkbox" /><br><br>
    			<input type="color" /><br><br>
    			<input type="date" /><br><br>
    			<input type="datetime" /><br><br>
    			<input type="email" /><br><br>
    			<input type="file" /><br><br>
    			<input type="hidden" /><br><br>
    			<input type="image" /><br><br>
    			<input type="month" /><br><br>
    			<input type="number" /><br><br>
    			<input type="password" value="密码"/><br><br>
    			<input type="radio" /><br><br>
    			<input type="range" /><br><br>
    			<input type="reset" value="重置"/><br><br>
    			<input type="search" /><br><br>
    			<input type="submit" value="提交"/><br><br>
    			<input type="tel" /><br><br>
    			<input type="text" /><br><br>
    			<input type="time" /><br><br>
    			<input type="url" /><br><br>
    			<input type="week" />
    		</div>
    	</body>
    </html>

3、实现结果

![Center][]![Center 1][]

4、实例说明

（1）button：按钮

（2）checkbox：复选框

（3）color：颜色

（4）date：日期

（5）datetime：日期时间

（6）email：电子邮件

（7）file：文件

（8）hidden：隐藏域

（9）image：图像

（10）month：月份

（11）number：数字

（12）password：密码

（13）radio：单选按钮

（14）range：范围

（15）reset：重置

（16）search：搜索

（17）submit：提交

（18）tel：电话号码

（19）text：文本域

（20）time：时间

（21）url：路径

（22）week：星期

[Center]: https://img-blog.csdn.net/20170309234249100?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveW91MjNoYWk0NQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: /images/20220708/43136c4ac66346c7bed72e0c2169cbaa.png