HTML - 第七章: 表单与输入 - 《程序员的必备修养》

表单是用户与网站进行交互的核心工具之一。它们不仅用于数据提交，还可以进行数据验证和用户输入的管理。在这一章中，我们将详细介绍 HTML 表单元素及其使用方法，并提供丰富的代码示例帮助理解。

表单元素

基本结构

一个基本的 HTML 表单使用 <form> 标签包含所有的表单元素。表单的基本结构如下：

<form action="submit_url" method="post">
  <!-- 表单元素 -->
</form>

action 属性：指定表单提交的目标 URL。
method 属性：指定提交表单时使用的 HTTP 方法（通常为 GET 或 POST）。

常见的表单元素

输入框（`<input>`）

输入框是最常见的表单元素之一，用于接收用户输入。根据 type 属性的不同，输入框可以有多种类型：

<form action="/submit" method="post">
  <!-- 文本输入框 -->
  <label for="name">姓名:</label>
  <input type="text" id="name" name="name" /><br /><br />
  <!-- 邮件输入框 -->
  <label for="email">邮箱:</label>
  <input type="email" id="email" name="email" /><br /><br />
  <!-- 密码输入框 -->
  <label for="password">密码:</label>
  <input type="password" id="password" name="password" /><br /><br />
  <!-- 提交按钮 -->
  <input type="submit" value="提交" />
</form>

type="text"：文本输入框。
type="email"：用于输入电子邮件地址的输入框。
type="password"：密码输入框，输入内容以掩码显示。
type="submit"：提交按钮。

文本区域（`<textarea>`）

文本区域用于接收多行文本输入：

<form action="/submit" method="post">
  <label for="message">留言:</label><br />
  <textarea id="message" name="message" rows="4" cols="50"></textarea
  ><br /><br />
  <input type="submit" value="提交" />
</form>

rows 属性：指定文本区域的行数。
cols 属性：指定文本区域的列数。

按钮（`<button>`）

按钮可以是提交按钮或普通按钮：

<form action="/submit" method="post">
  <button type="submit">提交</button>
  <button type="button" onclick="alert('按钮点击')">点击我</button>
</form>

type="submit"：提交按钮，点击时提交表单。
type="button"：普通按钮，点击时触发 JavaScript 事件。

表单验证与提交

HTML5 表单验证

HTML5 提供了一些属性来进行简单的表单验证：

<form action="/submit" method="post">
  <label for="name">姓名:</label>
  <input type="text" id="name" name="name" required /><br /><br />
  <label for="email">邮箱:</label>
  <input type="email" id="email" name="email" required /><br /><br />
  <label for="age">年龄 (18-99):</label>
  <input type="number" id="age" name="age" min="18" max="99" /><br /><br />
  <input type="submit" value="提交" />
</form>

required 属性：表示该字段为必填项。
type="email"：验证是否为有效的电子邮件格式。
min 和 max 属性：限制输入的数值范围。

表单提交

表单提交时，浏览器会将表单数据发送到指定的 action URL。服务器接收并处理数据后，可以返回响应页面。

使用 JavaScript 提交表单

有时候，我们需要通过 JavaScript 来控制表单的提交行为：

<form id="myForm" action="/submit" method="post">
  <label for="name">姓名:</label>
  <input type="text" id="name" name="name" required /><br /><br />
  <label for="email">邮箱:</label>
  <input type="email" id="email" name="email" required /><br /><br />
  <button type="button" onclick="submitForm()">提交</button>
</form>
<script>
  function submitForm() {
    // 可以在这里进行额外的验证或处理
    document.getElementById("myForm").submit();
  }
</script>

在这个示例中，我们通过 JavaScript 函数 submitForm 手动提交表单。这允许我们在提交前执行额外的逻辑。

小结

这一章我们详细介绍了 HTML 表单元素及其使用方法，涵盖了基础的文本输入、文本区域、按钮等元素，以及如何进行表单验证和提交。在接下来的章节中，我们将探讨更高级的 HTML5 新特性，以提升表单的功能。

第七章: 表单与输入