HTML 教程 / HTML表单

HTML 表单

表单是HTML中用于收集用户输入信息的重要组成部分。无论是用户注册、登录、搜索还是留言反馈，都离不开表单的使用。

什么是表单？

表单是一个包含表单元素的区域，用于让用户输入数据并提交到服务器。表单元素包括文本框、密码框、单选按钮、复选框、下拉列表、文本域等。

表单的工作流程
  • 用户在表单中输入数据
  • 用户点击提交按钮
  • 浏览器将数据打包并发送到服务器
  • 服务器处理数据并返回响应

<form> 标签

表单使用 <form> 标签创建，是所有表单元素的容器。

<form action="submit.php" method="POST">
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username">
    <button type="submit">提交</button>
</form>

form 标签常用属性

属性 说明 示例值
action 规定表单提交的URL地址 /submit, submit.php
method 规定提交时使用的HTTP方法 GET, POST
target 规定表单提交后在哪里显示响应 _self, _blank
enctype 规定表单数据的编码类型 application/x-www-form-urlencoded, multipart/form-data
name 规定表单的名称 userForm
autocomplete 规定表单是否启用自动完成 on, off

GET 与 POST 的区别

表单提交主要有两种方法：GET 和 POST。

特性 GET POST
参数位置 显示在URL中 放在请求体中
安全性 较低，数据可见 较高，数据不可见
数据大小 受URL长度限制（约2KB） 无限制
使用场景 查询、搜索等只读操作 登录、注册、数据提交等
缓存 可以缓存 不被缓存
安全建议

敏感信息（如密码、身份证号等）必须使用 POST 方法提交，避免信息暴露在URL中。

基础表单示例

下面是一个包含用户名和密码的登录表单：

<form action="/login" method="POST">
    <div>
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" required>
    </div>
    <div>
        <label for="password">密码：</label>
        <input type="password" id="password" name="password" required>
    </div>
    <button type="submit">登录</button>
</form>

使用 label 提升可访问性

<label> 标签为表单元素提供说明文字，同时提升可访问性和用户体验。

label 的作用
  • 点击 label 文字时，关联的输入框会自动获得焦点
  • 屏幕阅读器能够正确朗读表单内容
  • 在视觉上给出清晰的输入提示
<!-- 方法1：label 的 for 属性关联 input 的 id -->
<label for="email">邮箱地址：</label>
<input type="email" id="email" name="email">

<!-- 方法2：label 直接包裹 input -->
<label>
    <input type="checkbox" name="remember">
    记住我
</label>

交互式示例

在下面的代码编辑器中，尝试修改表单内容并点击"运行"查看效果：

💻 在线代码编辑器
👁️ 预览效果