HTML 中的 input

学习目标

掌握 <input> 标签的基本语法与核心作用
熟悉常用输入类型（如 text、password、email、number 等）及其适用场景
理解关键属性（如 placeholder、required、readonly、pattern 等）的功能与用法
能够结合语义化标签和基础样式构建可用、可访问的表单控件

什么是 `<input>`

<input> 是 HTML 中用于创建交互式表单控件的核心元素。它允许用户在网页中输入或选择数据，是收集用户信息常用手段。

必须嵌套在 <form> 元素内（也可独立存在，但通常配合表单使用）
通过 type 属性决定输入控件的类型
支持大量属性以控制行为、验证和外观
是实现前端表单验证和用户体验优化的关键组件

基础示例

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

说明：
<label> 的 for 属性与 <input> 的 id 匹配，点击标签即可聚焦输入框，提升可访问性。
type="text" 创建单行文本输入框。
name 属性用于在提交时标识该字段的数据名称。

常见输入类型

类型	描述	示例用途
`text`	单行普通文本	用户名、地址
`password`	掩码文本输入	密码字段
`email`	邮箱格式输入（带自动验证）	注册邮箱
`number`	数字输入（可设范围）	年龄、数量
`date`	日期选择器	出生日期、预约时间
`checkbox`	多选开关	兴趣订阅、同意条款
`radio`	单选按钮	性别、评分选项
`file`	文件上传控件	上传头像、文档
`color`	颜色选择器	主题色设置
`range`	滑动条选择数值	音量调节、评分
`submit`	提交按钮	表单提交
`button`	普通按钮	触发 JavaScript 操作
`hidden`	隐藏字段	存储不显示的 token 或 ID
`image`	图片形式的提交按钮	自定义提交图标

提示：现代浏览器会根据 type 自动优化移动端键盘（如 email 弹出带 @ 的键盘）。

核心属性

以下属性可显著增强 <input> 的功能与用户体验：

属性	作用	示例
`type`	指定输入类型（默认为 `text`）	`type="email"`
`name`	定义字段名称，用于表单提交	`name="phone"`
`value`	设置默认值或当前值	`value="admin"`
`placeholder`	显示浅色提示文字	`placeholder="请输入手机号"`
`required`	必填项，提交前必须填写	`required`
`readonly`	内容只读，不可编辑	`readonly`
`disabled`	禁用控件，不参与提交	`disabled`
`maxlength` / `minlength`	限制字符长度	`maxlength="11"`
`min` / `max`	限定数值或日期范围	`min="18" max="100"`
`step`	设置数值步长	`step="0.5"`
`pattern`	使用正则表达式验证	`pattern="[A-Za-z]{2,}"`
`autocomplete`	控制浏览器自动填充	`autocomplete="off"`
`autofocus`	页面加载时自动聚焦	`autofocus`
`multiple`	允许多选（如邮箱、文件）	`multiple`
`list`	关联 `<datalist>` 提供建议	`list="browsers"`

密码输入框

<head>
  <style>
    input[type="password"] {
      border: 2px solid #4CAF50;
      border-radius: 4px;
      padding: 10px;
      width: 200px;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <form>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password" required />
  </form>
</body>

特点：
输入内容被掩码（显示为圆点或星号）
使用 CSS 提升视觉体验
required 确保用户必须填写

邮箱输入框

<head>
  <style>
    input[type="email"] {
      border: 1px solid #ccc;
      padding: 8px;
      font-size: 14px;
      width: 250px;
    }
  </style>
</head>
<body>
  <form>
    <label for="email">邮箱：</label>
    <input 
      type="email" 
      id="email" 
      name="email" 
      placeholder="example@example.com"
      required 
    />
  </form>
</body>

优势：
浏览器自动验证邮箱格式（不符合格式时阻止提交）
placeholder 提供清晰输入示例
移动端自动调出带 @ 和 .com 的键盘

最佳实践建议

始终使用 <label>
为每个 <input> 提供明确的标签，提升屏幕阅读器兼容性和点击区域。
选择最匹配的 type
使用 email、tel、url、number 等语义化类型，可触发浏览器内置验证和优化输入体验。
合理使用验证属性
利用 required、minlength、pattern 等进行客户端初步验证，但不要替代服务器端校验。
避免滥用 disabled
若需显示但不可编辑，优先考虑 readonly；disabled 字段不会随表单提交。
提供清晰的错误提示
结合 JavaScript 或 CSS 伪类（如 :invalid）向用户反馈输入错误。

重点总结

<input> 是构建 Web 表单的基础，通过 type 属性支持多种数据输入方式。
正确使用 name、id、for 可确保表单结构语义清晰、可访问性强。
HTML5 新增的输入类型和验证属性大幅简化了前端开发。
样式与功能应兼顾，既要美观也要保证可用性与无障碍支持。

思考题

readonly 和 disabled 属性有何本质区别？在表单提交时它们的行为是否相同？
如果希望用户输入一个介于 100 到 999 之间的三位数，应如何组合使用 type、min、max 和 pattern？
如何利用 <datalist> 为一个“城市”输入框提供预设选项？请写出简要代码结构。

源本科技 | 码上会

学习目标

什么是 <input>

常见输入类型

核心属性

密码输入框

邮箱输入框

最佳实践建议

重点总结

思考题

什么是 `<input>`