HTML 教程之 HTML 表单元素

HTML 中的表单元素支持你通过网页来收集一些用户的信息，例如用户名、密码、电话、邮箱地址等。表单接收用户输入的信息之后，你可以选择将其发送到后端的应用程序，后端应用程序将根据定义好的业务逻辑来对表单传递来的数据进行处理。

也就是说，HTML 表单用于收集不同类型的用户输入，以传递给后端使用。

表单

表单属于 HTML 文档的一部分，是一个包含表单元素（表单控件）的区域，其中包含了如输入框、文本域、下拉列表、单选框、复选框、提交按钮等不同的表单控件。

HTML 表单中，允许用户通过修改表单中的元素（例如输入文本，或选择某个选项等）来完成表单，通过表单中的提交按钮将表单数据提交给后端程序（后台）。

在 HTML 中创建表单需要用到 <form> 标签，其基础语法格式如下所示：

<form action="URL" method="GET|POST">
.   

input elements        

.
</form>

其中，action 属性用来指明要将表单提交到何处（默认为当前页面），也可以是另一个页面（HTML 5 中非必须）；method 属性表示使用哪种方式提交数据，支持 GET && POST 两种方式，GET 为默认提交方式。

关于 GET && POST Method >>>

Method 方法规定如何发送表单数据（Form Date），表单数据会被发送到在 action 属性中规定的页面中。其中表达数据可被作为 URL 参数的形式（GET）来发送，或作为 HTTP Post 事务的形式（POST）来发送。

[1] >>> 关于 GET 的注释

• 将表单数据以名称/值对的形式附加到 URL 参数中进行发送；
• 发送的 URL 的长度是有限的；
• GET 更适用于非安全数据，例如查询条件。绝不要使用 GET 来发送敏感数据（数据 URL 中可见）！
• 对于用户希望加入书签的表单提交很有用。

[2] >>> 关于 POST 的注释、

• 将表单数据附加到 HTTP 请求的 Body 内（数据 URL 中不可见）进行发送；
• 发送的 URL 没有长度限制；
• 通过 POST 提交的表单不能加入书签。

---

表单属性

上面 action 和 method 是 <form> 标签最常用的两个属性。

HTML 为 <form> 标签提供了一些专用的属性，如下：

[1] >>> 属性：accept

Form 元素的 accept 属性规定能够通过文件上传进行提交的 服务器接受的文件类型。其属性值为：MIME_type 类型。

HTML5 中不再支持该属性。HTML 4 中要避免使用该属性作为验证工具，应该在服务器端验证文件上传。

[2] >>> 属性：accept-charset

Form 元素的 accept-charset 属性用于设置表单数据的字符集（默认为 HTML 文档字符集）。

例如，你可以设置：accept-charset="ISO-8859-1" 。

[3] >>> 属性：autocomplete

Form 元素的 autocomplete 属性用于设置是否启用表单的自动完成功能（默认开启），为 HTML 5 新属性。

当用户在字段开始键入时，浏览器会基于之前键入过的值给出输入预测提示，你可以选择选填或者键入新的值。

autocomplete 其可选属性值为：on（开启） Or off（警用）。

[4] >>> 属性：enctype

Form 元素的 enctype 属性设置在提交表单数据之前如何对数据进行编码（适用于 method=”post” 的情况）。

autocomplete 其可选属性值为：application/x-www-form-urlencoded（默认，URL 编码格式，在发送前对所有字符进行编码（将空格转换为 “+” 符号，特殊字符转换为 ASCII HEX 值）） Or multipart/form-data（不对字符编码。当使用有文件上传控件的表单时，该值是必需的） Or text/plain（将空格转换为 “+” 符号，但不编码特殊字符）。

[5] >>> 属性：name

Form 元素的 name 属性用来设置表单的名称，可被 CSS 样式表或 Javascript 选择，这里不用多说。

[6] >>> 属性：novalidate

Form 元素的 novalidate 属性表示在提交表单时不进行验证，为 HTML 5 新属性。

用法如下：

<form ... novalidate="novalidate">
    ...
</form>

[7] >>> 属性：target

Form 元素的 novalidate 属性设置在何处打开 action 属性设定的链接，其属性值如下：

<!-- 默认为 _self -->
<form target="_blank|_self|_parent|_top|framename">
    ...
</form>

和链接打开方式不同的是，增加了一个 framename 属性，表示在指定的 iframe 中打开。

---

表单控件

Form 元素中可以包括以下一个或多个控件（表单元素）：

