如何使用 HTML 表单 – HTML 表单基础知识

HTML 表单用于从用户获取信息。它们广泛用于网页或应用程序中的调查或注册流程。

HTML 表单基础知识包括创建良好 HTML 表单所需的常见 HTML 元素、标签、属性、概念或最佳实践。收集的数据将发送到服务器进行处理。

HTML表单的基本结构

您可以使用<form>元素来创建 HTML 表单

<form action="submit_form" method=" post">
  <label for="name">Name:</label>
  <input type="text" id="name" name=" name" required>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <button type="submit">Submit</button>
</form>

HTML<form>元素是多个 HTML 表单元素的容器。该<form>元素可以包含以下内容：

• <input>
• <label>
• <select>
• <textarea>
• <button>
• <fieldset>
• <legend>
• <datalist>
• <output>
• <option>
• <optgroup>

如何使用 HTML 表单元素

在本节中，您将学习如何使用一些 HTML 表单元素。

如何使用 HTML 元素

元素<input>是最常用的表单元素。元素可以容纳的信息类型<input>取决于<type>属性。

该<input> 元素只能接受使用<type> 属性分配给它的特定类型的数据。

<form action="">
      <input
        type="text"
        id="name"
        name="username"
        placeholder="Enter your username"
        required
      />
      <input
        type="password"
        id="security"
        name="password"
        placeholder="Enter your password"
        required
      />
      <input type="email" name="email" placeholder="Enter your email" />
      <input type="checkbox" name="subscribe" value="yes" /> 性别 <input type="radio" name="gender" value="male" /> 男
      <input type="radio" name="gender" value="female" /> 女
      <input type="submit" name="submit" />
</form>

以下是 <type>可以分配给<input>元素的不同属性：

• <input type="text">：允许用户输入文本。
• <input type="email">：用户输入必须遵循电子邮件格式。
• <input type="password">：接受用户输入的密码。密码会被屏蔽，通常显示为星号 (*) 或点，以保护输入的隐私。
• <input type="checkbox">：用户可以选择显示的复选框中的零个或多个。复选框可以选中或取消选中。
• <input type="radio">：允许用户从多选单选按钮中仅选择一个。
• <input type="submit">：使用户能够提交表单。

以下是输入元素中可能存在的其他属性：

• <input name=" ">：为输入字段指定名称。指定的名称用于在提交表单时标识输入数据。
• <input id=" ">：标识符为输入字段创建唯一的 ID。它通常与 CSS 关联用于设置样式，并与 JavaScript 关联用于其他操作。
• <input value=" ">：用于设置输入字段的初始值。默认初始值可以让用户大致了解所需的信息。
• <input placeholder=" ">：一个隐式伪值，设置在输入字段中，一旦用户开始输入就会消失。提示用户需要输入什么数据，类似于 value 属性。
• <input required>：要求提交前必须填写输入字段。未填写时会显示错误消息。
• <input disabled>：顾名思义，这会阻止用户与输入字段进行交互。禁用输入字段接受输入。使用此属性，输入字段将变为不可点击状态。
• <input readonly>：用户只能读取初始设置的值，但无法更改。与 disabled 属性不同，输入字段可点击，但无法修改。

请注意，该<input>元素不包含for属性。

如何使用 HTML 元素

标签元素将文本与表单输入、复选框或单选按钮关联。

<form action=" ">
    <label for="name" id="user">Username:</label>
</form>

标签元素描述文本字段中所需的信息。

标签元素对于可访问性至关重要，它使屏幕阅读器用户能够更轻松地浏览表单。辅助技术会将标签大声读给用户听。

当label元素的属性和input元素的id属性对应时，点击label会聚焦对应的输入域for，更加方便用户与表单交互。

标签提高了表单的整体使用效果，提供了背景和指导。

以下是该元素的常用属性label：

• <label for=" "></label>：将标签与相应的表单元素（通常是输入元素）关联。该for属性的值始终与所关联表单元素（通常是输入元素）的 id 值相同。
• id 属性<label id=" "></label>：为标签提供唯一标识符。其值与相应表单元素（通常是输入元素）的属性值相同for。用于选择标签，以便在 CSS 中设置样式或使用 JavaScript 进行其他操作。

如何使用 HTML

多行文本输入字段，允许用户输入较长的文本或段落。rows和cols属性控制文本框的初始大小。

<form action="">
      <label for="testimony">Testimony:</label>
      <textarea name="testimony" id="testimony" cols="30" rows="10"></textarea>
</form>

该rows属性控制文本区域框的高度（垂直大小），确定可见行数，而该cols属性控制宽度（水平大小），指定每行可见字符数。

