表单

表单的构成

在HTML中，一个完整的表单通常由表单控件、提示信息和表单域3个部分构成

对表单构成中的表单控件、提示信息和表单域的具体解释如下：

• 表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、搜索框等。
• 提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
• 表单域：相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过它处理表单数据所用程序的url地址，定义数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

创建表单

在HTML5中，<form></form>标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，<form></form>中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：

<form action="url地址" method="提交方式" name="表单名称">
    ​    各种表单控件
</form>

在上面的语法中，<form>与</form>之间的表单控件是由用户自定义的，action、method和name为表单标签<form>的常用属性，分别用于定义url地址、表单提交方式及表单名称，具体介绍如下。

1. action属性

在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。例如：

<form action="form_action.asp">

表示当提交表单时，表单数据会传送到名为"form_action.asp" 的页面去处理。

action的属性值可以是相对路径或绝对路径，还可以为接收数据的E-mail邮箱地址。例如：

<form action=mailto:htmlcss@163.com>

表示当提交表单时，表单数据会以电子邮件的形式传递出去。

2. method属性

method属性用于设置表单数据的提交方式，其取值为get或post。在HTML中，可以通过<form>标签的method属性指明表单处理服务器数据的方法，示例代码如下：

<form action="form_action.asp" method="get">

在上面的代码中，get为method属性的默认值，采用get方法，浏览器会与表单处理服务器建立连接，然后直接在一个传输步骤中发送所有的表单数据。

如果采用post方法，浏览器将会按照下面两步来发送数据。首先，浏览器将与action属性中指定的表单处理服务器建立联系，然后，浏览器按分段传输的方法将数据发送给服务器。

另外，采用get方法提交的数据将显示在浏览器的地址栏中，保密性差，且有数据量的限制。而post方式的保密性好，并且无数据量的限制，所以使用method="post"可以大量的提交数据。

3. name属性

表单中的name属性用于指定表单的名称，而表单控件中具有name属性的元素会将用户填写的内容提交给服务器。创建表单的示例代码如下：

<!--表单域-->
<form action="http://www.mysite.cn/index.asp" method="post" name="biao">  
    <!--提示信息-->
    ​账号：
    <input type="text" name="zhanghao" />          <!--表单控件-->
    <!--提示信息-->
    密码：    
    <input type="password" name="mima" />          <!--表单控件-->
    <input type="submit" value="提交"/>            <!--表单控件-->      
</form>

上述示例代码即为一个完整的表单结构，其中<input>标签用于定义表单控件，对于该标签以及标签的相关属性，在后面会具体讲解，这里了解即可。示例代码对应效果如图1所示。

表单控件

1. input控件

浏览网页时经常会看到单行文本输入框、单选按钮、复选框、提交按钮、重置按钮等，要想定义这些元素就需要使用input控件，其基本语法格式如下：

<input type="控件类型"/>

<input />标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。 除了type属性之外，<input />标签还可以定义很多其他的属性，其常用属性如表1所示。

2. textarea控件

当定义input控件的type属性值为text时，可以创建一个单行文本输入框。但是，如果需要输入大量的信息，单行文本输入框就不再适用，为此HTML语言提供了<textarea></textarea>标签。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：

<textarea cols="每行中的字符数" rows="显示的行数">
​    文本内容
</textarea>

在上述代码中，cols和rows为<textarea>标签的必备属性，其中 cols用来定义多行文本输入框每行中的字符数， rows用来定义多行文本输入框显示的行数，它们的取值均为正整数。

值得一提的是，除了cols和rows属性外，<textarea>标签还有几个可选属性，分别为disabled、name和readonly，如表1所示。

3. select控件

使用 select 下拉列表 控件 提供多个选择项 供用户选择 , 比 单选按钮 要节省更多的空间 ;

select 下拉列表 控件 语法 : 在 <select> 标签中 , 不能为空 , 至少要有一个 option 选项 ;

<select>
  <option selected="selected">下拉选项1</option>
  <option>下拉选项2</option>
  <option>下拉选项3</option>
</select>

• 如果 option 标签中添加了 selected="selected" 属性 , 该选项是默认选项 ;
• 提交的时候，如果没有给option设置value属性，提交的就是option标签之间的文本，但如果设置了option的value属性，提交的就是value的值
• multiple 表示下拉选框可以多选，按住Ctrl就可以选择多个选项