HTML表单使从HTML文档阅读器获取输入成为可能。这对于许多事情很有用，例如用户注册新闻信，提供有关网站的反馈或者键入在线购买的产品的送货地址。

表单元素

HTML表单包含在form元素中。外观如下：

<form>
</form>

HTML4具有一组可以使用的表单字段。有：

• 文本域
• 文字区
• 选框
• 单选按钮
• 选择框
• 档案栏位
• 按钮
• 图片按钮
• 提交按钮

这些表单字段大多数使用input元素，但是某些表单字段具有其自己的元素。这是显示所有表单字段的快速示例：

<form>
    <input type="text">              <br>
    <textarea></textarea>            <br>
    <input type="checkbox">          <br>
    <input type="radio">             <br>
    <select>
        <option>Choose this</option>
        <option>Or this</option>
    </select>                        <br>
    <input type="file">              <br>
    <input type="button" value="Click Me" >               <br>
    <input type="submit" value="Submit Form">             <br>
    <input type="image"  src="/images/html4/forms-image-button.png">  <br>
</form>

上面的示例使用每个HTML表单字段之一创建一个表单。注意如何在每个表单字段之后添加一个" br"(换行符)元素。这样做是为了使每个表单字段都显示在其自己的行上。要格式化更好的格式，我们可以将其放入HTML表中。

这是表单字段在浏览器中的外观：

选择这个或者这个

以下各节将更详细地描述每个表单字段。

在HTML5中，有几个新的表单字段。我们可以在我的HTML5表单字段教程中看到它们。

文本域

文本字段可用于键入单行文本。这是文本字段HTML元素的外观：

<input type="text">

这是它在浏览器中的外观：

文本字段具有以下属性：

这是使用其中一些属性的示例文本字段：

<input type="text"
       value="Default Text"
       size="20"
       maxlength="15"
>

这是文本字段在浏览器中的外观：

请注意，最初显示在文本字段中的默认文本。还要注意，我们在文本字段中不能输入超过15个字符。

文字区

" textarea"元素用于创建类似于文本字段的文本表单字段。文本字段和文本区域之间的区别在于，文本区域可以包含多行文本。这是一个例子：

<textarea></textarea>

这是文本区域在浏览器中的外观：

textarea元素具有以下属性：

这是一个使用rows'和cols`属性的例子：

<textarea rows="5" cols="20" wrap="off"></textarea>

这是文本区域在浏览器中的外观：

选框

复选框是小方块，HTML文档的读者可以单击它们。一次单击复选框时，复选框中会出现一个小勾号。然后，该复选框被"选中"。如果单击选中的复选框，则复选标记再次消失。这是HTML中复选框的示例：

<input type="checkbox">

这是该复选框在浏览器中的外观：

尝试单击复选框，看看会发生什么。

该复选框具有以下属性：

这是使用上述某些属性的复选框：

<input name="receiveEmail" type="checkbox" checked>

这是该复选框在浏览器中的外观：

单选按钮

单选按钮看起来有点像复选框，只是单选按钮是圆形的。此外，单选按钮通常会成组出现，我们只能其中选择一个单选按钮。这是HTML中单选按钮的示例组：

<input type="radio" name="theChoice" value="1"> No 1. <br/>
<input type="radio" name="theChoice" value="2"> No 2. <br/>
<input type="radio" name="theChoice" value="3"> No 3. <br/>

这是单选按钮在浏览器中的外观：

否1.否2.否3.

尝试单击单选按钮，然后注意一次只能选择一个按钮。

" name"属性定义了哪些单选按钮在一个组中属于同一组。具有相同名称的所有单选按钮都属于相同的单选按钮组。在属于同一组的单选按钮中，任何时候都只能选择一个。

单选按钮元素具有以下属性：

选择框

选择框(也称为下拉框)是可以选择一个或者多个项目的项目列表。这是一个选择框在HTML中的外观：

<select>
    <option>Choice 1</option>
    <option>Choice 2</option>
    <option>Choice 3</option>
</select>

这是选择框在浏览器中的外观：

选择1选择2选择3

选择框中的每个项目都包含在一个嵌入的option元素内。如果我们希望预先选择其中一个选项，只需将" selected"属性放在相应的" option"元素内即可。这是一个例子：

<select>
    <option value="1">Choice 1</option>
    <option value="2">Choice 2</option>
    <option value="3" selected>Choice 3</option>
</select>

这是选择框在浏览器中的外观。请注意，第三个选项是预选的：

选择1选择2选择3

select元素具有以下属性：

option元素具有以下属性：

文件字段

在将文件上传到服务器时使用文件字段。表单字段的外观如下：

<input type="file" >

这是文件字段在浏览器中的外观：

如果单击"浏览"按钮，将打开一个文件对话框，我们可以其中选择要上传的文件。

