input的类型汇总

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	文本类型:<input type="text" /><br>
	复选框类型:<input type="checkbox"  checked><br>
	颜色类型:<input type="color"><br>
	日期类型:<input type="date"><br>
	邮箱类型:<input type="email"><br>
	提交类型:<input type="submit" value="提交"><br>
	文件类型:<input type="file"><br>
	图片类型:<input type="image" src="21312.jpg"><br>
	按钮类型:<input type="button" id="btn2"><br>
	数字类型:<input type='number' id='btn'><br>
	<label>
	单选类型:<input type='radio' name='a'>aaaa</label><br>
	<label>
	单选类型:<input type='radio' name='a'>bbbb
	</label><br>
	进度条类型:<input type="range" id="btn"><br>
	密码类型:<input type='password' name='pass'><br>
	重置类型:<input type='reset' id='btn'><br>
	不懂:<input type="search"><br>
	不懂:<input type='tel'><br>
	不懂:<input type='url'><br>
	不懂:<input type='week'><br>
	用户:<input name='user'><br>
	密码:<input name='pass'>//这样默认是text类型的.相当于属性名.填入代表属性值
</body>
</html>

效果图:
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_37805832/article/details/109324723