[HTML5]调查问卷

cssHTML 表单技术练习：制作调查问卷（内含超详细代码解读）

这一篇来记录 HTML5 表单 API 的学习，以制作调查问卷为例，效果如：

HTML：

	
		
		
		
	
	
		

			

				

					
					 姓名：
					
				
				

					
					 出生日期：
					
				
				

					
					 性别：
					

						
						 男 
						
						 女 
					
				
				
				

					
					 体重：
					

						kg
					
				
				

					
					 兴趣：
					

						 唱歌
						 读书
						 跳舞
						 游泳
					
				
				

					 喜欢的颜色：
					
				
				

					
					 上传头像：
					
				
				

					
					 您的建议：
										
				
				

					
					
				
			
		
	

 css

form{
	width: 343px;
	margin: 0 auto;
	padding: 30px;
	border: 1px solid rgba(0,0,0,0.2);
	border-radius: 5px;
	background: #EEE;
}
 
ul,li{
	padding: 0;
	margin: 0;
	list-style: none;
}
 
ul li{height: 50px;}
 
.right{
	float: right;
	width: 180px;
}
 
/* 当该 input 元素获得焦点时, 设置背景颜色 */
input:focus{background-color: rgba(0,0,0,0.2);
	overflow: hidden;
}
 
form.footer{text-align: center;}
 
/* 设置当鼠标移动到 type=submit 按钮上时, 鼠标指针变为一只小手形状 */
input[type=submit]{
	width: 100px;
	height: 30px;
	margin-top: 10px;
	cursor: pointer;
}
 
.advise{height: 150px;}
 
textarea{
	width: 100%;
	height: 100px;
}

效果图：

如有侵权请联系删除！！！