【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>