Frontend Academy · 课时

表单：input、label、button

Q: 「表单：input、label、button」这节课中我会学到什么？

使用带标签的输入控件、不同的输入类型、文本区域、选择框和提交按钮，构建可访问的 HTML 表单。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用带标签的输入控件、不同的输入类型、文本区域、选择框和提交按钮，构建可访问的 HTML 表单。

表单：input、label、button 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

为什么使用 HTML 表单？

表单是用户向服务器发送数据的主要方式，例如登录、搜索、结账和反馈。浏览器提供大量内置功能——验证、键盘输入和移动设备键盘——使用原生表单元素即可免费获得这些功能。

<form> 元素

<form>元素用于包裹所有相关控件。目标地址属性设置接收数据的网址；请求方法设置为 GET 或 POST。对于单页应用，您通常会阻止默认提交，并使用 JavaScript 处理提交。

<form action="/submit" method="POST">
  <!-- inputs go here -->
</form>

文本和电子邮件输入框

<input>元素是表单的主力。类型属性会改变它的行为。type="text"用于自由文本，type="email"用于电子邮件地址（会验证格式并显示合适的移动设备键盘）。

<input type="text" name="username" placeholder="Enter your name">
<input type="email" name="email" placeholder="you@example.com">

密码、数字和其他类型

其他有用的输入类型包括：password（隐藏字符）、number（验证数值并显示微调控件）、date（显示日期选择器）、range（滑块）、checkbox（布尔切换）和radio（多项中的单项选择）。

<input type="password" name="pass">
<input type="number" name="age" min="0" max="120">
<input type="date" name="birthday">
<input type="range" min="0" max="100" value="50">

<label> 元素——无障碍访问的关键

每个输入控件都必须有对应的<label>。标签会告诉用户（以及屏幕阅读器）该字段的用途。点击标签会让输入控件获得焦点。请使用与输入控件id匹配的for属性。

<label for="username">Username</label>
<input type="text" id="username" name="username">

Textarea 和 Select

多行文本（例如评论）请使用<textarea>。下拉选项请将<select>与作为其子元素的<option>搭配使用。请始终添加一个默认的空选项，并使用“选择类别”之类的提示文字。

<textarea name="message" rows="4" placeholder="Write your message..."></textarea>

<select name="level">
  <option value="">Select level...</option>
  <option value="a1">A1 Beginner</option>
  <option value="b1">B1 Intermediate</option>
</select>

复选框和单选按钮

请使用 <fieldset> 和 <legend> 将相关复选框分组。共享同一 name 的单选按钮只能选择一个。每个控件都需要有自己的标签。

<fieldset>
  <legend>Preferred languages</legend>
  <label><input type="checkbox" name="lang" value="js"> JavaScript</label>
  <label><input type="checkbox" name="lang" value="ts"> TypeScript</label>
</fieldset>

按钮：提交、重置和普通按钮

<button type="submit"> 会提交表单。type="reset" 会清除所有字段。type="button" 默认不执行任何操作，通常与 JavaScript 事件监听器配合使用。请始终设置类型——默认类型是提交。

<button type="submit">Send Message</button>
<button type="reset">Clear Form</button>
<button type="button" id="preview">Preview</button>

使用 <fieldset> 对输入控件进行分组

<fieldset> 可以在视觉和语义上将相关控件分组。必需的 <legend> 会提供标题。屏幕阅读器会在朗读组内每个控件之前先朗读图例，从而提供上下文。

name 属性——提交哪些内容

提交表单时，浏览器会发送每个控件对应的 name=value 对。只有带有 name 属性的控件才会被包含在内。对于复选框，只有已选中的复选框会被发送。

<input type="text" name="firstName" value="Alice">
<!-- Submits: firstName=Alice -->

自动填充和自动完成

请设置 autocomplete 属性的值，例如 email、given-name、new-password 或 current-password，帮助密码管理器和浏览器的自动填充功能正确填写表单。

<input type="email" name="email" autocomplete="email">
<input type="password" name="pass" autocomplete="current-password">

快速检查

<label> 元素上的 for 属性有什么作用？

回顾：无障碍 HTML 表单

每个输入控件都需要标签。请根据数据选择合适的输入类型。使用字段集将相关控件分组。提交表单时使用 button type=submit。请优先利用表单的原生功能——验证、键盘导航和自动填充——再添加 JavaScript。

常见问题解答