<label> && <input> && <textarea> && <select> && <option> && <button> && <optgroup> && <fieldset> && <legend> >>> HTML 5 新增 >>> <datalist> && <keygen> && <output>。

上述表单控件可分为三类：

• 输入元素；
• 下拉元素
• 按钮元素；
• HTML 5 新增元素。

输入元素

<input> 元素是最重要的表单元素，多数情况下被用到的表单标签是就是输入标签。

输入元素根据输入类型的不同（由 type 属性来定义），具有不同的 HTML 语义。例如常见的：文本框、密码框、单选框、复选框、按钮等等。其基本语法格式如下：

<form>
    <input type="input_element_type", name="input_element_name" />
</form>

其中，type 属性用来定义输入元素类型，name 属性用来定义输入元素名称。

---

文本框

当用户需要输入一行普通文本内容时，就需要用到文本框（type="text"）。示例如下。

示例一 >>> 普通文本框

<form>
    Text1: <input type="text" name="input_text1" />
</form>

示例二 >>> 规定以字符数计的输入框的可见宽度

<form>
    Text2: <input type="text" name="input_text2" size="10">
</form>

示例三 >>> 规定输入框允许的最大字符数

<form>
    Text3: <input type="text" name="input_text3" size="10">
</form>

示例四 >>> 规定输入框内容初始值

<form>
    Text4: <input type="text" name="input_text4" value="default value">
</form>

示例五 >>> 规定输入框内容提示信息（HTML5）

<form>
    Text5: <input type="text" name="input_text5" placeholder="Please input user name">
</form>

示例六 >>> 规定在提交表单之前输入框中必需填写内容（HTML5）

<form>
    Text5: <input type="text" name="input_text5" placeholder="Please input user name">
</form>

如果要输入多行文本内容你可以参考下一章节的多行文本域（textarea）。

---

密码框

当用户需要输入密码字段时，就需要用到密码框（type="password"），输入数据会自动显示为星号。示例如下：

Passwd: <input type="password" name="input_text7" placeholder="Please input your password" required="required">

---

单选框

当页面需要单选框功能时，就需要用到单选框（type="radio"）。其语法格式如下：

<input type="radio" value="radio_value">

其中，value 用来定义可发送到服务器的单选框元素的值。

来看一个示例：

Sex:
<input type="radio" value="male"> Male
<input type="radio" value="female">Female

你会发现，用于表示性别的单选框，男女都可以选，也并不是单选框啊？！！这就涉及到单选框 分组 的概念了。

分组 是指：多个单选框，都在一个分组里，同一时间，只能选中一个单选框。这才是真正意义上我们想要的单选框功能，需要借助单选框的 name 属性来实现分组。

Sex:
<input type="radio" name="sex" value="male"> Male
<input type="radio" name="sex" value="female">Female

再尝试一下，是不已经可以了~~~

默认选中某个属性 >>>

并且，很多时候，我们想要实现页面加载后，默认选中某个单选框，需要通过 checked 属性实现：

Sex:
<input type="radio" name="sex" value="male" checked="checked"> Male
<input type="radio" name="sex" value="female">Female

checked 属性规定在页面加载时应该被预先选定的 <input> 元素。并且，只针对 type="checkbox" 或者 type="radio" 输入元素。

---

复选框

当页面需要复选框功能时，以支持用户从若干给定的选择中选取一个或若干选项，就需要用到单选框（type="checkbox"）。

类似于上面的单选框，其示例代码如下：

Language:
<input type="checkbox" name="language" value="Java" />Java
<input type="checkbox" name="language" value="Python" />Python
<input type="checkbox" name="language" value="HTML" checked="checked" />HTML
<input type="checkbox" name="language" value="CSS" checked />CSS
<input type="checkbox" name="language" value="Javascript" checked />Javascript

其中，name 属性表示可发送到服务器的当前复选框元素名称，value 用来定义复选框元素的值，checked 属性表示默认选中。

---

普通按钮

输入元素类型中也支持定义按钮，你可以使用 type="button" 来定义一个普通按钮（不具有提交功能）。

其示例代码如下：

<form method="get">
    账号：<input type="text" name="username"> <br />
    密码：<input type="password" name="passwd"> <br />
    <input type="button" value="Login">
</form>

点击 Login 按钮后，你会发现表单并未提交！！！

---

提交按钮

跟多的时候，页面需要的是一个提交按钮。

输入元素类型中也支持定义提交按钮（type="submit"），可用于提交表单，把数据提交到服务端。

