HTML5 和 CSS3 第 6 部分：使用 HTML5 创建强大的表单

引言

您是否曾经想从访问者那里收集信息，但不确定如何做？也许您有一个想法，但又不确定它是否安全。如果您属于这些类别之一，或者只是想回顾 HTML5 表单的新功能，那么本文适合您。我们将从 Web 表单的基础知识开始。然后，我们将深入探讨构成表单的不同部分。最后，我们将把我们学到的一切整合到一个示例表单中，该表单利用了我们已经学习过的各种元素。一如既往，我们将专注于我们的目标。我们不会绕道而行，以免混淆问题或使其比必要范围更广。让我们立即开始。

基本表单

在网页上捕获信息主要通过 form 标签完成。我们不只是随意地将输入字段、复选框、按钮和其他项目放在页面上，而是使用 form 标签将这些元素分组在一起。这有几个目的。首先，它将表单元素分组在一起。这是一个可见性问题（项目在页面上以分组的形式显示，指示了它们之间的关系），但它也告诉读取您网站的机器这些元素是相关的。请记住，看到您网页的不仅仅是人。其次，将元素分组到表单中可以指示您在提交表单时希望将哪些数据输入发送到服务器。例如，您可以在一页上有两个或多个表单。如果您不使用 form 标签，您将如何指示从哪些输入发送数据？最后，当您的用户在表单的某个输入字段中并按下回车键时，您的页面可以自动提交数据，就像他们按下了提交按钮一样。所以，除了它是“正确的事情”之外，我们使用 form 标签还有很多原因。

好的，到目前为止，我们知道我们需要一个 form 标签，但表单究竟是什么？表单由几个主要部分组成。首先是外层的 form 标签。它将所有输入组合在一起。它还有一些关键属性，用于存储有关表单的重要信息。在 form 标签内部，我们放置一个或多个 input 元素。这些可以是文本框、复选框、单选按钮、下拉列表等。这就是您从最终用户那里捕获信息的地方。最后，我们包含一个或多个按钮来对我们的表单执行操作。

就我个人而言，我是一个视觉型的人。我喜欢看到事物，尤其是使用中的事物，以便更好地理解它。为此，让我们看看一个典型的表单，然后我们可以对其进行剖析。

<form name="userform" action="formprocessor.php" method="post">
    <p>
        First Name: <input name="firstName" type="text" />
    </p>
    <p>
        Last Name: <input name="lastName" type="text" />
    </p>
    <p>
        Over 18: <input name="over18" type="checkbox" />
    </p>
    <p>
        <button name="process" type="submit">Process</button>
        <button name="clear" type="reset">Clear</button>
    </p>
</form>

这样就得到了一个看起来像这样的表单

非常基础，但有很多内容需要深入探讨。让我们直接进入表单的元素。

表单元素

Form 标签

在 form 标签本身上，我们看到它有几个属性。第一个是 name。它标识了页面上的表单以及上传时。接下来是 action 属性。这是表单提交时数据将被发送到的地方。通常，这是一个接受数据然后存储它的服务器端页面。本文是关于表单本身的，所以我们不必担心服务器端处理表单数据。但请注意，这个页面可以是任何类型。它可以是一个纯 HTML 表单、一个 ASP 页面、一个 PHP 页面（就像这个例子一样）或其他什么。最后一个需要注意的属性是 method。在这种情况下，它指定了 POST。HTML 有多种发送数据的方式。这些不同的方法各有其目的和用途。在这种情况下，我们通常会使用 GET 或 POST 方法。简单来说，GET 方法（如果您不指定方法，则为默认方法）将通过 URL 将数据提交到服务器页面。在我们的例子中，它看起来像这样：

/formprocessor.php?firstName=Tim&lastName=Corey&over18=on&process=

请注意 php 页面后面的问号 (?)。它指定后面的项是属性。然后我们有每个字段（按名称）及其值。最后一项 process 是空白的。那是提交按钮。我们稍后会讲到。所以，这就是 GET 的工作原理。对于简单的表单，如搜索框，数据不敏感，这可能会起作用。但是，如果您正在捕获任何用户敏感数据，这并不是一个好主意。这就是 POST 方法的用武之地。

