表单与输入元素

约 1232 字大约 4 分钟

布欧-Lewyon

2026-05-16

表单是用户与网站交互的核心——登录、注册、搜索、下单都通过表单实现。

`<form>` 基本结构

<form action="/submit" method="post">
  <!-- 表单控件在这里 -->
  <button type="submit">提交</button>
</form>

属性	作用
`action`	数据提交的 URL
`method`	HTTP 方法：`get`（URL 参数） / `post`（请求体）
`enctype`	编码类型（文件上传时用 `multipart/form-data`）
`name`	表单名称
`novalidate`	关闭 HTML5 验证

GET vs POST

<!-- GET：搜索表单，参数显示在 URL 中 -->
<form action="/search" method="get">
  <input name="q" type="search">
  <button type="submit">搜索</button>
</form>
<!-- 提交后 URL: /search?q=关键词 -->

<!-- POST：登录表单，参数在请求体中 -->
<form action="/login" method="post">
  <input name="username" type="text">
  <input name="password" type="password">
  <button type="submit">登录</button>
</form>

`<label>` 标签关联

<label> 为表单控件提供文字说明。点击 label 可聚焦对应的输入框：

<!-- 方式一：用 for 关联 id -->
<label for="username">用户名：</label>
<input id="username" name="username" type="text">

<!-- 方式二：用 label 包裹 input -->
<label>
  用户名：
  <input name="username" type="text">
</label>

无障碍：每个 <input> / <textarea> / <select> 都应该有关联的 <label>。

`<input>` 输入元素

`type="text"` 文本

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

`type="password"` 密码

<input type="password" name="password" placeholder="至少6位">

`type="email"` 邮箱

<input type="email" name="email" placeholder="example@email.com" multiple>

浏览器会自动验证邮箱格式（@ 和域名）。

`type="checkbox"` 复选框

<label><input type="checkbox" name="hobby" value="reading"> 阅读</label>
<label><input type="checkbox" name="hobby" value="music" checked> 音乐</label>

`type="radio"` 单选按钮

同 name 的 radio 自动互斥：

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

`type="file"` 文件上传

<form action="/upload" method="post" enctype="multipart/form-data">
  <label>头像：<input type="file" name="avatar" accept="image/*"></label>
  <button>上传</button>
</form>

属性	作用
`accept`	接受的文件类型（如 `image/*`、`.pdf,.doc`）
`multiple`	允许选择多个文件
`capture`	指定拍摄方式（`environment` 后置 / `user` 前置）

`type="hidden"` 隐藏字段

<input type="hidden" name="token" value="abc123">

`type="submit"` / `type="reset"` / `type="button"`

<input type="submit" value="提交">   <!-- 提交表单 -->
<input type="reset" value="重置">     <!-- 重置到初始值 -->
<input type="button" value="普通按钮"> <!-- 无默认行为，需 JS 控制 -->

`<textarea>` 多行文本

<label for="bio">个人简介：</label>
<textarea id="bio" name="bio" rows="4" cols="40" maxlength="500" placeholder="介绍一下自己">
默认内容
</textarea>

`<select>` + `<option>` 下拉选择

<label for="city">城市：</label>
<select id="city" name="city">
  <option value="">请选择</option>
  <option value="beijing">北京</option>
  <option value="shanghai" selected>上海</option>
  <option value="shenzhen">深圳</option>
</select>

<!-- 多选 -->
<select name="skills" multiple size="4">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
</select>

<!-- 用 <optgroup> 分组 -->
<select name="fruit">
  <optgroup label="热带水果">
    <option value="mango">芒果</option>
    <option value="banana">香蕉</option>
  </optgroup>
  <optgroup label="温带水果">
    <option value="apple">苹果</option>
    <option value="grape">葡萄</option>
  </optgroup>
</select>

`<datalist>` 建议列表

输入时显示建议（类似搜索框的自动补全）：

<label for="browser">浏览器：</label>
<input id="browser" name="browser" list="browsers">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
  <option value="Opera">
</datalist>

<datalist> 与 <select> 的区别在于——前者允许用户自由输入（建议而非限制），后者只能选择预设项。

`<button>` 按钮

<!-- submit 按钮（默认行为：提交表单） -->
<button type="submit">提交表单</button>

<!-- reset 按钮（重置表单） -->
<button type="reset">重置</button>

<!-- 普通按钮（需要 JS） -->
<button type="button" onclick="alert('点击')">点我</button>

<button> 与 <input type="submit"> 的区别：<button> 可以包含 HTML 内容（图标、加粗文本等），更灵活。

表单分组 `<fieldset>` + `<legend>`

<form>
  <fieldset>
    <legend>基本信息</legend>
    <label>姓名：<input name="name"></label>
    <label>年龄：<input name="age" type="number"></label>
  </fieldset>

  <fieldset>
    <legend>联系方式</legend>
    <label>邮箱：<input name="email" type="email"></label>
    <label>电话：<input name="phone" type="tel"></label>
  </fieldset>

  <button type="submit">提交</button>
</form>

常用属性总结

属性	适用元素	作用
`placeholder`	input, textarea	占位提示文本
`value`	input, option	默认值
`name`	input, select, textarea	提交时的键名（必填）
`disabled`	所有表单元素	禁用（不可交互、不可提交）
`readonly`	input, textarea	只读（可查看、可提交）
`required`	input, select, textarea	必填
`maxlength`	input, textarea	最大字符数
`autofocus`	input, select, textarea	页面加载时自动聚焦
`checked`	checkbox, radio	默认选中
`selected`	option	默认选中

<!-- 综合示例 -->
<form action="/register" method="post">
  <fieldset>
    <legend>注册</legend>

    <label>用户名：
      <input name="username" required minlength="3" maxlength="20"
        placeholder="3-20个字符" autofocus>
    </label>

    <label>邮箱：
      <input name="email" type="email" required placeholder="example@email.com">
    </label>

    <label>密码：
      <input name="password" type="password" required minlength="6"
        placeholder="至少6位">
    </label>

    <label>简介：
      <textarea name="bio" rows="3" maxlength="200"
        placeholder="介绍一下自己（选填）"></textarea>
    </label>

    <button type="submit">注册</button>
  </fieldset>
</form>

小结

元素	用途
`<form>`	表单容器
`<label>`	控件说明，`for` 关联 `id`
`<input>`	多种输入类型
`<textarea>`	多行文本
`<select>` + `<option>`	下拉选择
`<datalist>`	建议列表
`<button>`	提交/重置/普通按钮
`<fieldset>` + `<legend>`	表单分组

上一节：表格下一节：HTML5 输入类型与验证