请注意，该textarea框可以换行以适应其定义宽度内的输入文本。

与单行输入字段不同，该textarea元素没有maxlength属性或value属性。内容放置在开始和结束标签内。

textarea为了实现可访问性，将标签或上下文与元素关联起来以协助使用屏幕阅读器或其他辅助技术的用户是一种很好的做法。

如何使用 HTML 元素

该<select>元素创建一个下拉列表，允许用户从列出的选项中选择一个或多个选项。

<form action="">
      <label for="numbers">Choose a favorite number:</label>
      <select name="numbers" id="numbers" size="5" multiple>
        <option value="" disabled selected>Select a number</option>
        <option value="one">1</option>
        <option value="two">2</option>
        <option value="three">3</option>
        <option value="four">4</option>
        <option value="five">5</option>
        <option value="six">6</option>
        <option value="seven">7</option>
        <option value="eight">8</option>
        <option value="nine">9</option>
        <option value="ten">10</option>
      </select>
</form>

元素<option>包含在<select>元素中。<option>元素包含要选择的项。每个项<option>代表下拉列表中的一项。

每个<option>元素都应该有一个属性，用于保存包含该元素的表单提交<value=" ">时需要提交的值。如果省略该属性，则元素的文本内容将成为需要提交的值。<select><value=" "><option>

该<name=" ">属性用于在提交表单时标识服务器端的选择控件。这<name=" ">对于在服务器上处理表单数据非常重要。

<selected>通过在元素中添加该属性，您可以选择其中一个选项作为默认选项<option>。如果没有选择任何选项，则默认选择列表中的第一个选项。

通过在 上设置该<size=" ">属性，可以设置下拉菜单中一次可显示的选项数量。请注意，向下滚动时会看到其他选项。<size=" "><select>

<disabled>在元素上添加该属性<select>，将禁用选择选项，并阻止用户选择任何选项。选择选项将变得不可点击。

<multiple>此外，通过在元素上添加属性，可以选择多个选项<select>。您可以按住Ctrl（或 Mac 上的 Command 键）来选择多个选项。

了解<select>元素并使用必要的属性可以使您的表单方便用户选择不同的选项，并方便<select>服务器端处理元素。

表单验证

简单来说，这是检查表单中输入的数据是否正确、完整、符合规定格式的过程。

表单验证的重要性

• 数据准确性： 防止提交不正确或不完整的数据。
• 安全性：检查数据以防止提交不正确或恶意的数据，从而减少有害攻击或数据泄露。
• 用户体验： 如果用户输入了错误的数据，系统会快速显示错误信息，减轻填写表单的压力。此外，它还可以用来建议用户填写的格式。
• 效率：提交前的表单验证节省时间和资源。减少不必要的服务器请求，提升应用程序的整体性能。

表单验证的类型

1. 客户端验证：用户浏览器在提交表单前执行检查。浏览器如何验证表单？浏览器使用 JavaScript、CSS 或 HTML 属性来验证表单。客户端验证的优点在于，当数据不正确或不完整时，用户会快速收到错误消息。响应速度很快，并且不需要服务器端验证。缺点之一是，经验丰富的用户可以绕过客户端验证。
2. 服务器端验证：服务器在提交表单后检查表单数据。服务器端验证更加健壮和安全。它会执行双重验证，即使客户端验证失败或被绕过，也会再次验证表单数据。

请注意，您可以使用两者中的任一个，也可以将两者结合使用。

常见的验证技术

这些是常见的 HTML 属性，可帮助您决定表单验证的模式。

长度限制

您可以使用该maxlength属性来设置输入字段可以容纳的最大字符数。

<form>
  <input type="text" id="username" name="username" placeholder="Username" maxlength="20" required>
  <button type="submit">Submit</button>
</form>

必填字段

要求在提交表单之前填写某些输入字段。该<required>属性用于执行此技术。当用户未填写必填字段时，会显示错误消息。

<form>
  <input type="text" id="username" name="username" placeholder="Username" required>
  <input type="email" id="email" name="email" placeholder="Email" required>
  <button type="submit">Submit</button>
</form>

数据格式

确保用户输入的数据符合要求的格式。<input type="email">将 type 属性设置为 email 时，将要求用户在提交表单之前输入正确的电子邮件格式（例如：me@example.com）。

如果将 type 属性设置为 number ，也会发生同样的事情<input type="number">，用户只能输入 0-9 的数据。

<form>
  <input type="email" id="email" name="email" placeholder="Email" required>
  <button type="submit">Submit</button>
</form>

密码强度

该<pattern="">属性用于指定密码复杂性，例如最小长度以及是否包含大写或小写字母、数字和特殊字符。

