console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>调查问卷</title>
<style type="text/css">
#button {
box-sizing: border-box;
width: 60px;
height: 30px;
font-size: 15px;
line-height: 10px;
padding: 6px 12px;
margin-right: 20px;
background-color: red;
border-color: red;
border-style: solid;
cursor: pointer;
}
.box {
margin: 20px;
padding: 20px;
border: 3px double greenyellow;
box-shadow: 5px 5px 5px 5px yellow;
}
</style>
</head>
<body>
<form>
<h1>个人信息调查问卷</h1>
<div class="box">
<legend>基本信息</legend>
<label for="name">姓名:</label>
<input type="text" name="name">
<br><br>
<span>性别：</span>
<label><input type="radio" name="sex">男</label>
<label><input type="radio" name="sex">女</label>
<br><br>
<label for="age">年龄:</label>
<input type="number" name="age">
<br><br>
<label for="email">邮箱:</label>
<input type="text" name="email">
<br><br>
<label for="age">爱好:</label>
<input type="text" name="age">
<br><br>
<label for="phone">手机号:</label>
<input type="text" name="phone">
<br><br>
<label for="zhuzhi">住址:</label>
<input type="text" name="zhuzhi">
<br><br>
<label for="intro">个人简介:</label>
<textarea name="intro" cols="30" rows="10"></textarea>
</div>
<div class="box">
<legend>专业和课程</legend>
<label for="major">专业</label>
<select name="major">
<optgroup label="计算机科学与工程学院">
<option value="计算机">计算机科学与技术</option>
<option value="网络工程">网络工程</option>
<option value="物联网">物联网</option>
<option value="数字媒体">数字媒体</option>
</optgroup>
<optgroup label="工商管理学院">
<option value="会计">会计</option>
<option value="电商">电商</option>
<option value="经济学">经济学</option>
</optgroup>
</select>
<div class="field">
<span>课程：</span>
<label><input type="checkbox" name="C++">C++</label>
<label><input type="checkbox" name="计算机网络">C语言</label>
<label><input type="checkbox" name="编译原理">数据结构</label>
<label><input type="checkbox" name="操作系统">Linux操作系统</label>
</div>
<legend>上传照片</legend>
<label for="file">选择图片：</label>
<input type="file" name="file">
</div>
<div class="field">
<input type="submit" id="button" value="提交">
</div>
</form>
</body>
</html>