HTML 表单

HTML表单（HTML Form）是网页中用于收集用户输入的数据的容器。它允许用户输入文本、选择选项、上传文件等，并将这些数据提交到服务器进行处理。以下是对HTML表单的详细介绍：

一、表单的基本结构

HTML表单由<form>标签定义，它包含了一系列用于收集用户输入的表单元素（如输入框、选择框、按钮等）。表单的基本结构如下：

• action属性：定义表单数据提交到的URL（即服务器端处理表单数据的脚本地址）。
• method属性：定义数据提交的方式，常用的有GET和POST两种。GET方法会将表单数据附加在URL后面，而POST方法会将表单数据作为HTTP请求的主体发送。

二、表单元素

HTML表单包含多种表单元素，用于收集不同类型的用户输入。以下是一些常见的表单元素：

1. 输入框：
   • <input type="text">：单行文本输入框。
   • <input type="password">：密码输入框，输入内容以点或星号显示。
   • <input type="email">：电子邮件地址输入框，通常带有验证功能。
   • <input type="number">：数字输入框，通常带有数字键盘。
   • <input type="date">、<input type="time">、<input type="datetime-local">等：日期和时间输入框。
2. 文本区域：
   • <textarea>：多行文本输入框，用于输入较长的文本内容。
3. 选择框：
   • <select>和<option>：下拉选择框，用户可以从预定义的选项中选择一个或多个值。
4. 复选框和单选按钮：
   • <input type="checkbox">：复选框，用户可以选择多个选项。
   • <input type="radio">：单选按钮，用户只能从一组选项中选择一个值。
5. 按钮：
   • <input type="submit">：提交按钮，用于提交表单数据。
   • <input type="reset">：重置按钮，用于重置表单中的所有输入字段到初始值。
   • <button>：按钮元素，可以包含文本或图像，用于触发客户端脚本或提交表单。
6. 文件上传：
   • <input type="file">：文件选择框，允许用户选择一个或多个文件上传到服务器。
7. 隐藏字段：
   • <input type="hidden">：隐藏字段，用于在表单提交时传递不需要用户查看的数据。

三、表单的验证

为了提高表单数据的准确性和安全性，HTML5引入了表单验证功能。通过在表单元素上添加特定的属性，可以实现客户端的表单验证，如：

• required属性：指定字段为必填项。
• pattern属性：使用正则表达式指定字段的输入模式。
• min和max属性：指定数值或日期输入字段的最小值和最大值。
• step属性：指定数值输入字段的合法间隔。
• maxlength属性：指定文本输入字段的最大字符数。

四、表单的提交和处理

当用户填写完表单并点击提交按钮时，表单数据会根据method属性指定的方式发送到action属性指定的URL。服务器端脚本（如PHP、Python、Node.js等）将接收并处理这些数据，然后根据处理结果返回相应的响应。

五、示例

以下是一个简单的HTML表单示例，包含用户名和密码输入框以及一个提交按钮：

在这个示例中，当用户填写完用户名和密码并点击“登录”按钮时，表单数据将通过POST方法发送到/login URL进行处理。