HTML：使用表单

水深无声 2022-06-05 11:13 259阅读 0赞

# 第七章：使用表单 #

表单的用途很多，在制作网页，特别是制作动态网页时常常会用到。表单主要用来收集用户客户端提供的相关信息，使网页具有交互功能。在网页制作的过程中，常常需要使用表单，如会员的注册，网上调查和搜索等等。访问者可以使用如文本域、列表框、复选框以及单选按钮之类的对表单对象输入信息，然后单击某个按钮提交信息。

## **7.1 表单标记form** ##

在网页中```<form>``</form>```标记对用来创建一个表单，即定义表单的开始和结束位置，在标记之间的一切都属于表单的内容。在表单的`<form>`标记中，可以设置表单的基本属性，包括表单的名称、处理程序和传递方法等。一般情况下，表单的处理程序action和传送方法method是必不可少的参数。

### **7.1.1 提交表单action** ###

action用于指定表单数据提交到那个地址进行处理。  
语法：

说明：表单的处理程序是表单要提交的地址，这一地址可以是绝对地址，也可以是相对地址，还可以是其他形式的地址。

### **7.1.2 表单名称name** ###

语法：

说明：name用于给表单命名，这一属性不是表单的必要属性，但是为了防止表单提交到后台处理程序时出现混乱，一般要给表单命名。且表单名称不能包含特殊字符和空格。

### **7.1.3 传送方法method** ###

语法：

表单的method属性是用来制定在数据提交到服务器的时候使用哪种HTTP提交方法，可取值为get或post。  
get：表单数据被传送到action属性制定的URL，然后这个新URL被送到处理程序上。  
post：表单数据被包含在表单主题中，然后被送到处理程序上。

### **7.1.4 编码方式enctype** ###

语法：

说明：表单中的enctype属性用来设置表单信息提交的编码方式。为表单定义了MIME编码方式，编码方式的取值如下：

<table> 
 <thead> 
  <tr> 
   <th>enctype的取值</th> 
   <th>取值的含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>application/x-www-form-urlencoded</td> 
   <td>默认的编码方式</td> 
  </tr> 
  <tr> 
   <td>multipart/form-data</td> 
   <td>MIME编码，上传文件的表单必须选择该项</td> 
  </tr> 
 </tbody> 
</table>

### **7.1.5 目标显示方式target** ###

语法：

说明：target用来指定目标窗口的打开方式，表单的目标窗口往往用来显示表单的返回信息。目标窗口的打开方式有4个选项：`_blank,_parent,_self和_top`。如下表所示：

<table> 
 <thead> 
  <tr> 
   <th>选项</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>_blank</code></td> 
   <td>将链接的文件载入一个未命名的新浏览器窗口中</td> 
  </tr> 
  <tr> 
   <td><code>_parent</code></td> 
   <td>将链接的文件载入含有该链接框架的父框架集或父窗口中</td> 
  </tr> 
  <tr> 
   <td><code>_self</code></td> 
   <td>将链接的文件载入该连接所在的同一框架或窗口中</td> 
  </tr> 
  <tr> 
   <td><code>_top</code></td> 
   <td>在整个浏览器窗口中载入所链接的文件，因而会删除所有框架</td> 
  </tr> 
 </tbody> 
</table>

## **7.2 插入表单对象** ##

网页中的表单由许多不同的表单元素组成。这些表单元素包括文字字段、单选按钮、复选框、菜单和列表以及按钮。

### **7.2.1 文字字段text** ###

语法：

说明：用户可以在文字字段内输入字符或者单行文本，该语法中的含义和取值如下：

<table> 
 <thead> 
  <tr> 
   <th>参数类型</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>type</td> 
   <td>用来指定插入那种表单元素，如type = “text”，即为文字字段</td> 
  </tr> 
  <tr> 
   <td>name</td> 
   <td>文字字段的名称，用于和页面中其他控件加以区别。名称由英文或数字以及下划线组成，但有大小写之分</td> 
  </tr> 
  <tr> 
   <td>value</td> 
   <td>用来定义文本框的默认值</td> 
  </tr> 
  <tr> 
   <td>size</td> 
   <td>确定文本框在页面中显示的长度，以字符为单位</td> 
  </tr> 
  <tr> 
   <td>maxlength</td> 
   <td>用来设置文本框中最多可以输入的字符数</td> 
  </tr> 
 </tbody> 
</table>

### **7.2.2 密码域password** ###

语法：

说明：密码域是一种特殊的文字字段，它的各个属性和文字字段是相同的。所不同的是，密码域输入字符以‘\*’显示，该语法中的含义和取值如下：

<table> 
 <thead> 
  <tr> 
   <th>参数类型</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>type</td> 
   <td>用来指定插入那种表单元素</td> 
  </tr> 
  <tr> 
   <td>name</td> 
   <td>密码域的名称，用于和页面中其他控件加以区别。名称由英文或数字以及下划线组成，但有大小写之分</td> 
  </tr> 
  <tr> 
   <td>value</td> 
   <td>用来定义密码域的默认值，以星号‘*’显示</td> 
  </tr> 
  <tr> 
   <td>size</td> 
   <td>确定文本框在页面中显示的长度，以字符为单位</td> 
  </tr> 
  <tr> 
   <td>maxlength</td> 
   <td>用来设置文本框中最多可以输入的字符数</td> 
  </tr> 
 </tbody> 
</table>

### **7.2.3 单选按钮radio** ###

语法：

说明：在单选按钮中必须要设置value的值，对于一个选择列表中的所有单选按钮来说，往往要设置为相同的名称，这样在传递时才能更好的对某一个选择内容进行判断。在一个单选按钮组中只有一个单选按钮可以设置为checked。

### **7.2.4 复选框checkbox** ###

语法：

说明：复选框可以让用户从一个选项列表中选择多个选项。checked参数表示该项在默认的情况下已经被选中。

### **7.2.5 普通按钮button** ###

语法：

说明：`<input type="button"/>`用来定义可点击的按钮，value的取值就是显示在按钮上的文字，在button属性中可以添加onclick来实现一些特殊的功能。

### **7.2.6 提交按钮submit** ###

语法：

说明：提交按钮是一种特殊的按钮，用来实现表单内容的提交。