表单：调查问卷_html制作问卷调查-优快云博客

本文链接：https://blog.youkuaiyun.com/hd_wwb/article/details/127590871

学号后四位：0222

在日常生活中，我们经常会做一些调查问卷。当我们学习了Web前端开发技术与应用，我们也可以尝试做一个调查问卷。

比如下图，就是我做的。

知识点

首先利用form标签创造表格
li 中的 value 里面的内容是你所写的内容
记住：性别的id需要一样，否则就成了多选，一个人不可能又是男，又是女
我们可以把type的类型设置成number，这样的话可以设置最小值和最高值，防止有人随意乱填
checkbox为复选框，可以多选，可以让人多次选择
cursor:pointer属性是指在计算机中将鼠标放上或点击时呈现为小手样式

项目名称及描述

项目名称：调查问卷

描述：利用html文件模拟制作调查问卷

项目代码

html文件如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>调查问卷</title>
		<link href="调查问卷.css" rel="stylesheet" type="text/css"/>
	</head>
	<body>
		<form action="#">
			<ul>
				<li>
					<!--text单行文本输入框-->
					<label>姓名：</label>
					<input class="right" type="text" value="汪一博" maxlength="6"/>
				</li>
				<li>
					<!--日期输入框-->
					<label>出生日期：</label>
					<input class="right" type="date"/>
				</li>
				<li>
					<!--单选框-->
					<label>性别：</label>
					<div class="right">
						<input type="radio" name="sex" id="sex"/>
						<label>男</label>
						<input type="radio" name="sex" id="sex"/>
						<label>女</label>
					</div>
				</li>
				
				<li>
					<!--number数值输入域-->
					<label for="">体重：</label>
					<div class="right">
						<input type="number" min="10" max="100"/>kg
					</div>
				</li>
				<li>
					<!--checkbox复选框-->
					<label for="">兴趣：</label>
					<div class="right">
						<input type="checkbox"/>唱歌
						<input type="checkbox"/>读书
						<input type="checkbox"/>跳舞
						<input type="checkbox"/>游泳
					</div>
				</li>
				<li>
					<label for="">喜欢的颜色：</label>
					<input class="right" type="color" value="#FF0000"/>
				</li>
				<li>
					<!--文件域-->
					<label>上传头像：</label>
					<input class="right" type="file"/>
				</li>
				<li class="advise">
					<!--您的建议：-->
					<label>您的建议：</label>
					<textarea name="opinion" cols="30" rows="10">
					</textarea>
				</li>
				<li class="footer">
					<!--submit提交按钮-->
					<input type="submit"/>
				</li>
			</ul>
		</form>
	</body>
</html>

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;
}