<input>-输入控件

<input> 是 HTML 中最常用的表单元素之一，用于创建各种类型的输入控件，允许用户输入数据或与页面交互。它通过 type 属性定义不同的输入类型，支持文本、密码、复选框、单选按钮等多种形式。

<input> 的基本语法

<input> 是一个空元素，不需要闭合标签。它的核心属性是 type，用于指定输入控件的类型。基本语法如下：

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

常用属性包括：

• type：定义输入类型（如 text, password, checkbox 等）
• name：表单提交时的字段名
• id：用于关联 <label> 或 JavaScript 操作
• value：默认值
• placeholder：提示文本
• required：标记为必填字段

常见的输入类型

文本输入 (text)

最基本的文本输入框，用于接收单行文本：

<input type="text" name="fullname" placeholder="请输入姓名">

密码输入 (password)

用于输入敏感信息，输入内容会显示为圆点或星号：

<input type="password" name="pwd" minlength="8" required>

复选框 (checkbox)

允许选择多个选项：

<input type="checkbox" id="subscribe" name="subscribe" checked>
<label for="subscribe">订阅新闻</label>

单选按钮 (radio)

用于从一组选项中选择单个值：

<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>

文件上传 (file)

允许用户选择文件上传：

<input type="file" name="avatar" accept="image/*">

隐藏字段 (hidden)

存储不需要用户看到但需要提交的数据：

<input type="hidden" name="user_id" value="12345">

高级输入类型

HTML5 引入了更多语义化的输入类型：

邮箱地址 (email)

带有基本的邮箱格式验证：

<input type="email" name="user_email" multiple>

数字输入 (number)

限制只能输入数字，可设置范围：

<input type="number" name="age" min="18" max="99" step="1">

日期选择器 (date)

提供日期选择界面：

<input type="date" name="birthday" min="1900-01-01">

颜色选择器 (color)

允许用户选择颜色：

<input type="color" name="fav_color" value="#ff0000">

范围滑块 (range)

创建一个滑动条控件：

<input type="range" name="volume" min="0" max="100" step="5">

表单关联与验证

<label> 关联

正确关联标签可提升可访问性：

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

表单验证属性

<input type="text" required pattern="[A-Za-z]{3}" title="3个字母">
<input type="email" required>
<input type="url" placeholder="https://example.com">

样式与交互增强

禁用与只读状态

<input type="text" value="不可编辑" readonly>
<input type="text" disabled>

自动完成与自动聚焦

<input type="search" autocomplete="off" autofocus>

使用 datalist 提供建议

<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
</datalist>

实际应用示例

登录表单

<form>
  <div>
    <label for="email">邮箱：</label>
    <input type="email" id="email" required>
  </div>
  <div>
    <label for="pwd">密码：</label>
    <input type="password" id="pwd" minlength="6" required>
  </div>
  <div>
    <input type="checkbox" id="remember">
    <label for="remember">记住我</label>
  </div>
  <button type="submit">登录</button>
</form>

用户注册表单

<form>
  <fieldset>
    <legend>基本信息</legend>
    <input type="text" name="name" placeholder="姓名" required>
    <input type="tel" name="phone" placeholder="手机号" pattern="[0-9]{11}">
  </fieldset>

  <fieldset>
    <legend>偏好设置</legend>
    <input type="color" name="theme" value="#4CAF50">
    <input type="range" name="font_size" min="12" max="24" value="16">
  </fieldset>
</form>

浏览器兼容性考虑

虽然现代浏览器对 <input> 类型的支持已经很好，但某些类型在不支持的浏览器中会降级为 text 类型。可以使用特性检测：

if ('valueAsDate' in document.createElement('input')) {
  console.log('支持日期输入');
}

对于旧版浏览器，可能需要引入 polyfill 或 JavaScript 库来增强功能。

无障碍访问建议

1. 始终为 <input> 提供关联的 <label>
2. 对自定义控件使用 aria-* 属性
3. 确保焦点状态可见
4. 为视觉障碍用户提供足够的提示信息

<label for="search">搜索内容：</label>
<input type="search" id="search" aria-describedby="search-help">
<span id="search-help">请输入至少3个字符</span>

性能优化技巧

1. 避免过多的实时验证（使用 onchange 而非 oninput）
2. 对大型表单使用懒加载
3. 考虑移动设备上的输入体验
4. 合理使用 autocomplete 属性

<input type="text" name="address" autocomplete="street-address">