1.3 HTML常用表单标签
在 HTML 的布局标签中，表单标签是使用频率最高的一个。它可以把一组信息用表格的形式表示出来。这一节我们就来看表单元素是如何实现的。
1.3.1 表单元素
在HTML的标签库中有<form></form>这样一个成对标签，它用于向一个目标地址提交一些数据。在这个标签中，我们可以设计文本框、单选框、复选框和按钮等一些元素用于获取数据，这些元素都称为表单元素。下面我们介绍几个最常用的表单元素。
1．文本框
在HTML页面中最常用的就是一个单行的文本框了。语法格式如下所示：
<input type="text" name="text">
在浏览器上的显示效果如图1.17所示。
图1.17 文本框
2．单选框
单选框就是在并列的几个值中只能选择一项。对于一组元素，必须保证它们的name属性值相同。语法格式如下所示：
<input type="radio" value="值1" name="dxk">
<input type="radio" value="值2" name="dxk">
在浏览器上的显示效果如图1.18所示。
图1.18 单选框
3．复选框
当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。对于同一组值，必须要保证它们的name值相同。语法格式如下所示：
<input type="checkbox"value="值1"name="dxk">
<input type="checkbox"value="值2"name="dxk">
在浏览器上的显示效果如图1.19所示。
图1.19 复选框
4．提交按钮
当表单要提交时，单击此按钮，表单就会将表单中所选数据提交到目的地址。语法格式如下所示：
<input type="submit"value="提交">
在浏览器上的显示效果如图1.20所示。
图1.20 提交按钮
除了上述介绍的几个元素外，表单还有其他很多的元素，例如重置按钮、密码框和下拉列表等。
【示例1.6】用表单元素建立一个用于用户注册的HTML页面register.html，代码如图1.21所示。
图1.21 register.html示例
1.3.2 表单元素的属性
在这些元素中，有一些共同的属性，即type、name和value。那么这三个属性都有什么作用呢？
· type 属性：表示该元素的类型。有 text（文本框）、checkbox（单选框）和 button（按钮）等值。
· name属性：表示该元素的名称，只能有唯一值。
· value属性：设置该元素的默认值。
下面我们通过一个示例来了解一下这三个属性的作用。
【示例1.7】在表单中将文本框的值通过按钮提交。新建一个HTML文件tijiao.html，代码内容如图1.22所示。
图1.22 tijiao.html示例
用浏览器打开后如图1.23所示。
图1.23 HTML提交文件
我们在文本框中输入值：test，单击“botton”按钮。这时我们在浏览器的地址栏中会发现如图1.24所示的结果。
图1.24 提交表单后浏览器地址栏
与提交表单之前相比，字符串后面多了“?hobby=test&tijiao=botton”，这表示，在我们提交表单后，表单会将表单元素中文本框和按钮属性的值以“key=value”的形式附加到地址字符串的后面，之间用符号“&”隔开。
1.3.3 表单中添加目的地址
在示例1.6中我们可以看到，在form表单中并没有目的地址属性。表单提交仅仅是包含着数据但并没有提交到某个页面。在这里我们在 form中添加 action 这个属性。这个属性的作用就是表示表单要提交的目的地址。语法格式如图1.25所示。
图1.25 表单提交目的地址的语法格式
【示例1.8】在示例1.7的基础上，新建一个HTML页面action.html，并且添加action属性，其详细代码如图1.26所示。
图1.26 action.html示例
然后我们对tijiao.html进行修改，修改后代码tijiao2.html如图1.27所示。
图1.27 tijiao2.html示例
将tijiao2.html与action.html文件放入同一级目录下。打开tijiao2.html，单击“botton”按钮。运行后结果如图1.28和图1.29所示。
图1.28 运行tijiao2.html并输入
图1.29 单击按钮后的结果
1.3.4 表单中添加数据的提交方式
当我们的数据可以提交到目的地址后，疑问也随之产生，就是数据是以何种方式提交的呢？是通过浏览器的地址栏中的附加到地址字符串方式提交的吗？还是有其他的方式？
form表单中还有一个属性method。它表示表单中数据的提交方式。它有两个可选值：POST和GET。
· POST：将数据打包，以隐含的方式传递。
· GET：附加到URL上，通过URL来传递数据。
示例1.7与1.8表示，虽然没有method属性，但是浏览器会默认的用GET方式进行传递。
【示例1.9】将示例1.8的tijiao2.html做修改，添加method属性为POST。修改后的代码如图1.30所示。
图1.30 修改后的tijiao2.html代码
运行后的结果如图1.31所示。
图1.31 以POST方式提交表单数据
我们可以对比一下两次地址栏中的地址信息，如图1.32所示。
图1.32 两种传递方式地址栏的区别
我们可以发现，浏览器的地址栏中不再有附加的字符串信息了。这表明POST传递方式是以不同于GET的方式传递数据的。