应用表单中的所有控件,制作一个残缺的表单。
这个案例是咱们后面课程常常提到的——” 疫情流调信息表 ”,咱们先来剖析这个案例的各个局部,该应用哪些 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)