当前位置: 首页 > Web前端 > HTML

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

时间:2023-04-02 22:36:51 HTML

打开编辑器,继续在case_form.html页面编写代码。在“基本信息”字段集分组标签的末尾,输入回车和换行。再添加一组fieldset和legend标签,在legend标签中填写文字“机密信息”,达到区域的分组效果。在浏览器中打开页面,“机密信息”组边框就做好了。回到编辑器,添加h4标题标签,标签内添加文字“1.身份证信息”。回车换行,然后添加文字:“Front:”,在文字后添加输入标签,设置type属性值为file,定义文件选择控件。添加另一个br标签。然后添加文本“Negative:”,在文本后面添加一个input标签,并将input标签的type属性值设置为file。节省。回到浏览器,刷新,就可以在表单中选择本地文件了。返回编辑器,再添加一个h4title标签,在标签内添加文字“2.教育信息(最高):”。然后添加一个select标签,在标签中添加5个选项,添加“研究生、本科、专科、高中、高中以下”等信息。再添加一个h4标题标签,添加文本“3.Militaryservice:”。inputbracketstype等于radioname等于ismilitary[?m?l?tri](ismilitary是两个词是military,注意发音)乘以2,(input[type=radioname=ismilitary]*2)按tab完成代码。为了增强用户体验,实现点击文本时也可以选中radio控件,需要创建两个label标签。在第一个label标签中,添加文本并将for属性定义为等于yes。在第二个label标签中,添加文本No,并定义for属性等于no。最后,分别为两个输入控件定义属性id等于yes和id等于no。节省。返回浏览器并刷新。实现了是否服兵役的选择效应。继续添加h4标签,添加文本“4.个人意见:”。添加一个textarea多行文本输入框,定义属性cols等于60,rows等于5,并设置可见窗口的大小。节省。返回浏览器并刷新。定义个人意见输入框。至此基本信息和机密信息的表单输入控件就准备好了!最后制作窗体按钮控件。返回编辑器,在“机密信息”区域的组标签末尾按回车换行。添加三个input标签,将input标签的type属性值分别设置为“submit”、“reset”和“image”。接下来,为第一个提交按钮定义一个值属性,值设置为“上传信息”。对于第二个重置按钮,定义值属性并将值设置为“清除信息”。第三个图片提交按钮,定义src属性,设置图片的路径地址。在form标签中定义target属性,并将值设置为带下划线的self(_self),然后定义action属性,将值设置为:后端伙伴提供的服务器地址。节省。返回浏览器并刷新。填写一些表单信息,点击“上传信息”按钮,表单信息成功提交到后台页面!文章配套视频链接https://www.bilibili.com/video...