HTML 表单

引入

HTML 元素属性中有 id 和 name，这两个有什么区别？

回答

HTML 表单用于收集用户输入的数据，例如登录、注册、搜索、留言等。

网页不只是展示内容，也经常需要让用户填写信息，这时就需要使用表单。

正文

定义

定义

HTML 表单是一组用于收集用户输入的控件，通常使用 <form> 标签包裹，再通过输入框、按钮、下拉框等元素组成。

表单的作用是把用户输入的内容组织起来，然后提交给服务器或交给 JavaScript 处理。

基础语法

<form action="/submit" method="post">
  <input type="text" name="username">
  <button type="submit">提交</button>
</form>

其中：

• <form> 表示表单区域
• action 表示表单提交到哪里
• method 表示提交方式
• <input> 表示输入控件
• name 表示提交时的数据名称
• <button type="submit"> 表示提交按钮

<form> 标签

<form> 用于包裹一组表单控件。

<form action="/login" method="post">
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit">登录</button>
</form>

表单里的控件如果有 name 属性，提交时才更容易被服务器识别。

action 属性

action 用于指定表单数据提交到哪个地址。

<form action="/search">
  <input type="text" name="keyword">
  <button type="submit">搜索</button>
</form>

如果没有后端接口，初学时也可以先不写 action，重点先理解表单结构。

method 属性

method 用于指定表单提交数据的方式。

常见值：

• get：数据会出现在网址中，适合搜索、筛选这类不敏感数据
• post：数据不会直接显示在网址中，适合登录、注册、提交内容等场景

<form action="/login" method="post">
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit">登录</button>
</form>

post 比 get 更适合提交账号密码，但真正的安全还需要 HTTPS 和后端处理。

输入框

<input> 是最常见的表单控件，可以通过 type 属性变成不同类型。

文本输入框

type="text" 用于输入普通文本。

<input type="text" name="username" placeholder="请输入用户名">

密码输入框

type="password" 用于输入密码，页面中通常会显示为圆点或星号。

<input type="password" name="password" placeholder="请输入密码">

它只是让密码在页面上不直接显示，不代表数据本身已经安全。

邮箱输入框

type="email" 用于输入邮箱，浏览器会做一些基础格式检查。

<input type="email" name="email" placeholder="请输入邮箱">

数字输入框

type="number" 用于输入数字。

<input type="number" name="age" min="1" max="120">

min 和 max 可以限制数字范围。

单选框

type="radio" 用于单选。

同一组选项需要使用相同的 name。

<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女

同一组单选框中，用户通常只能选择一个。

复选框

type="checkbox" 用于多选。

<input type="checkbox" name="hobby" value="html"> HTML
<input type="checkbox" name="hobby" value="css"> CSS
<input type="checkbox" name="hobby" value="js"> JavaScript

复选框适合兴趣、标签、功能开关等可以选择多个的场景。

文件上传

type="file" 用于选择本地文件。

<input type="file" name="avatar">

文件上传通常还需要后端配合处理。

隐藏字段

type="hidden" 用于提交页面上不需要显示的数据。

<input type="hidden" name="userId" value="1001">

隐藏字段用户在页面上看不到，但不能当作安全手段，因为它仍然可以被查看和修改。

标签说明

<label> 用于给表单控件添加说明文字。

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

for 的值要和输入控件的 id 对应。

这样点击文字时，也可以聚焦到对应输入框，对用户更友好。

多行文本框

<textarea> 用于输入多行文本，例如留言、评论、自我介绍。

<textarea name="message" rows="4" cols="30">默认内容</textarea>

rows 表示可见行数，cols 表示可见宽度。

下拉选择框

<select> 用于创建下拉选择框，里面的选项使用 <option>。

<select name="city">
  <option value="beijing">北京</option>
  <option value="shanghai">上海</option>
  <option value="guangzhou">广州</option>
</select>

value 是提交时真正传递的值，标签中间的文字是用户看到的内容。

按钮

<button> 用于创建按钮。

常见 type：

• submit 表示提交表单
• reset 表示重置表单
• button 表示普通按钮，通常配合 JavaScript 使用

<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>

如果按钮在 <form> 里面，建议明确写出 type，避免默认行为带来误操作。

常见属性

name

name 是表单提交时的数据名称。

<input type="text" name="username">

如果没有 name，这个输入框的值通常不会作为表单数据提交。

value

value 表示输入控件的默认值或提交值。

<input type="text" name="username" value="admin">

对于单选框和复选框，value 是选中后提交的值。

placeholder

placeholder 用于显示输入提示。

<input type="text" name="username" placeholder="请输入用户名">

它只是提示，不是真正的默认值。

required

required 表示必填，提交时浏览器会做基础检查。

<input type="text" name="username" required>

required 是布尔属性，写上它就表示开启必填。

checked

checked 用于让单选框或复选框默认选中。

<input type="checkbox" name="agree" checked> 我同意

页面加载时，这个选项会处于选中状态。

disabled

disabled 表示禁用控件，用户不能操作。

<input type="text" name="username" disabled>

被 disabled 的表单控件通常不会提交数据。

readonly

readonly 表示只读，用户可以看到内容，但不能修改。

<input type="text" name="username" value="admin" readonly>

readonly 和 disabled 不一样，只读字段通常仍然可以提交数据。

autocomplete

autocomplete 用于告诉浏览器是否可以自动完成表单内容，以及当前字段内容的语义。

<form autocomplete="on">
  <label for="email">邮箱：</label>
  <input id="email" type="email" name="email" autocomplete="email">
</form>

常用取值如下：

取值	用途
on	允许浏览器自动填充，适合普通表单。
off	请求浏览器不要自动填充。浏览器可能出于密码管理等安全策略忽略该设置。
name	姓名。
email	电子邮箱。
username	用户名或账号。
current-password	当前密码，常用于登录表单。
new-password	新密码，常用于注册或修改密码。
tel	电话号码。
street-address	街道地址。
postal-code	邮政编码。
one-time-code	一次性验证码。

autocomplete 可以写在 <form> 上，也可以写在具体的表单控件上。控件上的设置优先级更高：

<form autocomplete="off">
  <!-- 即使表单整体关闭自动完成，也明确允许该字段自动填充 -->
  <input type="email" name="email" autocomplete="email">
</form>

简单完整例子

登录表单

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

这个表单包含用户名、密码和提交按钮，适合表示最基础的登录场景。

特点

• <form> 用于包裹表单控件
• action 决定表单提交到哪里
• method 决定表单提交方式
• <input> 可以通过 type 变成不同输入控件
• <label> 可以让表单说明和控件关联起来
• name 是表单提交时的重要字段名
• required、checked、disabled、readonly 都是常见表单属性

注意事项

• 表单控件要写 name，否则提交时可能拿不到数据
• 密码框只是隐藏显示内容，不代表数据绝对安全
• 前端校验只能提升体验，不能代替后端校验
• disabled 控件通常不会提交数据，readonly 控件通常可以提交数据
• 单选框如果属于同一组，要使用相同的 name
• 按钮放在表单中时，建议明确写 type
• 登录、注册这类表单需要配合 HTTPS 和后端安全处理

理解

可以把 HTML 表单理解为网页中的“信息收集器”。

用户在输入框、单选框、复选框里填写或选择内容，表单负责把这些内容整理成一组数据。

表单本身只负责结构和基础提交，真正的数据处理通常要交给后端或 JavaScript。

引出

理解表单之后，可以继续学习 HTML 输入控件，进一步了解不同 input 类型的具体用法。