7-表单1

HTML借用了表单这个概念来定义一类元素，这些元素可以让你为网站搜集访问者的信息。
无论是要向网站加入一个简单的搜索框，还是要创建更复杂的保险申请单，HTML表单都会为你提供一组元素来搜集来自用户的数据。
你将在本章中学习以下内容：
1.如何在网站上创建表单
2.收集数据的各种工具
3.HTML5中引入的新表单控件

表单控件

添加文本：

单行文本框
用于单行文本，例如电子邮件地址和姓名。

密码框
类似于单行文本框，但它会掩盖输入其中的字符。

文本域
用于较长的文本，例如消息和评论。

进行选择：

单选按钮
当用户必须选择多个选项中的一个时使用。

复选框
当用户可以选择一个或多个选项时使用。

下拉列表
当用户必须从一个选项列表中挑选其中之一时使用。

提交表单：

提交按钮
从你的表单向另一个网页提交数据。

图像按钮
类似于提交按钮，不过他们允许你使用图片。

上传文件
允许用户把文件（例如图片上传到网站）。

表单如何工作

1.用户填写表单，然后单击一个按钮将所填信息提交到服务器。
2.每个表单控件的名称与用户输入或选择的值一同发送到服务器。
3.服务器利用某种编辑语言（例如PHP，C#，VB.net或java）对这些信息进行处理，还可能将这些信息存储在一个数据库中。
4.服务器基于收到的信息创建一个新页面并将其返回到浏览器。

一个表单可能有多个表单控件，每种控件收集不同的信息。服务器需要知道用户输入的每一条数据输入了哪个表单元素。

为了区分各类输入数据，从浏览器发送到服务器的信息采用“名称/值”这样成对的格式。在这个示例中，表单要求访问者输入用户名和他们最喜爱的爵士音乐家。被发送到服务器的成对的“名称/值”即为:

username=Ivy

如果一个表单控件让用户输入文本，那么这个表单控件的值就是用户所输入的内容。

vote=Herbie

如果一个表单控件让你从一组固定的选项中进行选择(例如单选按钮、复选框或是下拉列表)，这个网页的设计者会通过添加代码为每个选项预设一个值。
注意：最好不要在页面中修改表单控件的名称，除非你确定服务端的代码能够理解这个新名称。

表单结构

<form>
表单控件位于<form>元素之中。每个<form>元素都应该设置action特性和id特性。
action
每个<form>元素都需要一个ction特性，其特性值是服务器页面上的URL，这个页面用来在用户提交表单时接收表单中的信息。
method
表单的提交可以采用以下两种方法之一：get或post。
使用get方法时，表单中的值被附加在由action特性所指定的URL末尾。get方法适用于以下情形：

• 短表单（例如搜索框）
• 只从Web服务器上检索数据的情形（不发送那些要在数据库中添加或删除的数据）
  使用post方法时，表单中的值被放在HTTP头信息中进行发送。从经验上来说，如果你的表单存在以下情况，就应该使用post方法：
  1.允许用户上传文件。
  2.非常长
  3.包含敏感信息（例如密码等）
  4.向数据库中添加信息，或是从数据库中删除信息。
  如果没有使用method特性，表单中的数据将采用get方法发送。
  id
  id的值是用来在页面上的众多元素中对表单进行唯一性的标识（也常用在脚本中--例如检查你是否在那些需要信息的区域中填写了信息）。

单行文本框：
<input>
<input>元素用来创建多种不同的表单控件，其type特性的值决定了它将要创建那种控件。

type="text"

当type特性的值为text时，<input>元素会创建一个单行文本框。
name
当用户向表单中输入信息时，服务器需要知道每条数据被输入到了哪个表单控件。例如，在一个登录表单中，服务器需要知道哪条数据是作为用户名输入的，哪条数据提供的是密码。因此，每个表单控件都需要都需要有一个name特性，这个特性的值对表单控件进行标识并于输入的信息一同传送到服务器。
maxlength
可使用maxlength特性来限制用户在文本区域输入字符的数量。它的值为用户可以输入字符的最大数量。
例如：如果你要求输入一个年份，maxlength特性的值就可以设置为4。

密码框
<input>
type="password"
当type特性的值为password时，<input>元素会创建一个用起来非常类似的文本框，唯一的不同之处在于其中的字符被掩盖了。字符以这种方式被隐藏起来为的是让那些在用户背后旁观的人看不到想密码这样的敏感数据。
name
name特性表明密码框的名称，它将与用户输入的密码一同发送到服务器。
size,maxlength
密码框也可以像单行文本框一样设置size特性和maxlength特性。