为了使文件上载正常工作，form元素需要将其enctype属性设置为multipart / form-data。这是HTML的外观：

<form action="fileReceiver.jsp" method="post"
      enctype="multipart/form-data">

    <input type="file" name="theFile">
</form>

如我们所见，form元素现在已经设置了enctype属性。还要注意，文件字段有一个名称。这用于标识服务器端的文件字段。

文件字段具有以下属性：

注意accept属性。此属性可用于告诉文件对话框服务器可以接受的文件类型(MIME类型)，并在文件对话框中显示哪种类型。有关mime类型的完整列表，请查看IANA的Mime Media Types列表。

按钮

按钮表单字段创建一个按钮，HTML文档的读者可以按下该按钮。为了在按下按钮表单字段时发生某些事情，我们需要添加一个JavaScript事件监听器。这是一个按钮HTML示例：

<input type="button" value="Click me" onclick="alert('you clicked me!');">

按钮在浏览器中的外观如下。尝试单击它。

如果单击该按钮，它将显示一个JavaScript警报框，并显示文本"我们单击了我！"。

如果我们没有将JavaScript单击处理程序添加到按钮，则单击该按钮时不会发生任何事情。

该按钮具有以下属性：

提交按钮

提交按钮是将表单及其所有值提交到服务器的按钮。这是HTML中的提交按钮的外观：

<input type="submit" value="Submit Form">

这是"提交"按钮在浏览器中的外观：

当我们单击上方的提交按钮时，没有任何反应，因为提交按钮不在表单内。如果"提交"按钮位于表单内部，则该表单将被提交到服务器，并且通常会显示一个新页面。

提交按钮具有以下属性：

图像按钮

图像按钮是一个提交按钮，它显示可点击的图像而不是标准的HTML按钮。我们可以使用任何图像作为按钮，但是我们应该选择对HTML文档的读者有意义的图像。这是图像按钮在HTML中的外观：

<input type="image" src="/images/html4/forms-image-button.png">

图像按钮在浏览器中的外观如下：

请注意，鼠标光标悬停在图像上时会发生变化，就像鼠标悬停在链接上时一样。那是因为我们可以单击图像。但是，单击图像没有任何反应，因为图像按钮未嵌套在表单中。如果是这样，则该表单将已经提交，就像带有"提交"按钮一样。

注意：使用图像按钮而不是提交按钮时，某些浏览器的行为略有不同。使用提交按钮，我们通常还可以在表单字段处于焦点状态时按键盘上的Enter键，以使浏览器提交表单。如果使用图像按钮，则无法使用。

图像按钮具有以下属性：

提交表格

我们可以通过三种不同的方式提交表单：

• 通过单击提交按钮或者图像按钮。
• 当表单字段具有焦点时(文本区域除外)，单击Enter。
• 通过JavaScript，通过调用form.submit()函数。

提交表单后，表单字段将发送到" form"元素" action"属性内列出的URL。这是一个例子：

<form action="http://tutorials.jenov.com/html4/submit-form.jsp">

</form>

提交此表单后，表单字段的值将打包为名称，值对，并发送到URLhttp：// tutorials.jenov.com / html4 / submit-form.jsp

我们可以使用两种方法提交表单。实际上，还有更多，但是这两个是最常见的：

GET和POST

• GET
• POST

当我们使用GET时，表单字段会添加到表单" action"属性内列出的URL后面。

使用POST时，表单字段会打包到发送到服务器的HTTP请求的正文中。因此，表单字段(参数)在浏览器将表单发送到的URL中不可见。

我们可以在" method"属性中指定要使用的方法。这是一个例子：

<form method="POST"
      action="http://tutorials.jenov.com/html4/submit-form.jsp">

</form>

在服务器端，我们需要一些动态脚本(Java，C.NET，PHP等)来接收并处理表单。这种脚本的外观不在本文讨论范围之内。

表格的表格布局

默认情况下，form元素不提供表单的任何布局。但是，我们可以使用HTML表来布局表单，因此表单看起来更好。这是一个示例表格：

这是生成此表单所需的HTML：

<form action="..." method="POST">
  <table cellpadding="5" cellspacing="0">
    <tr>
      <td>Name</td>
      <td><input type="text" name="name"></td>
    </tr>
    <tr>
      <td>Email</td>
      <td><input type="text" name="email"></td>
    </tr>
    <tr>
      <td valign="top">Gender</td>
      <td>
        <input type="radio" name="gender" value="male">  Male <br/>
        <input type="radio" name="gender" value="female"> Female <br/>
      </td>
    </tr>
    <tr>
      <td></td>
      <td>
        <input type="submit" value="Submit Form">
      </td>
    </tr>
  </table>
</form>

每个表单字段都显示在其自己的表行中，并带有描述在该表单字段中键入内容的标签。标签显示在表的第一列中，表格字段显示在表的第二列中。