零基础教你学前端——39、表单综合案例(下)

打开编辑器,继续在 case_form.html 页面中编写代码。

在“基本信息” fieldset 分组标签   结束的位置处,回车换行。再添加一组 fieldset 与 legend 标签,在 legend 标签内,填入文本“保密信息”,实现区域的分组效果。在浏览器中打开页面,“保密信息”分组边框就做好了。 

回到编辑器,添加 h4 标题标签,标签内部添加文本 “1.身份证信息”。回车换行,再添加文本:“正面:”,在文本后添加 input 标签,type 属性值设置为 file,定义文件选择控件。再添加一个 br 标签。

接着添加文本“反面:” ,在文本后添加 input 标签,并将 input 标签的 type 属性值设置为 file。保存。回到浏览器,刷新,可以在表单中选择本地文件了。

图片

返回编辑器,再添加一个 h4 标题标签,在标签内部添加文本 “2.学历信息(最高) :”。

接着添加一个 select 标签,在标签里添加 5 个 option,把 “研究生,本科,专科,高中,高中以下” 等信息添入进来。再添加一个 h4 标题标签,添加文本 “3.是否服兵役 :”。input  中括号  type 等于 radio  name 等于 ismilitary [ˈmɪlətri] (ismilitary是两个单词 is military,读音注意) 乘以2,   (input[type=radio name=ismilitary]*2)  按tab键 补全代码。为了增强用户体验,实现当点击文本时也能选中单选控件,需要创建两个 label 标签。在第一个label 标签里,添入文本是,定义 for 属性等于 yes。在第二个label 标签里,添入文本否,定义 for 属性等于 no。最后再给两个 input 控件分别定义属性 id 等于 yes,id 等于 no。保存。回到浏览器,刷新。是否服兵役的选择效果实现了。

图片

继续添加 h4 标签,添加文本 “4.个人意见 :”。添加一个 textarea 多行文本输入框,定义属性cols 等于 60,rows 等于 5,设置好可见窗口的大小。保存。回到浏览器,刷新。个人意见的输入框定义好了。

至此,基本信息和保密信息的表单输入控件就都做好了!最后,制作表单按钮控件。回到编辑器,在“保密信息”区域分组标签的结束位置,回车换行。添加三个 input 标签,将input 标签的 type 属性值,分别设置成 “submit” “reset” “image”。接下来,为第一个提交按钮定义 value 属性,值设置为 “上传信息”。

为第二个重置按钮,定义value 属性,值设置为 “清空信息”。为第三个图像提交按钮,定义 src 属性,设置好图片的路径地址。在 form 标签中,定义 target 属性 ,值设置为下划线 self  (_selef)  ,再定义 action 属性,值设置成:后端小伙伴提供的服务器地址。保存。回到浏览器,刷新。填写一些表单信息,点击“上传信息”按钮,表单信息成功提交给了后端页面!

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

你可能感兴趣的:(前端html)