构建Web表单

目录

一，表单的结构

1.表单的基本概念

2.form的属性

（1）.name

（2）.action

（3）.method

3.表单控件的类型

二，创建输入控件

1.input控件的属性

2.input控件的类型

三，创建下拉列表

1.下拉列表控件相关概念

四，对表单元素分组

1.fieldset标签

2.legend标签

五，给表单组件添加说明

1.label标签相关概念

2.label标签与表单控件的关联

---

一，表单的结构

1.表单的基本概念

表单是收集用户数据的容器。

一个表单通常由表单控件和相关的提示信息组成。

• 表单控件：实现用户输入的组件。如文本框、密码框、单选按钮、复选按钮、下拉列表框、多行文本框、文件域等控件。
• 提示信息：提示用户进行填写和操作的说明文字。

每个表单都以form开始标签开始，以form结束标签结束。两个标签之间是组成表单的各个控件及提示信息。表单的基本结构如下：

<form action="url地址" method="提交方式" name="表单名称">

各种表单控件及提示信息

</form>

2.form的属性

（1）.name

用于识别表单数据。

（2）.action

接收并处理url地址。

（3）.method

设置表单数据的提交方式。有两种方法：get方法和post方法。

get方法

采用GET方法时，浏览器会与服务器建立连接，然后将表单数据直接附在action属性设置的URL之后，通过URL在一个传输步骤中发送所有的表单数据，URL和表单数据之间用问号进行分隔。 显然这种方法用户数据要显示在地址栏中，保密性很差，而且对用户发送的数据量也有限制。

post方法

采用POST方法是在HTTP请求中嵌入表单数据。浏览器首先与action属性中指定的服务器建立连接，一旦建立连接之后，浏览器按分段传输的方法将数据发送给服务器。 显然这种方法用户数据嵌入在http请求中而不是地址栏的，保密性较好，对用户发送的数据量也无限制。但post方法发送的信息是未经加密的，容易被黑客获取。

其他属性

在HTML5中，form标签还有两个新的属性。

• autocomplete：规定是否启用表单的自动完成功能。自动完成允许浏览器侦测字段输入，当用户开始键入时，浏览器会基于以前键入过的值，自动列表显示在字段中填写的选项。取值为on,启用自动完成功能;取值为on,取值为off，禁止自动完成功能。
• novalidate：规定是否不进行表单验证。启用该属性，则当提交表单时不进行验证。

3.表单控件的类型

• input控件：是单行输入型控件，用来接受用户输入的信息。
• textarea控件：用来创建一个支持多行的文本输入区域。
• select控件：用于创建下拉列表框。
• button控件：用于定义一个按钮

二，创建输入控件

1.input控件的属性

input标签是单标签，用于创建采集用户输入信息的表单控件。

• type：控件类型，取值为text 、password、radio 、 checkbo