何雨果的知识库

Appearance

HTML 表单与输入 ​

BeginnerHTML Interaction

表单是用户与网站交互的主要方式——登录、注册、搜索、提交数据都依赖表单元素。

一、📝 表单基本结构 ​

html
<form action="/submit" method="POST">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" />

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

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

核心属性 ​

属性说明
action表单提交的目标 URL（服务器端处理地址）
methodHTTP 方法：GET（查询）或 POST（提交数据）

GET vs POST 表单 ​

特性method="GET"method="POST"
数据位置URL 参数（?key=value）请求体（Body）
可见性URL 中可见URL 中不可见
数据量受 URL 长度限制（约 2KB）无明显限制
适用场景搜索、筛选登录、注册、文件上传

二、🔤 输入元素（Input Types） ​

<input> 是最灵活的表单元素，通过 type 属性可变身为多种控件：

2.1 文本类 ​

type渲染效果用途
text单行文本框通用文本输入
password密码框（内容隐藏）密码输入
email文本框 + 邮箱格式验证电子邮件
url文本框 + URL 格式验证网址输入
tel文本框（移动端弹出数字键盘）电话号码
search搜索框（可能带清除按钮）站内搜索

2.2 数值与日期 ​

type渲染效果用途
number数字输入框（带上下箭头）数量、金额
range滑块音量、亮度
date日期选择器出生日期
time时间选择器预约时间
datetime-local日期+时间选择器活动时间
month月份选择器信用卡过期月
color颜色选择器主题颜色

2.3 选择与开关 ​

type渲染效果用途
checkbox复选框 ☑多选（如同意条款）
radio单选按钮 ◉单选（如性别）
html
<!-- 单选按钮：同一组使用相同 name -->
<input type="radio" id="male" name="gender" value="male" />
<label for="male">男</label>

<input type="radio" id="female" name="gender" value="female" />
<label for="female">女</label>

2.4 文件与隐藏 ​

type渲染效果用途
file文件选择按钮上传文件
hidden不可见传递隐藏数据（如 CSRF 令牌）

2.5 按钮类 ​

type作用
submit提交表单
reset重置所有表单字段
button普通按钮（需 JS 绑定行为）

三、📋 其他表单元素 ​

3.1 下拉选择（Select） ​

html
<label for="city">城市：</label>
<select id="city" name="city">
  <option value="">请选择</option>
  <option value="beijing">北京</option>
  <option value="shanghai">上海</option>
  <option value="guangzhou">广州</option>
</select>

使用 <optgroup> 可以为选项分组：

html
<select name="food">
  <optgroup label="水果">
    <option value="apple">苹果</option>
    <option value="banana">香蕉</option>
  </optgroup>
  <optgroup label="蔬菜">
    <option value="carrot">胡萝卜</option>
    <option value="tomato">番茄</option>
  </optgroup>
</select>

3.2 多行文本（Textarea） ​

html
<label for="bio">自我介绍：</label>
<textarea id="bio" name="bio" rows="5" cols="40"
  placeholder="请输入自我介绍..."></textarea>
属性说明
rows可见行数（高度）
cols可见列数（宽度）
placeholder占位提示文本

3.3 字段集（Fieldset） ​

将相关的表单控件分组，提升结构和可读性：

html
<fieldset>
  <legend>个人信息</legend>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" />

  <label for="age">年龄：</label>
  <input type="number" id="age" name="age" />
</fieldset>

四、✅ 表单验证 ​

HTML5 内置了客户端验证能力，无需 JavaScript 即可实现基本校验。

4.1 验证属性 ​

属性说明示例
required字段必填<input required />
minlength最小字符数<input minlength="6" />
maxlength最大字符数<input maxlength="20" />
min / max数值范围<input type="number" min="0" max="100" />
pattern正则表达式匹配<input pattern="[A-Za-z]{3}" />
step数值步进<input type="number" step="0.01" />

4.2 示例：注册表单 ​

html
<form action="/register" method="POST">
  <label for="username">用户名（3-20 字符）：</label>
  <input type="text" id="username" name="username"
    required minlength="3" maxlength="20" />

  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email" required />

  <label for="password">密码（至少 8 位）：</label>
  <input type="password" id="password" name="password"
    required minlength="8" />

  <label for="age">年龄（18-120）：</label>
  <input type="number" id="age" name="age"
    min="18" max="120" />

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

4.3 类型自带验证 ​

某些 type 自带格式验证，无需额外属性：

type自动验证
email必须包含 @ 和域名
url必须是有效的 URL 格式
number必须是数字
date必须是有效日期

不要仅依赖客户端验证

HTML5 验证可以被浏览器开发者工具轻松绕过。服务器端验证 是安全的最后一道防线，永远不可省略。

五、♿ 无障碍最佳实践 ​

5.1 Label 关联 ​

每个输入控件都必须关联一个 <label>，有两种方式：

html
<!-- 方式一：for + id 关联（推荐） -->
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" />

<!-- 方式二：嵌套关联 -->
<label>
  邮箱：
  <input type="email" name="email" />
</label>

关联后点击 label 文本也能聚焦输入框，提升可用性和无障碍体验。

5.2 Placeholder 不能替代 Label ​

html
<!-- ❌ 错误：只有 placeholder，没有 label -->
<input type="text" placeholder="请输入用户名" />

<!-- ✅ 正确：label + placeholder -->
<label for="user">用户名：</label>
<input type="text" id="user" placeholder="例如：john_doe" />

placeholder 在用户开始输入后会消失，不能作为字段说明的唯一来源。

六、🏷️ 常用 Input 属性速查 ​

属性说明
name字段名（提交时作为键名）
value默认值
placeholder占位提示文本
required必填
disabled禁用（不可编辑、不提交）
readonly只读（不可编辑、但会提交）
autofocus页面加载时自动聚焦
autocomplete浏览器自动填充（on / off）

七、📚 参考资源 ​

← 返回 Web 开发研究