html---input控件的使用以及美化扩展部分 

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			label .checkbox_input{
				display: none; 
			}
			label .checkbox_div{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			label .checkbox_input:checked + .checkbox_div{
				background-color: #0000FF;;
			}
			
			.file{
				width: 100px;
				height: 100px;
				position: relative;
			}
			.file_input{
				width: 100%;
				height: 100%;
				position: absolute;
				opacity: 0;
			}
			.file_div{
				width: 100%;
				height: 100%;
				background-color: #0000FF;
				
			}
		</style>
	</head>
	<body>
		<!-- 美化复选框 -->
		<label>
			<input type="checkbox" class="checkbox_input"/>
			<div class="checkbox_div">复选框</div>
		</label>
		<br><!-- 换行 -->
		<!-- 美化上传按钮 -->
		<div class="file">
			<input type="file" class="file_input"/>
			<div class="file_div" style="color: #FF0000;">上传</div>
		</div>
		
		<!-- <form action="https://www.baidu.com"> -->
			<!-- <input type="email"> -->
			<!-- <input type="url"> -->
			<!-- <input type="number"> -->
			<!-- <input type="date"> -->
			<!-- <input type="month" /> -->
			<!-- <input type="week"> -->
			<!-- <input type="search"> -->
			<!-- <input type="color"> -->
			<!-- <input type="tel"> -->
<!-- 			<input type="time" />
			<input type="submit">
		</form> -->
		
		<form action="http://baidu.com">
			<input type="text" name="username" autocomplete="off" autofocus required pattern="/d"/>
			<input type="submit" src="" />
		</form>
	</body>
</html>

　　

input控件
email:电子邮件地址输入框
url:网址输入框
number:数值输入框(只能输入数字)
date (年月日)/month(年月) / week (年周):日期控件
searck 搜索框 （可删除内容）
color 颜色控件
tel：电话号码输入框(移动端默认调用数字键盘)
time:时间控件

 

		<!-- <form action="https://www.baidu.com"> -->
			<!-- <input type="email"> -->
			<!-- <input type="url"> -->
			<!-- <input type="number"> -->
			<!-- <input type="date"> -->
			<!-- <input type="month" /> -->
			<!-- <input type="week"> -->
			<!-- <input type="search"> -->
			<!-- <input type="color"> -->
			<!-- <input type="tel"> -->
<!-- 			<input type="time" />
			<input type="submit">
		</form> -->

美化扩展
1.label+:checked 可点击切换(如：label .input:checked+.dianji)
2.postion+opacity 点击透明层

	css内：	<style>
			label .checkbox_input{
				display: none; 
			}
			label .checkbox_div{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			label .checkbox_input:checked + .checkbox_div{
				background-color: #0000FF;;
			}
			
			.file{
				width: 100px;
				height: 100px;
				position: relative;
			}
			.file_input{
				width: 100%;
				height: 100%;
				position: absolute;
				opacity: 0;
			}
			.file_div{
				width: 100%;
				height: 100%;
				background-color: #0000FF;
				
			}
		</style>
body内：

<!-- 美化复选框 -->
		<label>
			<input type="checkbox" class="checkbox_input"/>
			<div class="checkbox_div">复选框</div>
		</label>
		<br><!-- 换行 -->
		<!-- 美化上传按钮 -->
		<div class="file">
			<input type="file" class="file_input"/>
			<div class="file_div" style="color: #FF0000;">上传</div>
		</div>

 

表单属性：
autocomplete:输入框下方是否回显密码 值 off 不在显示数据 / on 默认值
autofocus 光标自动聚集
required 不能为空
pattern 正则验证

		<form action="http://baidu.com">
			<input type="text" name="username" autocomplete="off" autofocus required pattern="/d"/>
			<input type="submit" src="" />

　　

posted on 2022-02-11 19:27  爱前端的小魏  阅读(480)  评论(0)  编辑  收藏  举报

导航