我们来认识表单。

　　表单与我们的生活息息相关。例如，回老家时，社区让返乡人员填写的纸质版或者是电子版的流调信息表;医院的电子挂号平台;12306 购票系统的注册登录页面;QQ登录界面;以及微信公众号中的门票预约系统 ("畅游公园"玉渊潭预约) 。这些地方都应用到了表单的相关内容。

　　表单的主要作用就是采集用户的有关信息，它就像一张渔网：页面中用户输入的用户名、密码、单选、多选等信息，相当于各种小鱼，当渔网收紧之后，就把各种小鱼收集到一起带回家!

　　那么HTML表单到底是如何采集用户信息的呢?

　　在网页中，采集用户信息是通过表单控件来完成的。什么是表单控件?其实我们每天都在使用 ：当你打开网页或APP的时候，经常会看到一些文本框、单选框、多选框、下拉菜单、按钮等等，这些都属于表单中的控件。比如QQ登录页面，就是一个典型的案例。

　　接下来我们以 "流调信息表" 为例，分析一下表单的常用控件。

　　在这个表单中，需要采集的信息被分成了两组，这里就用到了**分组控件**。

　　基本信息的前两个，是单行文本框控件。

　　基本信息的详细地址，保密信息的个人意见，是多行文本框控件。

　　基本信息的第3、6、7、8.保密信息的第3.是单选框控件。

　　基本信息的第5.是多选框控件。

　　基本信息的第4.保密信息的第2.是下拉框控件。

　　保密信息的身份证图片上传，是文件选择控件。

　　每个输入控件的标签，都是label控件。

　　上传信息和清空信息，是两个普通按钮控件。

　　最后这个图片，是一个自定义按钮控件。

　　在HTML中，表单使用 form 标签来定义，它是一个双标签。上面提到的表单控件，都需要定义在 form 标签的里面。

　　它的基本语法为：`<form></form>`

　　form 这个单词，名词是表的意思，引申为表单。大家发现没?form 和 from 这两个单词有些类似，大家千万不要写错。

　　打开编辑器，创建一个 base_form.html  文件。补全基本代码。在 body 里书写一个 form 标签。保存。

　　在浏览器中打开页面，什么也没有显示。此时的 form 标签，类似 table 标签：table 不定义 tr 和 td，是没有内容显示的。同理，我们需要在 form 里添加控件，才能让用户填写内容。

上一篇

测试新手需要掌握哪些工具

下一篇

单选和多选