html用表单做个人信息界面 方框个人资料包括姓名 性别 生日 出生日期 个人经历 兴趣爱好 方框专业与课程包括所选课程,所选专业
时间: 2024-04-05 21:29:32 浏览: 53
个人爱好兴趣技能介绍html5单页模板
5星 · 资源好评率100%
以下是示例代码,展示如何使用HTML表单制作一个包括个人资料和专业课程的界面:
```
<form>
<fieldset>
<legend>个人资料</legend>
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br>
<label for="gender">性别:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label><br>
<label for="birthday">出生日期:</label>
<input type="date" id="birthday" name="birthday"><br>
<label for="experience">个人经历:</label>
<textarea id="experience" name="experience"></textarea><br>
<label for="interests">兴趣爱好:</label>
<input type="checkbox" id="sports" name="interests" value="sports">
<label for="sports">运动</label>
<input type="checkbox" id="music" name="interests" value="music">
<label for="music">音乐</label>
<input type="checkbox" id="reading" name="interests" value="reading">
<label for="reading">阅读</label><br>
</fieldset>
<fieldset>
<legend>专业与课程</legend>
<label for="major">所选专业:</label>
<select id="major" name="major">
<option value="computer-science">计算机科学</option>
<option value="mathematics">数学</option>
<option value="physics">物理</option>
</select><br>
<label for="courses">所选课程:</label>
<input type="checkbox" id="programming" name="courses" value="programming">
<label for="programming">编程基础</label>
<input type="checkbox" id="database" name="courses" value="database">
<label for="database">数据库</label>
<input type="checkbox" id="network" name="courses" value="network">
<label for="network">计算机网络</label><br>
</fieldset>
<input type="submit" value="提交">
</form>
```
在上面的代码中,我们使用了HTML的fieldset和legend元素来将个人资料和专业课程分别放在两个方框中。个人资料包括姓名、性别、出生日期、个人经历和兴趣爱好等信息项,其中性别使用了radio类型的单选框,兴趣爱好使用了checkbox类型的多选框。专业课程包括所选专业和所选课程,其中所选课程也使用了checkbox类型的多选框。
最后,我们使用了一个submit类型的按钮,用于提交表单。当用户填写完表单信息后,点击提交按钮就可以将表单数据发送到后台进行处理。具体的后台处理方式需要根据实际情况进行编写。
阅读全文