console
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>大学生消费情况调查</title>
<link rel="stylesheet" href="03-questionnaire.css" />
</head>
<body>
<h1>大学生消费情况调查</h1>
<form action="" method="POST" class="form">
<fieldset>
<legend>基本信息</legend>
<div class="field">
<label for="name">姓名：</label>
<input type="text" name="name" id="name" required />
</div>
<div class="field">
<label for="age">年龄：</label>
<input type="number" name="age" id="age" required />
</div>
<div class="field">
<span>性别：</span>
<label> <input type="radio" name="gender" />男</label>
<label> <input type="radio" name="gender" />女</label>
<label> <input type="radio" name="gender" />其他</label>
</div>
</fieldset>
<fieldset>
<legend>学校信息</legend>
<div class="field">
<label for="name">学校名称：</label>
<input type="text" name="school" id="school" />
</div>
<div class="field">
<label for="name">专业名称：</label>
<input type="text" name="major" id="major" />
</div>
<div class="field">
<lable for="school-level">你的学校属于：</lable>
<select name="school-level" id="school-level">
<optgroup label="普通高等学校">
<option value="一本">一本</option>
<option value="二本">二本</option>
<option value="三本">三本</option>
</optgroup>
<optgroup label="专科/职业学校">
<option value="大专院校">大专院校</option>
<option value="职业学校">职业学校</option>
</optgroup>
</select>
</div>
</fieldset>
<fieldset>
<legend>消费情况</legend>
<div class="field">
<span>经济来源：</span>
<label>
<input type="checkbox" name="parent-give" />家中定期生活费
</label>
<label><input type="checkbox" name="part-time"" />兼职</label>
<label><input type="checkbox" name="home-teacher" />家教/私教</label>
</div>
<div class="field">
<lable for="cost-month">你的月消费在：</lable>
<select name="cost-month" id="cost-month">
<option value="cost-level-a">500元以下</option>
<option value="cost-level-b">500～1000元</option>
<option value="cost-level-c">1000～1500元</option>
<option value="cost-level-d">1500～2000元</option>
<option value="cost-level-e">2000元以上</option>
</select>
</div>
</fieldset>
<fieldset>
<legend>上传头像</legend>
<div class="field">
<label for="file">选择文件：</label>
<input type="button" value="点击上传" id="upload-btn" />
</div>
</fieldset>
<div class="field div-submit-btn">
<input type="submit" value="提交" id="submit-btn" />
</div>
</form>
</body>
</html>
h1 {
text-align: center;
}
form {
width: 800px;
margin: 0 auto;
margin-bottom: 50px;
}
fieldset {
margin-bottom: 50px;
padding: 20px;
}
.field {
margin-bottom: 20px;
}
.div-submit-btn {
text-align: right;
}
[type="submit"],
[type="button"] {
box-sizing: border-box;
width: 87px;
height: 38px;
font-size: 16px;
line-height: 24px;
padding: 6px 12px;
margin-right: 20px;
color: white;
background-color: rgb(40, 167, 69);
border-color: rgb(40, 167, 69);
border-style: solid;
border-radius: 4px;
border-width: 1px;
cursor: pointer;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
[type="submit"]:hover {
background-color: #218838;
border: #1e7e34;
}
#upload-btn {
background-color: #007bff;
border-color: #007bff;
}
#upload-btn:hover {
background-color: #0069d9;
border-color: #0062cc;
}