关于html:零基础教你学前端38表单综合案例中

43次阅读

共计 1366 个字符,预计需要花费 4 分钟才能阅读完成。

制作“社区疫情流调信息表”
关上编辑器,新建一个 case_form.html 文件,补全根底代码,在 body 外部增加一个 H1 题目标签,在 H1 题目标签外部输出“社区疫情流调信息表”,给 h1 标签定义程度居中的 align 属性,值设置为 center。

接下来再增加一个 p 标签,将提前准备好的文本粘贴到 p 标签里,并且在文字前增加两个  实现首行缩进的成果。保留页面。

在浏览器中关上页面,题目和段落就制作好了。上面开始制作表单。

回到编辑器中,在段落标签前面,增加一个 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…

正文完
 0