HTML4.01教程：表单

html表单允许用户在网页中输入各种信息，是用户与网页进行交互的最佳途径。

一、html表单

html表单由<form>标签定义，它定义了一个输入区域。包括文本字段、复选框、单选框和提交按钮等。

一个简单的html表单格式如下：

<form action="../append/form_button.asp" method="get">   手机号码:                            <!--输入信息的说明-->   <input type="text" name="shouji" />  <!--表单控件（Form Controls）-->   <input type="submit" value="提交" /> <!--表单控件（Form Controls）--> </form>

查看代码效果：HTML4.01教程：表单示例

上述代码中，通过表单控件（Form Controls）输入信息，用得最多的控件是input控件（<input>标签）。用户输入的信息需要action属性指定的文件名来处理，处理的方法由method属性来决定。

method属性有两个值：get和post。

• get方法是将表单控件中的name和value信息经过编码之后，通过URL发送的，在地址栏中可以看到发送的信息。
• post方法是将表单中的内容通过http方式来发送的，在地址栏内看不到表单的提交信息。

那么什么时候用get？什么时候用post呢？如果只是获得或显示数据，建议使用get方法；如果涉及数据的保存或更新，建议使用post方法。

二、html表单（Form）的常用控件（Controls）

在表单的输入区域中最常用的控件如下：

1. 单行文本输入框（input type="text"）

在单行文本输入框中可以输入一些简短的信息，如：数字、字母和汉字等。

固定电话: <input type="text" name="dianhua" />

查看代码效果：HTML4.01教程：表单示例

相关阅读：HTML4.01<input>标签type属性

2. 提交（input type="submit"）

<input type="submit" value="提交" />

查看代码效果：HTML4.01<input>标签type属性submit按钮示例

相关阅读：HTML4.01<input>标签type属性

3. 单选框（input type="radio"）

<input type="radio" name="vehicle" value="Bike" /> Bike <input type="radio" name="vehicle" value="Car" checked="checked" /> Car

查看代码效果：HTML4.01教程：表单单选框（input type="radio"）示例

提示：checked="checked"表示缺省已选的选项。

相关阅读：HTML4.01<input>标签type属性

4. 复选框（input type="checkbox"）

<input type="checkbox" name="vehicle" value="Bike" /> Bike <input type="checkbox" name="vehicle" value="Car" checked="checked" /> Car

查看代码效果：HTML4.01<input>标签type属性checkbox按钮示例

提示：checked="checked"表示缺省已选的选项。

相关阅读：HTML4.01<input>标签type属性

5. 下拉框（select）

（1）一次选择一项：

<select name="vehicle" >   <option value="Bike">Bike   <option value="Car">Car </select>

查看代码效果：HTML4.01教程：表单下拉框（select）示例

相关阅读：HTML4.01<select>（Selection List：选择列表）标签

（2）可以同时选择多项：

<select multiple="multiple" name="cars">

查看代码效果：HTML4.01教程：表单下拉框同时选择多项（multiple）示例

如果要使用复选，加muiltiple即可。按下Ctrl键即可实现多选。

相关阅读：HTML4.01<select>标签multiple属性

6. 多行输入框（textarea）

<textarea cols="50" rows="5" name="cars"></textarea>

查看代码效果：HTML4.01教程：表单多行输入框（textarea）示例

相关阅读：HTML4.01<textarea>（Multiline Text Input：多行文本输入区）标签

7. 密码输入框（input type="password"）

<input type="password" name="pwd" />

查看代码效果：HTML4.01<input>标签type属性password按钮示例

相关阅读：HTML4.01<input>标签type属性

8. 图片提交（input type="image"）

<input type="image" src="../append/20111004.jpg" alt="Submit" />

查看代码效果：HTML4.01<input>标签src属性示例

相关阅读：HTML4.01<input>标签src属性

三、相关阅读

• HTML4.01<form>（Form：表单）标签
• HTML4.01<input>（Input Form Control：表单输入控件）标签
• HTML4.01<textarea>（Multiline Text Input：多行文本输入区）标签
• HTML4.01<select>（Selection List：选择列表）标签
• HTML4.01<option>（Option in Selection List：下拉菜单选项）标签