<title="">当用户将鼠标悬停在输入字段上或输入的密码与指定的密码格式不匹配时，该属性会显示错误消息。密码复杂度越高，用户帐户受到的保护就越高，从而防止未经授权的访问。

<form>
  <input type="password" id="password" name="password" placeholder="Password" pattern="(?=.\d)(?=.[a-z])(?=.*[A-Z]).{8,}" title="Password must contain at least one number, one uppercase letter, one lowercase letter, and at least 8 or more characters" required>
  <button type="submit">Submit</button>
</form>

数值

min您可以使用和属性设置用户输入的数值范围max。例如，要检查用户是否在指定的年龄范围内：

<form>
  <input type="number" id="age" name="age" placeholder="Age" min="18" max="100" required>
  <button type="submit">Submit</button>
</form>

良好的表单验证实践有助于创建具有准确数据的表单并减少受到恶意攻击的可能性。

表格提交及方法

填写表单后，点击“提交”按钮后，您的信息将被发送到服务器进行处理。这称为表单提交。

表格提交方法

表单数据通过属性发送到服务器method。常用的方法有两种：

GET 方法

使用该get方法<method="get">，表单数据通过浏览器地址栏中的URL发送到服务器。

<form action="http://example.com" method="get">
          <input type="text" name="name" />
          <input type="submit" value="Submit" />
 </form>

使用上面的代码示例，当用户在名为“name”的输入字段中输入一个名字（假设用户的名字是 KC），并点击提交按钮时，表单数据将通过这样的 URL 发送到服务器：“http://example.com?name=KC”。

GET 方法不安全，因为它通常用于发送少量不敏感的数据。

POST 方法

post 方法属性<method=post>将表单数据在 HTTP 请求的主体中发送到服务器，而不是在 URL 中。

<form action="http://example.com" method="get">
          <input type="text" name="name" />
          <input type="submit" value="Submit" />
 </form>

使用上面相同的代码示例，POST 方法将向服务器发送表单数据，如下所示：“https://example.com/submit.php”。

您应该注意到，POST 请求不包含 URL 中的表单数据，而是指向将处理表单数据的服务器端脚本（submit.php）。

发送的表单数据不可见。POST 请求用于提交敏感信息，例如密码，因为数据在 URL 中不可见，而是在 HTTP 请求主体中发送。

如何设置 HTML 表单的样式

HTML 表单可以使用 CSS 进行样式设置，就像任何其他 HTML 元素一样。您可以使用 CSS 执行以下操作，以匹配您网站的设计：

• 选择器：CSS 选择器（例如元素选择器、类选择器或 ID 选择器）可用于选择 HTML 代码中的特定元素进行样式设置。
• 排版：排版可用于设置字体系列，调整表单元素内文本的大小、字体粗细和颜色，以增强可读性。
• 盒子模型：通过了解影响间距和布局的 CSS 属性（例如填充、边框和边距），您可以设置 HTML 元素的样式。
• 颜色和背景：可以分别使用 CSS 属性（如颜色和背景颜色（或背景图像））设置文本或背景的颜色。
• 响应能力：通过媒体查询，您可以使您的表单具有响应能力并适应不同的屏幕尺寸和设备。
• 布局：您可以控制表单的布局，使用显示、浮动和定位等 CSS 属性使其更加用户友好。

最佳实践和可访问性

与其他 HTML 文档一样，请确保您的表单符合 Web 标准。为了获得最佳实践和无障碍访问体验，请注意以下几点：

结构和语义

• 始终使用适当的语义 HTML 元素（如 <form><input><label>等）来构建表单和其他所有 HTML 文档。
• 正确嵌套元素并将标签与各自的输入字段关联。
• 确保您的输入字段具有适当的类型属性。

错误处理和验证

• 结合客户端和服务器端验证，避免提交不正确或不完整的数据。
• 当表单提交失败或发生验证错误时，使用适当的属性显示错误消息。

响应式设计

• 您的表单应该具有响应能力并适应各种屏幕尺寸和设备。
• 使用 CSS 媒体查询根据视口大小调整表单布局和样式。

设计与对比

• 使用易于看到的字体和颜色。
• 文本和背景之间的颜色对比应确保可读性，特别是对于视力低下的用户。

ARIA 角色和属性

• ARIA（可访问的富互联网应用程序）角色和属性提高了屏幕阅读器用户或其他辅助技术的可访问性。
• ARIA 属性（aria-labelledby、、aria-describedby和aria-invalid）为表单元素提供额外的上下文和反馈。

结论

创建符合 Web 标准的优质 HTML 表单可以提升网站的用户体验。通过遵循最佳实践和无障碍访问原则，开发者可以创建用户友好且能够有效收集用户数据的表单。