零基础教你学前端——37、表单综合案例（上）

使用表单中的所有控件，制作一个完整的表单。
这个案例是我们前面课程经常提到的——"疫情流调信息表"，我们先来分析这个案例的各个部分，该使用哪些 HTML 标签。

"社区疫情流调信息表"的标题，可以使用 H1 一级标题标签，在标题下方有一段文字的介绍，可以使用文章段落 p 标签，段首空两格，可以使用   来实现。在段落信息下方，开始出现表单中的控件内容，因为表单需要收集页面中所有控件输入的数据，所以最外层需要使用 form 标签。

在"基本信息" 区域，开始需要使用表单的 fieldset 和 legend 分组控件标签。在 fieldset 标签内部，所有控件的标题信息，都可以使用 h4 标题标签。
h4 标签既能实现加粗也能实现换行，同时，还能实现提示文本和控件之间的间距。姓名和手机号后面的输入框，需要使用 input 输入框控件。
性别的单选功能，需要使用 input 单选框控件。

家庭地址选择和填写，需要使用 select 下拉菜单控件和 textarea 多行文本框控件。身体状况的选择，需要使用 input 多选框控件。

健康码颜色、是否密接与疫苗接种情况的选择，需要使用 input 单选框控件。在制作基本信息表单时需要注意三点：第一，手机号文本框默认已经填写了值，需要使用 value 属性。

第二，手机号文本框获得焦点后，控件里的文本不能修改，需要使用 readonly 属性。第三，性别选择的保密项，按钮为灰色，不能点选，需要使用 disabled 属性。 在"保密信息" 区域，开始同样需要使用表单的 fieldset 和 legend 分组控件标签。

在 fieldset 标签内部，所有的控件标题同样使用 h4 标签实现。身份证信息需要上传附件，需要使用 input 上传文件控件。

学历信息区域选择，需要使用 select 下拉菜单控件。

是否服兵役区域选择，使用 input 单选框控件。个人意见填写，使用 textarea 多行文本输入框控件。配音者（露脸）：为了温习 label 控件，是否服兵役的选择，我们来实现点击文本选中选项的功能。

最后，提交、重置和自定义图像按钮，需要使用标的 input 按钮控件，使用 value 属性定义按钮的名字。最后，提交、重置和自定义图像按钮，需要使用 input 按钮控件，使用 value 属性定义按钮的名字。

[文章配套视频链接](https://www.bilibili.com/video/BV1oU4y1278g?p=38)