<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>调查表</title>
<meta charest="utf-8">
<style>
#title{
text-align: center;
}
body{
}
h3{
margin-top: 60px;
text-align: center;
color:#551133;
}
#description{
text-align:center;
}
label,textarea{
color:#aa1111;
margin-top: 40px;
display: block;
width: 50%;
height: 30px;
margin: auto;
}
label+input{
border-radius: 12px;
outline: none;
display: block;
width: 50%;
height: 30px;
margin: 0 auto;
background-color: #FFF0F5;
}
#dropdown{
display: block;
margin-left: 58%;
transform: scale(1.2);
}
#submit{
display: block;
margin:auto;
}
</style>
</head>
<body style="background-color:#ccccff">
<header>
<h1 id="title">音乐技能调查表格</h1>
<p id="description">关于大学生所掌握的音乐相关技能的线上调查</p>
</header>
<form id="survey-form">
<h3>你的基本信息</h3>
<label for="name" id="name-label">Name:</label>
<input type="text" id="name" name="name" placeholder="请输入你的姓名" value="" required>
</br>
<label for="email" id="email-label">Email:</label>
<input type="email" id="email" name="email" placeholder="请输入你的邮箱" value="" required>
</br>
<label for="number" id="number-label">数字：</label>
<input id="number" type="number" placeholder="输入数字" value="" max="110" min="100" >
</br>
<label for="boy">性别：<input type="radio" value="boy" name="sex"/>男</label>
<label for="girl"><input type="radio" value="girl" name="sex"/>女</label></br>
<h3>你所掌握的音乐技能</h3>
<label for="sing"><input id="sing" value="sing" type="checkbox"/>唱歌 </label><label for="compose"><input id="compose" value="compose" type="checkbox"/>作曲</label><label for="arrange"><input id="arrange" value="arrange" type="checkbox"/>编曲</label><label for="lyric"><input id="lyric" value="lyric" type="checkbox"/>作词</label><label for="record"><input id="record" value="record" type="checkbox"/>录音</label><br/>
<h3>你未来想去哪个城市发展？</h3>
<select id="dropdown" name="city">
<option value="0">请选择城市</option>
<option value="1">合肥</option>
<option value="2">深圳</option>
<option value="3">上海</option>
</select><br/>
<h3>其他补充：</h3>
<textarea style="border-radius:12px;"></textarea><br/>
<button type="submit" id="submit">Submit</button>
</form>
</body>
</html>