POST 不会将数据放在 URL 中。相反，它将数据作为发送到服务器的信息包的一部分发送。用户不可见。这是一种更安全的方法，在我看来，它应该是发送数据的默认方法。请注意，这并不意味着您的数据无法被捕获。它只是意味着已经完成了保护数据的第一个步骤：数据在页面或 URL 中不可见。下一步将是使用 SSL 来保护数据传输到服务器。同样，这超出了本文的范围，所以我们不会涵盖 SSL 的安装。只需知道包含敏感数据的表单应该放在使用 SSL 的页面上。

GET 和 POST 之间的最后一个区别是数据的大小。URL 最多只能包含 2,000 个字符。这似乎很多，直到您请求用户反馈。一个激动的用户很容易在反馈表中超过 2,000 个字符。如果您尝试使用 GET 方法发送表单数据，您的用户将收到一个难看的错误消息，而您将无法获得该数据。另一方面，POST 不受此限制的影响。这意味着您可以轻松地捕获您的用户意见、他们的图片、文件和其他大型项目。

总而言之，如果您不介意数据显示在 URL 中且数据足够短，则使用 GET。这对于搜索之类的项目很有用，因为用户可以保存 URL 并在以后返回到该页面（因为搜索数据存储在 URL 中）。它不适用于敏感数据或大量数据。POST 对于敏感数据、大量数据以及几乎任何用途都非常棒。但是，它不适合让用户稍后通过保存的 URL 重新创建页面。

Input 标签

Input 标签是捕获数据的地方。在这种情况下，我指定了两种不同类型。第一种是 text 类型。这是您标准的文本框，用于捕获一行信息（例如搜索框、姓名捕获等）。接下来是 checkbox。这是布尔捕获（是或否）。请注意，区别仅在于“type”属性。大多数输入字段都是通过这种方式区分的。我们将在下一节中介绍不同的类型。我所有输入都有的另一个属性是 name 属性。这是用于标识数据所属字段的名称。如果您查看上面我发布的 GET URL，您会看到 firstName、lastName、over18 和 process。熟悉吗？每个都是输入的名称（按钮被视为输入）。显然，这对于识别发送到服务器的数据非常有用。

按钮

从技术上讲，按钮是一种输入类型。事实上，您可以使用 input 元素指定“submit”和“reset”类型，如下所示：

<input name="process" type="submit" value="Process" />
<input name="clear" type="reset" value="Clear" />

这两个 input 元素可以替代按钮，并且它们的工作方式完全相同。

无论您选择哪种方式，submit 和 reset 类型都是特殊的输入类型。submit 类型会将表单上的数据打包并通过指定的 method（GET 或 POST）发送到表单 action 属性中指定的 URL。reset 类型会清除表单数据，并将其重置为加载页面时的状态。submit 按钮是必需的，而 reset 按钮不是。另请注意，虽然 submit 和 reset 是表示每个按钮功能的不错词语，但您可以修改其显示的内容。这是通过设置 value 属性（或在按钮的开始和结束标签之间放置数据）来完成的。在我的例子中，我将 value 设置为 Process 而不是 Submit。修改 submit 按钮的一种常见方法是在搜索表单上将 value 设置为“Search”。这比“Submit”更清晰。

表单输入类型

现在我们已经了解了表单的基本部分，让我们更详细地了解每种输入类型。有很多，所以我将为您提供类型，然后为您提供每种类型的基本说明。对于这些中的大多数，输入字段看起来像标准的文本框，但它具有额外功能。有时区别可能只是语义上的。它可能只是告诉读取页面的机器它是一种特定类型。

• color - 用于选择特定颜色。通常显示为颜色选择器。
• date - 用于选择日期（无时间）。通常会有一个日期选择器附加到此输入字段。您可以键入日期或从列表中选择一个。
• datetime - 用于指定 GMT（格林尼治标准时间）中的特定日期和时间。可以显示为选择器，但通常只显示为文本框。
• datetime-local - 与 datetime 相同，只是该值假定为本地时区。
• email - 用于存储电子邮件地址（如果启用了逗号分隔，则存储电子邮件地址列表）。它强制执行正确的电子邮件地址格式。
• month - 用于存储月份，可选时还存储年份。这可以显示为文本框或下拉列表，其中列出了从一月到十二月。
• number - 只能存储有效的数字。
• password - 这是一个较旧的输入类型，但提及它很重要。它不会在框中显示值，但会在后端存储信息。用户每次按键时只会看到一个星号。
• range - 存储一个数字。它显示一个滑块，用于选择数字。
• search - 仅用于样式和语义。其工作方式与文本框完全相同。
• tel - 用于存储电话号码，但不强制特定的布局方案。
• time - 用于存储时间。这不会指示时区。
• url - 用于存储有效的 URI 字符串。它要求用户指定一个有效的 URL（必须以 http://、https://、ftp:// 等开头）。
• week - 用于存储周数，可选时还存储年份。

