HTML 表单

表单对于收集用户信息（姓名、电子邮件地址、电话号码、信用卡信息等）至关重要。HTML 和 CSS 允许我们创建表单的可视化部分，而数据处理则使用其他编程语言完成。在本课中，了解基本的 HTML 表单元素及其属性。

<form> 标签

HTML<form>元素定义了一个文档部分，其中包含用于提交信息的交互式控件——表单本身。它是一个容器元素，我们在其中放置所有其他元素：输入、复选框、单选按钮、提交按钮等。这些元素称为“控件”。

用户通过修改其控件与表单进行交互——输入文本、选择项目并将信息提交给服务器进行处理。

输入元素

元素是 HTML 表单中最常用的元素。更改属性允许您指定要使用的输入字段的类型。是的，没错——大多数类型的控件都是具有不同属性的输入元素。 <input> type

由于输入类型和属性的组合数量众多，该<input>元素是 HTML 中最强大和最复杂的元素之一。其中最常见的是文本字段、密码字段、复选框、单选按钮、提交按钮、重置按钮、文件选择框，以及 HTML5 中引入的几种新输入类型

单行文本字段

输入的属性定义了它的类型。要添加单行文本字段，请将attribute 具有值的类型添加"text"到<input>开始标记。

当您希望用户输入简短的文本信息（如姓名或地址）时，请使用文本字段。对于更具体的数据类型，如日期、URL、电子邮件或搜索词，您有更好的选择。

多行文本字段

有时我们需要用户输入更大的文本——例如，在要求评论或评论时。<input type="text">不是一个好的选择，因为它会自动删除换行符——而且，不可能一次看到长文本。在这些情况下，使用该<textarea>元素允许用户输入多行文本。

单选按钮

使用添加单选按钮。当您需要用户从预定义列表中准确选择一个选项时，它们非常有用——例如，交付类型或付款选项。单选按钮通常以相关选项组的形式出现，每个按钮呈现为一个小圆圈。选中时，圆圈会被填充或突出显示。 <input type="radio">

您可以将checked 属性添加到您要默认检查的按钮。

复选框

标签的type="checkbox"属性引入了复选框。<input>这种类型的控件允许用户从一组预定义的选项中选择一个或多个选项，这与仅选择一个选项的单选按钮不同。例如，食品配送网站可以让客户制作自己的披萨。在这种情况下，复选框是让用户选择他们想要放入其中的成分的最佳选择。

与单选按钮相同，checked 如果要默认选择复选框，请使用该属性。

选择器

要创建选择菜单，请使用<select>元素。它是一个下拉元素，允许用户从列表中选择一个选项，类似于单选按钮。Selectors are a better choice when the list of options is large. 例如，一个典型的用例是国家选择，因为世界上至少有 195 个国家，这还不包括有争议的领土。要定义每个菜单选项，请使用标签<option>内的元素。<select>

提交按钮

有几种方法可以让用户将他们的信息提交到服务器。一种方法是添加<input>具有属性的元素type="submit"。浏览器将此元素呈现为按钮。

当用户点击按钮时，浏览器将表单数据发送到表单action 属性中的文件。稍后对数据的处理与设计无关，更多与数据处理有关。如果您有兴趣，可以在 MDN Web Docs 上阅读更多相关信息。

按钮

在表单中创建按钮的方法之一是使用元素。按钮元素允许更多可能性，因为它们可以包含内容，因为它是一个容器标签。另一方面，它是一个空元素——这意味着您不能在文本中添加标记或插入图片。该元素提供了所有这些可能性，并且更容易在 CSS 中设置样式。 <button><input><button>

输入标签

标签与输入本身一样重要——没有它们，用户将不知道他们需要输入或选择哪些信息。当然，用占位符替换标签是可能的，但它会给辅助技术用户带来各种各样的问题。虽然无标签表单可能看起来不那么混乱，但屏幕阅读器无法阅读占位符，低视力用户也可能难以阅读它们。

