HTML&CSS设计和网站构建-07表单（上）

• 如何收集来自访问者的信息
• 各种表单控件
• HTML5中引入的表单控件

从传统意义上讲，表单这个词指得是一个打印的文档，这个文档中含有一些空白区域供你填写信息。HTML借用了表单这个概念来定义一类元素，这些元素可以让你为网站收集来自访问者的信息

• 如何在网站上创建表单
• 收集数据的各种工具
• HTML5中新引入的表单控件

表单概述

除了可以让用户进行搜索，表单还可以让用户在线完成其他功能。

表单控件

可以使用多种类型的表单控件为网站收集来自访问者的信息

添加文本：单行文本框 text input

密码框  password input

文本域 text area

进行选择：单选按钮 radio buttons

复选框    checkboxes

下拉列表 drop-down

提交表单：提交按钮  submit buttons

图像按钮   images buttons

上传文件

表单如何工作

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

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

为了区分各类输入数据，从浏览器发送到服务器的信息采用“名称/值”这样成对的格式。

username=ivy

值           名称

表单结构

<form>, 表单控件位于<form>元素中，每个form元素都应该设置action特征，通常还需要设置method特征和id特征

action，每一个<form>元素都需要一个action特征，其特征值是服务器上一个页面的URL，这个页面用来在用户提交表单时接收表单中的信息

method， 表单的提交可以采用以下两种方式：get 或post 

1. 使用get方法时，表单中的值被附加在由action特性所指定的URL末尾。get方法适用于以下情形：

• 短表单（例如搜索框）
• 只从web服务器上检索数据的情形（不发送那些要在数据库中添加或删除的数据）

2. 使用post方法时，表单中的值被放在http头信息中进行发送。如果你的表单存在以下情况，就应该使用post方法：

• 允许用户上传文件
• 非常长
• 包含敏感信息
• 想数据库中添加信息，或者从数据库中删除信息

单行文本框

<input>, 元素用来创建多种不同的表单控件，其中type特性值决定了它将要创建哪种控件

type=“text”，当type特性的值为text时，input元素会创建一个单行文本框

name, 当用户向表单输入信息时，服务器需要知道每条数据被输入到哪个表单控件。因此，每个表单控件都需要一个name特性，这个特性的值对表单控件进行标示并与输入的信息一同传送到服务器

maxlength, 可使用maxlengeh特性来限制用户在文本区域输入字符的数量，

size（只在旧的表单中用来指定文本框的宽度）

密码框

<input>

type=”password”, 当type的值为password时，<input>元素会创建一个用起来和单行文本框非常类似的文本框。name的值表明密码框的名称，它讲与用户输入的密码一同发送给服务器

size 和 maxlength, 密码框也一样设置size和maxlength特性

文本域（多行文本框）

<textarea>,元素用来创建多行文本框。与其它input 元素不同， <textarea>元素并非空元素，因此它包含起始标签和结束标签。

单选按钮

<input>

type=”radio” 单选按钮只让用户从一系列选项中选择其中一个。

name特性与用户所选择选项的值一同发送到服务器，当一个问题以单选按钮的形式给用户提供一系列的答案时，用来回答这个问题所有单选按钮的name特性值都应该相同

value, 特性为选项指定了被选中时要发送到服务器的值，同一组中每个按钮的值应该都各不相同

checked,特性可用来指定当页面加载时哪个值会被选中。这个特性的值为checked。同一组中的单选按钮只能有一个使用此特性。