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

制作“社区疫情流调信息表”
打开编辑器，新建一个 case_form.html 文件，补全基础代码，在 body 内部添加一个 H1 标题标签，在 H1 标题标签内部输入 “社区疫情流调信息表” ，给 h1 标签定义水平居中的 align 属性，值设置为 center。

接下来再添加一个 p 标签，将提前准备好的文本粘贴到 p 标签里，并且在文字前添加两个&emsp；实现首行缩进的效果。保存页面。

在浏览器中打开页面，标题和段落就制作好了。下面开始制作表单。

回到编辑器中，在段落标签后面，添加一个 form 标签，在 form 里添加 fieldset 和 legend标签，实现基本信息区域分组的效果。

在 legend 标签中添加文本：“基本信息”。保存。回到浏览器，刷新，“基本信息”分组边框就做好了。 
回到编辑器，继续添加一个 h4 标签，标签内部添加 文本“1.您的姓名”。继续添加一个 input 标签，type 属性值设置为 text，或者不定义 type 属性，使用默认单行输入框的控件类型。回车换行。

再添加 h4 标签，标签内部添加文本 “2 . 您的手机号” 。
再添加一个 input 标签。由于手机号输入框有默认的文本显示且不能修改，所以需要先定义一个 value 属性，值设置成 1 3 7 四个星 2 4 7 3 ，“137**2473”，再定义一个 readonly 属性。保存。

回到浏览器，刷新，效果实现了。 

回到编辑器，再添加一个 h4 标签，给它添加文本 “3 . 您的性别”。回车换行。使用 emmet 语句： input[type=radio name=gender]*3，按下 tab，快速补全三个 input 标签，在标签后面分别添加文本 “男，女和保密”。

再给第三个input 添加 disabled 属性。保存。回到浏览器，刷新，性别的选择做好了。 返回编辑器，再添加一个 h4 标签，给它添加文本 “4 . 家庭地址”。回车换行。家庭地址是四个 select 下拉菜单，和一个文本域标签。

先写一个 select 标签，标签内部添加 option 标签，填写下拉菜单的选项，然后复制，一共四个。在每一个 option 标签内部填好文本。在第四个下拉菜单位置处添加 br 标签，然后添加一个 textarea 多行文本输入框标签，定义属性 cols 等于 65，rows 等于4。在标签内部添入“在此填写详细地址”，用于提示用户。

注意，多行文本输入框里的默认文本，需要在 textarea 里面添加，不能通过给 textarea 定义 value 属性实现！回到浏览器，刷新，家庭住址制作完成了！ 返回编辑器，还是先添加一个 h4 标签，添加文本 “5 . 您现在的身体状况”。

回车换行。编写使用 emmet 语句：input 中括号 type 等于 checkbox 乘以 12  (input[type=checkbox]*12)，按下 tab 键，生成12个复选框。在每一个复选框后面添加对应的文本。保存。回到浏览器，刷新，身体状况信息复选功能实现了。

返回编辑器，制作最后三组数据采集功能。它们都是单项选择，为了节约时间，我快速的编写剩下的代码。在这里，我们分别为三组单选框定义 name 属性值，分别是“color”“close”“vaccines”，表示健康码颜色，是否密接，疫苗接种情况。保存。回到浏览器中，刷新。三组单选全部制作完成了。

文章配套视频链接https://www.bilibili.com/vide...