使用标签创建标签。我们强烈建议将标签与输入相关联，不仅在视觉上，而且以编程方式以更好地访问。您可以使用属性以及输入的值来执行此操作，也可以直接将其嵌套在 中（阅读 MDN Web Docs 上的更多信息）。 <label>forid<input> <label>

<fieldset> 标签

填写表格有时会变得非常乏味。对此有帮助的是将表单分成几个部分——基本上，根据他们询问的信息类型将类似的控件组合在一起。例如，在询问员工信息时，雇主可以将字段全名和电话号码放入“个人信息”部分，将“职位”和“开始日期”放入“工作信息”部分。

要对控件及其标签进行分组，请将它们放在<fieldset>容器标签内。如果您选择这样做，创建部分还允许您使用 CSS 为每个部分设置不同的样式。

<legend> 标签

<legend>元素嵌套在元素内部，<fieldset>并为部分内容提供标题。在开始标记之后使用此元素<fieldset>，并将标题放在其开始和结束标记之间。

通常，对控件进行分组是一个好主意，因为它使用户更容易找到他们需要的控件，并且看起来更加用户友好。只需确保您的分组有意义，并为标题使用描述性和简洁的标签。

名称属性

所以用户填写了一个字段，但是这些信息之后会去哪里呢？当然，表格的重点是收集数据。为了让服务器正确识别字段中的数据，每个输入都需要该<name>属性。例如，对于email收集用户电子邮件的字段，将 name 属性的值设置为“”。

JavaScript 要求 name 属性在文档中的表单中是唯一的，而不是空字符串。

占位符属性

占位符文本为用户提供了他们需要在文本字段中键入的信息的示例。要添加占位符，请使用标签placeholder 内的属性<input>并在引号内定义其值。此属性适用于以下输入类型：文本、搜索、URL、电话、电子邮件和密码。例如，添加placeholder="Jack Sparrow"全名输入以向用户提供全名示例。

浏览器将在输入内的淡化文本中显示占位符。确保它不是用户需要填写的唯一信息——辅助技术无法读取占位符，而且它们对于低视力用户来说是个很大的问题。

必需的属性

如果要确保用户填写特定字段，请将required 属性添加到该字段。它不会让用户在为输入指定值之前提交表单。最常见的必填字段是姓名、电话号码、电子邮件和密码等。

自动完成属性

许多表单都要求提供相同的信息——姓名、地址、电话号码等。允许自动完成功能可以让用户的生活更轻松——他们无需重新输入所有这些信息，只需从预测列表中进行选择即可。

您可以将autocomplete 属性添加到<input>、<textarea>、和元素以启用自动完成功能。该值允许浏览器自动完成输入，尽管它不提供有关字段中预期数据类型的任何指导。您可以在 MDN Web Docs 上了解有关如何优化自动完成的更多信息。 <select><form>"on"

添加单选按钮

将元素的 设置为type 以创建单选按钮。请记住，单选按钮通常成组出现——顺便称为单选按钮组。对于单个开关控制，复选标记是更好的选择。input "radio"

添加多行文本

要为多行文本创建输入字段，请使用<textarea>元素。此元素还接受元素共有的几个属性<input>，例如autocomplete、placeholder和required。

在大多数浏览器中，<textarea>它是可调整大小的——您会注意到右上角的手柄，用户可以拖动该手柄来更改输入大小。这是因为resize 默认情况下启用 CSS 属性。如果要禁用它，请将以下规则添加到样式表中：

textarea {

resize: none;

}

添加选择器

使用该<select> 元素创建带有下拉菜单的控件。要添加选项，请使用标签内的标签。您可以在元素中包含该属性，以使其在页面首次加载时默认选中。 <option> <select>selected <option>

添加占位符

该placeholder 属性向用户提供了关于他们需要在该字段中输入何种信息的简短提示。避免写冗长的提示和解释——最好的占位符是一个或两个单词的例子。该属性不允许换行。

在设计表单时，确保用户即使看不懂占位符也可以填写。

以上内容为转载