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

零基础教你学前端——27、表单初手

时间:2023-04-02 12:51:16 HTML

这一课,我们来认识一下表单。形式与我们的生活息息相关。例如,返乡时,社区要求返乡人员填写纸质或电子版流转信息表;医院电子挂号平台;12306售票系统注册登录页面;QQ登录界面;门票预订系统(“畅游公园”玉渊潭预订)。这些地方被应用于表格的相关内容。表单的主要功能是收集用户的相关信息。它就像一张渔网:用户在页面上输入的用户名、密码、单选、多选等信息就相当于一条条小鱼。收集各种小鱼带回家吧!那么HTML表单是如何收集用户信息的呢?在网页中,收集用户信息是通过表单控件完成的。什么是表单控件?其实我们每天都在用:打开网页或者APP的时候,经常会看到一些文本框,单选框,多选框,下拉菜单,按钮等等,都属于控件中的形式。比如QQ登录页面就是一个典型的案例。下面我们以“调流信息表”为例,分析一下表单的常用控件。在这个表单中,将要收集的信息分为两组,这里使用了分组控件。基本信息的前两个是单行文本框控件。基本信息的详细地址,机密信息的个人意见,多行文本框控件。基本信息第3、6、7、8项和机密信息第3项为单选按钮控件。第五部分基本信息是多选框控件。第四部分基本信息和第二部分机密信息是下拉框控件。机密信息的身份证图片上传是一个文件选择控件。每个输入控件的标签都是一个标签控件。上传信息和清除信息是两个常见的按钮控件。最后一张图是一个自定义的按钮控件。在HTML中,表单是使用form标签定义的,它是一个双标签。上面提到的表单控件需要在form标签内部定义。它的基本语法是:

单词form,名词表示表格,引申为form。你发现了吗?form和from这两个词有些相似,一定不要写错。打开编辑器并创建一个base_form.html文件。完成基本代码。在正文中写一个表单标签。节省。在浏览器中打开页面什么也没有显示。此时的form标签类似于table标签:table没有定义tr和td,所以没有内容可以显示。同样,我们需要给表单添加控件,让用户填写内容。文章配套视频