【Web前端】如何构建简单HTML表单？

HTML 表单是 Web 开发中非常重要的组成部分。它们是与用户交互的主要方式，能够收集用户输入的数据。表单的灵活性使它们成为 HTML 中最复杂的结构之一，但若使用正确的结构和元素，可以确保其可用性和无障碍性。

---

表单的基本结构

HTML 表单使用 ​​<form>​​​ 元素来定义。这个元素包围了所有输入控件。以下是一个简单的表单结构：

<form action="/submit" method="POST"><label for="name">姓名：</label><input type="text" id="name" name="name" required><label for="email">邮箱：</label><input type="email" id="email" name="email" required><input type="submit" value="提交">
</form>

​​<form>​​ 元素

​​<form>​​ 元素是创建表单的容器，其中的基本属性包括：

• ​​action​​：指明提交表单数据的目标 URL。
• ​​method​​​：指定提交数据的 HTTP 方法（GET 或 POST）。

---

表单中的标签 (​​<label>​​)

​​<label>​​​ 元素用于为表单控件提供可点击的标签，这样用户可以更方便地选择输入控件。下面是一个示例：

<label for="username">用户名：</label>
<input type="text" id="username" name="username" required>

在这个示例中，​​<label>​​ 的 ​​for​​ 属性与输入控件的 ​​id​​​ 属性相对应。点击标签会自动聚焦到相应的输入框。

多个标签

多个标签可以同时与同一输入控件相关联。我们可以使用多个 ​​<label>​​​ 元素去描述同一输入框，但每个标签需要有不同的 ID。

<label for="feedback1">反馈 1：</label>
<label for="feedback1">反馈 2：</label>
<input type="text" id="feedback1" name="feedback" required>

可访问性

使用 ​​<label>​​ 元素有助于提高表单的可用性和无障碍性。屏幕阅读器可以更好地朗读字段说明，从而使视障人士能够更好地完成表单。

---

表单分组 (​​<fieldset>​​ 和 ​​<legend>​​)

为了将表单的相关控件分组，HTML 提供了 ​​<fieldset>​​ 元素。你可以使用 ​​<legend>​​ 元素来为分组提供标题。

使用 ​​<fieldset>​​

以下是一个使用 ​​<fieldset>​​ 和 ​​<legend>​​ 的示例：

<fieldset><legend>个人信息</legend><label for="name">姓名：</label><input type="text" id="name" name="name" required><label for="age">年龄：</label><input type="number" id="age" name="age" required>
</fieldset>

视觉效果

​​<fieldset>​​ 的使用不仅有助于逻辑组织表单结构，还能为用户提供视觉上的引导。屏幕阅读器会读取 ​​<legend>​​​ 标签的内容，使表单控件更加易于理解。

---

表单控件

常用的表单控件

• 文本框：用于单行文本输入。
• 文本域（textarea）：用于多行文本输入。
• 单选框（radio）：用于一组选项中的单选。
• 复选框（checkbox）：用于多选项的选择。
• 下拉列表（select）：用于从多个选项中选择。

接下来，我们将构建一个关于读书的问卷表单，以展示如何充分利用以上元素和控件。

<form action="/submit-survey" method="POST"><fieldset><legend>读书问卷</legend><label for="name">姓名：</label><input type="text" id="name" name="name" required><label for="email">邮箱：</label><input type="email" id="email" name="email" required><label for="favoriteBook">最喜欢的书：</label><input type="text" id="favoriteBook" name="favoriteBook" required><label>你通常多久读一本书？</label><label><input type="radio" name="readingFrequency" value="每天"> 每天</label><label><input type="radio" name="readingFrequency" value="每周"> 每周</label><label><input type="radio" name="readingFrequency" value="每月"> 每月</label><label>你喜欢的书籍类型：</label><label><input type="checkbox" name="genres" value="小说"> 小说</label><label><input type="checkbox" name="genres" value="非小说"> 非小说</label><label><input type="checkbox" name="genres" value="自助"> 自助</label><label><input type="checkbox" name="genres" value="历史"> 历史</label><label for="comments">额外评论：</label><textarea id="comments" name="comments" rows="4" cols="50"></textarea><input type="submit" value="提交"></fieldset>
</form>

姓名和邮箱：实现了基本的文本输入和电子邮件输入，均为必填项。

最喜欢的书：使用单行文本输入收集用户最爱的书名。

阅读频率：使用单选框，允许用户在每天、每周和每月之间选择。

书籍类型：使用复选框，允许用户选择他们喜欢的多种书籍类型，反映多选的意图。

额外评论：使用文本域收集用户的额外反馈。

在表单的末尾，添加了一个提交按钮，以便用户完成输入后能够发送数据。

---

表单验证

HTML5 提供了基本的表单验证功能，如使用 ​​required​​、​​minlength​​、​​maxlength​​ 和 ​​pattern​​ 属性。如下是一个示例：

<label for="num">数量（需满足读5本以上！）：</label>
<input type="number" id="num" name="num" min="5" required>

上述示例中，表单验证会确保用户需满足读5本以上。

自定义验证消息

你还可以使用 JavaScript 来添加自定义表单验证消息。以下是 JavaScript 示例：

<script>
document.querySelector('form').addEventListener('submit', function(event) {var numInput = document.querySelector('#num');if (numInput.value < 5) {alert('需满足读5本以上！');event.preventDefault(); // 阻止表单提交}
});
</script>