你的第一个表单
本系列的第一篇文章将为您提供创建 Web 表单的首次体验，包括设计一个简单的表单，使用正确的 HTML 表单控件和其他 HTML 元素来实现它，通过 CSS 添加一些非常简单的样式，并描述如何将数据发送到服务器。我们将在本模块的后面更详细地扩展这些子主题。
| 预备知识 | 对 HTML 的基本理解。 |
|---|---|
| 目标 | 为了熟悉什么是 Web 表单、它们的用途、如何考虑设计它们以及简单情况下所需的 HTML 基本元素。 |
什么是 Web 表单？
Web 表单是用户与网站或应用程序交互的主要方式之一。表单允许用户输入数据，这些数据通常会发送到 Web 服务器进行处理和存储（请参阅本模块后面的发送表单数据），或者在客户端使用以某种方式立即更新界面（例如，向列表中添加另一个项目，或显示/隐藏 UI 功能）。
Web 表单的 HTML 由一个或多个表单控件（有时称为小部件）以及一些其他元素组成，以帮助构建整个表单——它们通常被称为HTML 表单。这些控件可以是单行或多行文本字段、下拉框、按钮、复选框或单选按钮，它们主要使用<input>元素创建，尽管还有其他一些元素需要学习。
表单控件也可以编程为强制输入特定的格式或值（表单验证），并与描述其用途的文本标签配对，以供有视力和视障用户使用。
设计您的表单
在开始编码之前，最好退一步花时间思考您的表单。设计一个快速模型将帮助您定义想要用户输入的一组正确数据。从用户体验 (UX) 的角度来看，记住您的表单越大，您就越有可能让用户感到沮丧并失去用户。保持简单并专注于核心：只请求您绝对需要的数据。
在构建网站或应用程序时，设计表单是一个重要的步骤。本文的范围不包括表单的用户体验，但如果您想深入研究该主题，您应该阅读以下文章
- Smashing Magazine 有一些关于表单 UX 的好文章，包括一篇较旧但仍然相关的Web 表单可用性综合指南。
- UXMatters 也是一个非常有思想的资源，提供了从基本最佳实践到复杂问题（如多页表单）的良好建议。
在本文中，我们将构建一个简单的联系表单。让我们做一个粗略的草图。
我们的表单将包含三个文本字段和一个按钮。我们要求用户输入他们的姓名、电子邮件和他们想要发送的消息。点击按钮将把他们的数据发送到 Web 服务器。
实现我们的表单 HTML
好的，让我们尝试为我们的表单创建 HTML。我们将使用以下 HTML 元素：<form>、<label>、<input>、<textarea> 和<button>。
在继续之前，请制作我们简单 HTML 模板的本地副本 — 您将在此处输入您的表单 HTML。
<form> 元素
所有表单都以一个<form>元素开头，如下所示
<form action="/my-handling-form-page" method="post">…</form>
此元素正式定义了一个表单。它是一个容器元素，就像<section>或<footer>元素，但专门用于包含表单；它还支持一些特定属性来配置表单的行为方式。它的所有属性都是可选的，但通常的做法是始终至少设置action和method属性
action属性定义了表单提交时收集的数据应发送到的位置（URL）。method属性定义了发送数据的 HTTP 方法（通常是get或post）。
注意：我们将在后面的发送表单数据文章中了解这些属性的工作原理。
<label>、<input> 和 <textarea> 元素
我们的联系表单并不复杂：数据输入部分包含三个文本字段，每个字段都有一个对应的<label>
- 用于姓名的输入字段是单行文本字段。
- 用于电子邮件的输入字段是电子邮件类型的输入：一个只接受电子邮件地址的单行文本字段。
- 用于消息的输入字段是
<textarea>；一个多行文本字段。
在 HTML 代码方面，我们需要类似以下内容来实现这些表单小部件
<form action="/my-handling-form-page" method="post">
<p>
<label for="name">Name:</label>
<input type="text" id="name" name="user_name" />
</p>
<p>
<label for="mail">Email:</label>
<input type="email" id="mail" name="user_email" />
</p>
<p>
<label for="msg">Message:</label>
<textarea id="msg" name="user_message"></textarea>
</p>
</form>
将您的表单代码更新为如上所示。
这里的<p>元素是为了方便地构建我们的代码并使样式更容易（参见文章后面）。为了可用性和可访问性，我们为每个表单控件包含一个显式标签。请注意所有<label>元素上for属性的使用，其值是与之关联的表单控件的id——这就是您将表单控件与其标签关联起来的方式。
这样做有很大的好处——它将标签与表单控件关联起来，使鼠标、触控板和触摸设备用户可以点击标签来激活相应的控件，它还为屏幕阅读器提供了可访问的名称，以便向其用户朗读。您将在如何构建 Web 表单中找到有关表单标签的更多详细信息。
在<input>元素上，最重要的属性是type属性。此属性极其重要，因为它定义了<input>元素的显示和行为方式。您将在后面的基本原生表单控件文章中找到更多相关信息。
- 在我们的简单示例中，我们为第一个输入使用值text——这是此属性的默认值。它代表一个基本的单行文本字段，接受任何类型的文本输入。
- 对于第二个输入，我们使用值email，它定义了一个只接受格式正确的电子邮件地址的单行文本字段。这会将基本文本字段变成一种“智能”字段，它将对用户键入的数据执行一些验证检查。它还导致在具有动态键盘的设备（如智能手机）上出现更适合输入电子邮件地址的键盘布局（例如，默认带有@符号）。您将在后面的客户端表单验证文章中找到更多关于表单验证的信息。
最后但同样重要的是，请注意<input>与<textarea></textarea>的语法。这是 HTML 的一个怪癖。<input>标签是空元素，这意味着它不需要结束标签。<textarea>不是空元素，这意味着它应该用正确的结束标签关闭。这对表单的一个特定功能有影响：您定义默认值的方式。要定义<input>元素的默认值，您必须使用value属性，如下所示
<input type="text" value="by default this element is filled with this text" />
另一方面，如果您想为<textarea>定义默认值，则将其放在<textarea>元素的开始和结束标签之间，如下所示
<textarea>
by default this element is filled with this text
</textarea>
<button> 元素
我们表单的标记几乎完成了；我们只需要添加一个按钮，以便用户在填写完表单后发送或“提交”他们的数据。这可以通过使用<button>元素来完成；在结束的</form>标签上方添加以下内容
<p class="button">
<button type="submit">Send your message</button>
</p>
<button>元素也接受一个type属性——它接受三个值之一：submit、reset或button。
- 点击
submit按钮（默认值）会将表单数据发送到由<form>元素的action属性定义的网页。 - 点击
reset按钮会立即将所有表单小部件重置为默认值。从用户体验的角度来看，这被认为是糟糕的做法，因此除非您确实有充分的理由包含此类按钮，否则应避免使用它。 - 点击
button按钮什么也不会做！这听起来很傻，但对于构建自定义按钮来说却非常有用——您可以使用 JavaScript 定义其选择的功能。
基本表单样式
现在您已经完成了表单的 HTML 代码编写，尝试保存并在浏览器中查看。目前，您会发现它看起来相当难看。
注意：如果您不认为自己的 HTML 代码正确，请尝试将其与我们完成的示例进行比较——请参阅first-form.html（也可以在线查看）。
表单以难以很好地进行样式设置而闻名。本文的范围不包括详细教授您表单样式，因此目前我们只会让您添加一些 CSS 以使其看起来正常。
首先，在您的 HTML head 中，向您的页面添加一个<style>元素。它应该如下所示
<style>
/* CSS goes here */
</style>
在style标签内，添加以下 CSS
body {
/* Center the form on the page */
text-align: center;
}
form {
display: inline-block;
/* Form outline */
padding: 1em;
border: 1px solid #cccccc;
border-radius: 1em;
}
p + p {
margin-top: 1em;
}
label {
/* Uniform size & alignment */
display: inline-block;
min-width: 90px;
text-align: right;
}
input,
textarea {
/* To make sure that all text fields have the same font settings
By default, text areas have a monospace font */
font: 1em sans-serif;
/* Uniform text field size */
width: 300px;
box-sizing: border-box;
/* Match form field borders */
border: 1px solid #999999;
}
input:focus,
textarea:focus {
/* Set the outline width and style */
outline-style: solid;
/* To give a little highlight on active elements */
outline-color: black;
}
textarea {
/* Align multiline text fields with their labels */
vertical-align: top;
/* Provide space to type some text */
height: 5em;
}
.button {
/* Align buttons with the text fields */
padding-left: 90px; /* same size as the label elements */
}
button {
/* This extra margin represent roughly the same space as the space
between the labels and their text fields */
margin-left: 0.5em;
}
保存并重新加载，您会发现您的表单看起来不那么难看了。
注意：您可以在 GitHub 上找到我们的版本，网址为first-form-styled.html（也可以在线查看）。
将表单数据发送到您的 Web 服务器
最后一部分，也许也是最棘手的部分，是在服务器端处理表单数据。<form>元素通过action和method属性定义了数据的发送位置和方式。
我们为每个表单控件提供了name属性。名称在客户端和服务器端都很重要；它们告诉浏览器每个数据段的名称，在服务器端，它们让服务器按名称处理每个数据段。表单数据以名称/值对的形式发送到服务器。
要在表单中命名数据，您需要在每个将收集特定数据段的表单小部件上使用name属性。让我们再次查看一些表单代码
<form action="/my-handling-form-page" method="post">
<p>
<label for="name">Name:</label>
<input type="text" id="name" name="user_name" />
</p>
<p>
<label for="mail">Email:</label>
<input type="email" id="mail" name="user_email" />
</p>
<p>
<label for="msg">Message:</label>
<textarea id="msg" name="user_message"></textarea>
</p>
…
</form>
在我们的示例中，表单将发送 3 个数据段，分别名为user_name、user_email和user_message。这些数据将使用HTTP POST方法发送到 URL /my-handling-form-page。
在服务器端，URL 为/my-handling-form-page的脚本将接收 HTTP 请求中包含的 3 个键/值项列表形式的数据。此脚本如何处理该数据取决于您。每种服务器端语言（PHP、Python、Ruby、Java、C#等）都有其自己的处理表单数据的机制。深入探讨这个主题超出了本教程的范围，但如果您想了解更多信息，我们已在后面的发送表单数据文章中提供了一些示例。
总结
恭喜，您已经构建了您的第一个 Web 表单。它在线上看起来是这样的
然而，这仅仅是个开始——现在是深入研究的时候了。表单的功能远比我们在此处看到的要强大，本模块中的其他文章将帮助您掌握其余内容。