什么是表单？

表单就是用来搜集不同类型的用户输入。比如我们登录时输入的登录名，密码。再比如我们点击登录按钮，删除按钮等等都算是表单。

表单是一个包含表单元素的区域，包括文本域，下拉菜单，复选框，单选框等等。

在html文档中，我们使用<form></form>标签来包含表单元素。

form标签有两个属性需要注意下，一个是action， 另一个是method。

action ="目的地"   表示将用户输入的数据将被传送到指定位置。比如一个网页。

method="get/post"  表示传送方法，get为默认值，数据比较少时选择它。post一般用在大量数据，比如博客，空间日志之类的。但如果有密码等需要保护的数据，则应该使用post，否则数据将会显示在浏览器地址栏中。

经常使用的表单标签

1.输入标签<input type="" name="" /> 。

其中type 和 name 属性是必须的。type决定输入类型，比如是复选框，单选框，还是文本域。而name是控制表单元素的，一定要记得加上，否则无法将数据传给后端服务器。

比如<input type="text" name="username">表示输入类型为文本，且将用户的所输入的数据以username的名字提交给后台。如果没有name,虽然看起来没有错，但用户所输入的数据没有任何意义。

下面的例子表示单选按钮，由于name均为sex，所以只能选择一个。但是需要注意，用户必须点击原点才可以选中，点击文字无用。为了提高用户体验，推荐使用label，比如将上例改为:

for 用来和input关联。但for 的值必须与id值相同。

2.选择标签<select name=""><option></option>.

比如

将出现一个下拉选框，选项为北京上海成都天津，天津卫默认选项。

也可以给这些选项分组，比如

multiple属性可以将其变为可以按ctrl/shift键盘复选的多选框。

3.文本域标签<textarea rows="" cols=""></textarea>多行文本框

cols为每行显示的字符数，rows为显示的行数。

4.为你的表单加上边框<fieldset><legend>健康信息</legend></fieldset>

下面通过一个案例来实现一个交友信息的表单:

代码如下：

WEB前端开发学习----3.HTML表单form标签