hemiao3000

# 表单元素

对于后端程序员而言，表单元素是最重要的元素。

在现实生活中，表单是一个含有空白区域供你填写的文档。HTML 借助这个概念定义了一类元素，这些元素可以让网站收集访问者的信息。这些元素有个『额外』的名称：表单控件 。

注意

表单控件是一套元素的总称，而非单指某一个元素。

从逻辑作用上分类，表单元素分为：

  • 要用到键盘的：供用户输入、填写文本信息。这类表单元素有：单行文本框、密码框、文本域。

  • 要用到鼠标的：供用户进行选择。这类表单元素有单选按钮、复选按钮、下拉列表。

  • 按钮：这类表单元素有提交按钮、重置按钮、图片按钮。

所有的表单控件都 必须 位于 <form> 元素中，每个 <form> 元素都应该设置其 action 属性，通常还要设置 method 属性。

  • action 属性的值是服务器上一个 URL，表示本页面所收集的用户信息提交到何处。

  • method 属性的值有两种：get 和 post， 表示提交数据的方式。默认提交方式是 get 。

<form> 元素的 action 属性和 method 属性不会影响到其显示效果。它们两个是用于与向后台服务器提交数据的元素。

使用 get 方法提交表单数据时，表单中的值被附加在由 action 属性所指定的 URL 的末尾。使用 post 时，表单中的值会放在 HTTP 头信息中进行发送。

简短的、不敏感的数据可以使用 get 方式提交（例如用于查询和删除的数据）否则就使用 post 方式提交（例如用于新增和修改的数据）。

# 1. 文本输入

<input> 是元素用来创建多种不同的表单控件，其 type 属性值决定了它要创建哪种控件。

当用户向表单中输入信息时，服务器需要知道每条数据来源于哪个表单控件。每个表单控件都需要一个 name 属性，它的 值 将作为发送到后台数据中的『键值对』中的 键 。

<input type="text"> 当 type 属性值为 text 时，<input> 元素会创建一个单行文本框。

可以使用 maxlength 属性来限制用户在文本区域中输入的字符的数量。它的值是用户可以输入字符的最大数量。

<input type="password"> 当 type 属性值为 password 时，<input> 元素会创建一个和单行文本框类似的输入框，唯一不同的是输入的文字会被掩盖起来。

密码框也有 name 和 maxlength 属性可用。

name 属性的 值 将作为发送到后台数据中的『键值对』中的键。

<textarea> 元素用来创建多行文本框，与 <input>元素不同，它并非空元素，其起始标签和结束标签之间可以有文本内容，这些内容在页面上会显示在文本框中。

# 2. 选择

<input type="radio">，单选按钮只让用户从一系列选项中选择其中一个，即多选一。多选一的关键在于，让多个单选按钮的 name 属性值一样。

name 属性的 值 将作为发送到后台数据中的『键值对』中的 键 。

checked 属性值是一个 boolean 属性值（本质上是一个字符串类型，只不过该字符串只能是 "true" 或者 "false" 两者之一），它用来表示本单选按钮初始状态是否被选中，一组单选按钮最多仅有一个使用本属性。

<input type="checkbox">，复选框和单选框类似，不同的是它允许多个同时被选中。它的 name 属性、value 属性 和 checked 属性，与单选框基本相同。

<select> 被称作下拉列表框（也被称为选择框），它让用户在一个下拉列表中选择其中的一个选项。<select> 元素用来创建下拉列表框，其中必须包含至少两个 <option> 元素。

<select name="...">
    <option value="...">...</option>
    <option value="...">...</option>
</select>

  • <select> 元素的 name 属性的 值 将作为发送到后台数据中的『键值对』中的键。

  • <option> 元素的 value 属性的 值 将作为发送到后台数据中的『键值对』中的值。

一组 <option> 选项中，仅有一个可用 selected 属性，表示该选项默认被选中。

# 3. 按钮

从功能上分，按钮分为三种：

  • 提交（Submit）按钮
  • 重置（Reset）按钮
  • 普通按钮

使用 <input> 元素来创建按钮时，它们分别对应 type 属性值为：submit、reset 和 button 。

提交按钮会导致表单数据的提交；重置按钮会让表单中的数据回复为初始值（如果有的话）；普通按钮需要结合 JavaScript 使用，否则点击时无任何效果。

这三种按钮都可用 value 属性，其值为按钮上所显示的文字信息。

HTML 新引入了 <button> 元素用以专门表示按钮。<button> 按钮是双标签元素，其中文字内容为按钮上所显示的文字信息。

建议使用 <button> 元素，而非 <input> 元素来表示按钮。

# 4. 其他控件

<input type="hidden"> 隐藏表单控件不会在页面上显示，但是提交表单时它的数据也会提交至服务器。

在使用表单控件时，常常会需要在表单控件旁边放置文本信息来描述它的作用。此时可以使用 <label> 元素。

可以通过两种方式来使用 <label> 元素：

  • 将文本内容和表单元素都『包』在 <label> 元素中。

  • 与表单控件分开，使用 <label> 的 for 属性来指明与表单控件的关联关系。for 属性的值是与 <label> 有关联关系的表单控件的 id 属性值。

可将多个表单控件至于一个 <fieldset> 元素中，逻辑上意味着这些表单控件是一个有关联的整体。外观上，它们会被一个边框包围着。

<fieldset> 元素的第一个子元素必为 <legend> 元素，<legend> 所包含的文字内容将成为这个整体的标题，并显示在页面上。

<form>
    <fieldset>
        <legend>健康信息</legend>
        <label>
            身高：<input type="text" />
        </label>
        <label>
            体重：<input type="text" />
        </label>
    </fieldset>
</form>

← 元素的分类 →