表单验证 on Last Stand

表单验证

Mon, 14 Oct 2024 00:00:00 +0800

HTML 表单是用于收集用户输入数据的重要元素，通常用于提交到服务器进行处理。它包括一系列控件，如文本输入框、按钮、复选框、单选按钮、文件上传等。表单通过 form 标签定义，用户可以通过这些控件与网页进行交互。

1. 基础结构

表单通过 <form> 标签创建，表单的 action 属性定义数据提交的目标 URL，method 属性定义提交方式（如 GET 或 POST）。

<form action="/submit" method="POST">
 <input type="text" name="username">
 <input type="submit" value="Submit">
</form>

2. 表单控件

HTML 表单提供了多种用户输入控件：

文本输入 (<input type="text">, <textarea>)
密码输入 (<input type="password">)
单选框和复选框 (<input type="radio">, <input type="checkbox">)
下拉列表 (<select>)
按钮 (<button>, <input type="submit">)
文件上传 (<input type="file">)
隐藏输入 (<input type="hidden">)

3. 表单的属性

action：指定表单数据提交到的 URL。
method：定义提交方式，常用 GET（将数据附在 URL 后）和 POST（将数据放入 HTTP 请求体中）。
enctype：指定数据的编码类型，常用于文件上传（如 multipart/form-data）。
autocomplete：启用或禁用浏览器的自动完成功能。

4. 表单校验

HTML5 引入了许多新的表单校验功能，能够减少 JavaScript 校验代码的复杂度。校验功能包括：