对于所有这些新的输入类型，浏览器的实现各不相同。酷之处在于，如果浏览器还没有自定义控件来处理特定类型，它将回退到一个基本的输入框（它可以捕获所有这些新类型的输入）。输入颜色值可能不如它方便，但总比没有好。

表单属性

为了使表单更好，您可以使用许多属性来改进表单的功能。让我们来看其中的一些：

• value - 这是元素的初始值。例如，您可以设置一个捐赠输入字段的初始值为 50。用户可以自行更改，但默认情况下他们将捐赠 50 美元。
• pattern - 在这里您可以强制执行特定的模式。例如，您可以要求电话号码符合 (xxx) xxx-xxxx 的格式。此模式接受正则表达式作为其值。这意味着您可以非常具体地规定数据的布局方式。
• min - 您可以使用此属性为任何数字输入指定最小值。例如，年龄字段的最小值应该是零。
• max - 就像 min 一样，max 用于数字输入。它指定可以输入的 max 数量（我知道，这很令人惊讶）。
• step - 这对于使用某种类型的选择器控件的数字输入很有用。例如，滑块或带有向上/向下箭头的数字框。step 属性指示要增加或减少值的数量。
• required - 这是一个重要的属性。它表示指定的字段对于表单数据是必需的。在大多数情况下，这意味着没有填写此字段，表单将不会提交。这也是一个有趣的属性，因为它不需要值。您只需单独指定该属性（required）。您可能会看到一些人将其设置为 required="required"。这也是有效的语法，主要用于旧版浏览器。
• placeholder - 这将在您的输入中放入数据，向用户显示应在字段中输入什么。通常，它是灰色文本而不是黑色，以表明这不是真实数据。姓名字段可能是一个使用此属性的例子。一些用户可能不确定是应该输入名字还是姓氏，但您需要两者。您可以使用 placeholder 属性指定“John Doe”。他们会看到这一点，就知道您要求输入名字和姓氏。一旦他们将光标移到框中，占位符文本就会消失。
• maxlength - 这用于文本输入，以指定它们的长度。例如，如果您的数据库只接受最多 100 个字符的名称，您可以在您的输入字段上（并且可能应该）加上 maxlength 属性，以确保您不会获得超过该数量的字符。让用户自己弄清楚要省略什么。
• autocomplete - 此属性允许您关闭表单字段的自动填充。如果您为此属性指定“off”，自动填充数据的应用程序将跳过此字段。
• autofocus - 在页面上的一个元素上使用此属性（无值），如果您希望在页面加载时将焦点放在特定输入上。

构建表单

让我们将所有这些学到的信息应用到改进我们的示例表单中。我们将通过添加几个额外的输入字段来增强它，包括电话号码、用户年龄、电子邮件地址和毕业日期。这应该会让事情更有趣。首先，这是它看起来的样子：

现在，这是代码：

<form role="form" name="userform" action="formprocessor.php" method="post">
    <p>
        First Name: <input name="firstName" type="text" placeholder="John" maxlength="50" required/>
    </p>
    <p>
        Last Name: <input name="lastName" type="text" placeholder="Doe" maxlength="50" required />
    </p>
    <p>
        Age: <input name="age" type="number" min="0" max="140" required />
    </p>
    <p>
        Email: <input name="email" type="email" placeholder="John.Doe@gmail.com" />
    </p>
    <p>
        Graduation Date: <input name="graduationDate" type="date" />
    </p>
    <p>
        Over 18: <input name="over18" type="checkbox" />
    </p>
    <p>
        <button name="process" type="submit">Process</button>
        <button name="clear" type="reset">Clear</button>
    </p>
</form>

看到了我们如何锁定输入、定制用户体验，以及总体上从用户角度和我们后端角度创建更愉快的表单的各种方法吗？

结论

正如我们所见，使用 HTML 构建表单并不困难。然而，它为我们提供了许多强大的选项，使我们能够将表单提升到一个新的水平，尤其是在 HTML5 中。通过本文的学习，您没有任何理由不立即动手构建自己的表单。