其示例代码如下：

<form method="get">
    账号：<input type="text" name="username"> <br />
    密码：<input type="password" name="passwd"> <br />
    <input type="submit" value="Login">
</form>

点击 Login 按钮后，你会发现表单会被进行提交！！！

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作（action）属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

---

重置按钮

输入元素类型中也支持定义重置按钮（type="reset"），用于将输入框的改动复原。

其示例代码如下：

<form method="get">
    账号：<input type="text" name="username" placeholder="Please Enter User Name" /> <br />
    密码：<input type="password" name="passwd"> <br />
    <input type="submit" value="Login"> <input type="reset" value="Reset">
</form>

---

图像提交

输入元素类型中也支持使用图像作为提交按钮进行表单的提交（type="image"），示例代码如下：

<form method="get">
    账号：<input type="text" name="username" placeholder="Please Enter User Name" /> <br />
    密码：<input type="password" name="passwd"> <br />
    <input type="image" src="images/kawayi.jpg" width="200px" height="150px">
</form>

其中，src 属性用于指定图片源，width 和 height 属性用于定义图像尺寸。

---

文本域

HTML 中使用 <textarea> 标签来定义一个多行的文本输入控件，可容纳无限数量的文本，有滚动条。其语法格式如下：

<textarea name="textarea1" rows="10" cols="30">
This is a textarea.
</textarea>

其中，rows && cols 属性用来定义文本区域内可见的行、列数。

文本域元素，也支持：autofocus(自动聚焦)、disabled(禁用文本区域)、maxlength(最大字符数)、placeholder(提示)、readonly(只读)、wrap(换行)等属性。

---

其它输入控件

输入元素中还提供其它类型的输入控件，你可以尝试下现实效果，如下所示：

<form name="form_test" method="get">
    <input type="color"> <br />
    <input type="date"> <br />
    <input type="datetime"> <br />
    <input type="month"> <br />
    <input type="number"> <br />
    <input type="range"> <br />
    <input type="search"> <br />
    <input type="tel"> <br />
    <input type="url"> <br />
    <input type="time"> <br />
    <input type="week"> <br />
    <input type="hidden"> <br />
    <input type="email"> <br />
    <input type="file"> <br />
    <input type="datetime-local"> <br />
</form>

---

下拉元素

HTML 中 <select> 标签来实现下拉列表功能，需要和 <option> 标签配合使用（定义列表中的可用选项）。

其示例代码如下：

<select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel" selected="selected">Opel</option>
    <option value="audi">Audi</option>
</select>

其中，其中，value 用来定义可发送到服务器的单选框元素的值，selected 属性用来指定页面加载后默认选中的下拉列表选项。

---

按钮元素

上面我们通过输入元素定义具有不同功能的按钮，HTML 中有专门的按钮标签（<button>）以支持定义不同类型的按钮，功能更为丰富。

和输入元素类似的，其支持使用 type 属性来规定按钮的类型，支持：submit(提交按钮) && button(普通按钮) && reset(重置按钮)。不同的是，按钮元素是一个双标签，其内容可以文字、图片等，功能更加丰富。其语法格式如下：

<button name="button_name" type="button" value="text" disabled="disabled">Login</button>

其中，disabled 属性用于规定禁用按钮，其它属性同输入元素。

HTML 表单中使用 <button> 元素，不同的浏览器可能会提交不同的按钮值。请使用 <input> 在 HTML 表单中创建按钮。

HTML5 中的新增按钮通用属性：autofocus（自动获得焦点）、form（规定按钮属于一个或多个表单）。

HTML5 中的新增提交按钮属性：formaction（覆盖表单元素的 action 属性）、formenctype（覆盖表单元素的 enctype 属性）、formmethod（覆盖表单元素的 method 属性）、formnovalidate（覆盖表单元素的 validate 属性） 以及 formtarget（覆盖表单元素的 target 属性）。

---

HTML 5 新增元素

HTML5 有以下新的表单元素：

• <datalist> 元素；
• <keygen> 元素；
• <output>元素。

可能并不是所有的浏览器都支持HTML5 新的表单元素，但是你可以在使用它们，即使浏览器不支持表单属性，仍然可以显示为常规的表单元素。

Datalist >>>

Datalist 元素用于规定输入域的选项列表，需要绑定到 form 或 input 域使其拥有自动完成功能（提供一些预定选项）。

示例代码如下：

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

关于 <keygen> 元素 && <output> 元素的用法可参考 HTML 5 新表单元素支持。

---