PHP小码农

Appearance

input 标签总览 ​

<input> 是 HTML 表单中最核心、最灵活的元素。通过 type 属性，单个 <input> 标签可以呈现 20 多种不同的控件形态——从文本框、密码框到日期选择器、颜色选择器、文件选择器等。本节将全面梳理 <input> 的所有 type 值和全局属性，为后续各类型的详细学习建立整体认知。

前置知识

阅读本节前，建议先了解：autocomplete 与 novalidate

基础概念 ​

input 的核心地位 ​

<input> 是一个自闭合（void）元素，没有子内容，所有行为和外观完全由属性决定。它是 Web 表单中使用频率最高的元素，几乎所有用户数据输入都通过 <input> 完成。

html
<!-- 不同 type 产生完全不同的控件 -->
<input type="text">      <!-- 文本输入框 -->
<input type="password">  <!-- 密码输入框 -->
<input type="checkbox">  <!-- 复选框 -->
<input type="radio">     <!-- 单选按钮 -->
<input type="file">      <!-- 文件选择器 -->
<input type="date">      <!-- 日期选择器 -->

type 决定一切 ​

type 属性是 <input> 最关键的属性，它决定了：

  • 控件的外观：渲染为文本框、按钮、滑块还是下拉选择器
  • 输入方式：键盘输入、点击选择、拖拽还是文件选取
  • 数据类型：文本、数字、日期、颜色、文件
  • 浏览器验证：是否自动验证输入格式
  • 移动端键盘：弹出哪种虚拟键盘
  • 辅助功能：屏幕阅读器如何描述该控件

语法 ​

input 基本语法 ​

html
<input
  type="text"
  name="username"
  id="username"
  value="默认值"
  placeholder="提示文字"
  required
  disabled
  readonly
  autocomplete="username"
  maxlength="20"
>

全部 type 值一览 ​

HTML5 定义了以下 <input> type 值：

type 值控件类型数据类型浏览器自动验证移动端键盘
text文本输入框字符串否默认键盘
password密码输入框字符串（隐藏）否默认键盘
email邮箱输入框邮箱地址是邮箱键盘
number数字输入框数字是数字键盘
tel电话输入框电话号码否电话键盘
urlURL 输入框网址是URL 键盘
search搜索输入框搜索字符串否搜索键盘
hidden隐藏字段任意否无
checkbox复选框布尔/值否无
radio单选按钮值否无
file文件选择器文件否无
submit提交按钮无否无
reset重置按钮无否无
button普通按钮无否无
image图像提交按钮坐标否无
color颜色选择器颜色值否无
date日期选择器日期是无（原生控件）
datetime-local日期时间选择器日期时间是无（原生控件）
month月份选择器年-月是无（原生控件）
week周选择器年-周是无（原生控件）
time时间选择器时间是无（原生控件）
range滑块控件数字范围否无
datetime日期时间（已废弃）---
*未知类型--回退为 text

未知 type 回退

如果 <input> 的 type 设置为浏览器不认识的值，浏览器会将其回退为 type="text" 显示一个普通文本输入框。

详细说明 ​

全局 input 属性 ​

以下属性适用于大多数（但不一定是全部）<input> 类型：

通用属性 ​

属性适用类型说明示例值
name全部控件名称，提交数据的键名"username"
id全部唯一标识符"emailInput"
value全部控件的当前值"hello"
disabled全部禁用控件，不提交-
form全部关联外部表单"myForm"
autofocus全部页面加载后自动聚焦-
tabindex全部Tab 键导航顺序"1"
title全部悬停提示文本"请输入用户名"

文本输入相关属性 ​

属性适用类型说明示例值
placeholdertext, search, url, tel, email, password, number空值时显示的占位文字"请输入..."
maxlengthtext, search, url, tel, email, password最大字符数"100"
minlengthtext, search, url, tel, email, password最小字符数（验证用）"2"
patterntext, search, url, tel, email, password正则验证模式"^[a-z]+$"
sizetext, search, url, tel, email, password可见字符宽度"20"
readonlytext, search, url, tel, email, password, date, time 等只读，可提交-
spellchecktext, search, url, tel, email拼写检查"true" / "false"
listtext, search, url, tel, email, number, date, time 等关联的 datalist id"suggestions"
multipleemail, file允许多个值/文件-
dirnametext, search发送文本方向"dir"

数字相关属性 ​

属性适用类型说明示例值
minnumber, date, datetime-local, month, week, time, range最小值"0"
maxnumber, date, datetime-local, month, week, time, range最大值"100"
stepnumber, date, datetime-local, month, week, time, range步进值"1"

验证相关属性 ​

属性适用类型说明
requiredtext, search, url, tel, email, password, number, date, time, checkbox, radio, file必填
autocompletetext, search, url, tel, email, password, number, date, time自动补全类型

按 type 分类详解 ​

文本类输入 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>文本类输入控件</title>
  <style>
    .demo-group {
      margin-bottom: 20px;
      padding: 15px;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
    }

    .demo-group h3 {
      margin-top: 0;
      color: #333;
    }

    label {
      display: inline-block;
      width: 120px;
      font-weight: 500;
    }

    input {
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
      margin: 4px 0;
    }
  </style>
</head>
<body>
  <h2>文本类输入控件一览</h2>

  <div class="demo-group">
    <h3>type="text"（文本）</h3>
    <label>用户名：</label>
    <input type="text" name="username" placeholder="请输入用户名">
  </div>

  <div class="demo-group">
    <h3>type="password"（密码）</h3>
    <label>密码：</label>
    <input type="password" name="password" placeholder="请输入密码">
  </div>

  <div class="demo-group">
    <h3>type="email"（邮箱）</h3>
    <label>邮箱：</label>
    <input type="email" name="email" placeholder="user@example.com">
  </div>

  <div class="demo-group">
    <h3>type="number"（数字）</h3>
    <label>数量：</label>
    <input type="number" name="quantity" min="1" max="100" step="1" value="1">
  </div>

  <div class="demo-group">
    <h3>type="tel"（电话）</h3>
    <label>电话：</label>
    <input type="tel" name="phone" placeholder="13800138000">
  </div>

  <div class="demo-group">
    <h3>type="url"（网址）</h3>
    <label>网站：</label>
    <input type="url" name="website" placeholder="https://example.com">
  </div>

  <div class="demo-group">
    <h3>type="search"（搜索）</h3>
    <label>搜索：</label>
    <input type="search" name="q" placeholder="搜索...">
  </div>
</body>
</html>

选择类控件 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>选择类控件</title>
</head>
<body>
  <h2>选择类控件</h2>

  <h3>checkbox（复选框）</h3>
  <label><input type="checkbox" name="hobby" value="reading"> 阅读</label>
  <label><input type="checkbox" name="hobby" value="music"> 音乐</label>
  <label><input type="checkbox" name="hobby" value="sports" checked> 运动</label>

  <h3>radio（单选按钮）</h3>
  <label><input type="radio" name="gender" value="male"> 男</label>
  <label><input type="radio" name="gender" value="female" checked> 女</label>

  <h3>color（颜色选择器）</h3>
  <label>选择颜色：<input type="color" name="theme" value="#4a90d9"></label>

  <h3>range（滑块）</h3>
  <label>音量：<input type="range" name="volume" min="0" max="100" value="50"></label>
</body>
</html>

日期时间类控件 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>日期时间类控件</title>
</head>
<body>
  <h2>日期时间类控件</h2>

  <h3>date（日期）</h3>
  <input type="date" name="birthday">

  <h3>time（时间）</h3>
  <input type="time" name="alarm">

  <h3>datetime-local（日期时间）</h3>
  <input type="datetime-local" name="meeting">

  <h3>month（月份）</h3>
  <input type="month" name="start-month">

  <h3>week（周）</h3>
  <input type="week" name="work-week">
</body>
</html>

按钮类控件 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>按钮类控件</title>
</head>
<body>
  <h2>按钮类控件</h2>

  <!-- submit：提交表单（默认） -->
  <input type="submit" value="提交表单">

  <!-- reset：重置表单 -->
  <input type="reset" value="重置表单">

  <!-- button：普通按钮（不做任何事） -->
  <input type="button" value="普通按钮" onclick="alert('点击了')">

  <!-- image：图像提交按钮 -->
  <input type="image" src="submit.png" alt="提交" width="100" height="40">

  <!-- hidden：隐藏字段（不可见，数据随表单提交） -->
  <input type="hidden" name="token" value="abc123">
</body>
</html>

文件类控件 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>文件控件</title>
</head>
<body>
  <h2>文件选择控件</h2>

  <!-- 单文件选择 -->
  <input type="file" name="avatar" accept="image/*">

  <!-- 多文件选择 -->
  <input type="file" name="documents" multiple accept=".pdf,.doc,.docx">
</body>
</html>

移动端键盘类型 ​

在移动设备上，不同的 type 值会触发不同类型的虚拟键盘，这对用户体验至关重要。

type 值移动端键盘类型特点
text标准键盘完整的字母和数字键盘
email邮箱键盘包含 @ 和 . 快捷键
tel电话键盘数字键盘 + * #
urlURL 键盘包含 / . .com 快捷键
number数字键盘纯数字键盘
search搜索键盘标准键盘 + "搜索"按钮
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>移动端键盘优化</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <h2>移动端表单优化</h2>

  <!--
    在手机上打开此页面
    点击不同输入框会弹出不同的键盘
  -->

  <!-- 弹出带 @ 和 .com 的邮箱键盘 -->
  <input type="email" placeholder="邮箱（邮箱键盘）">

  <!-- 弹出纯数字电话键盘 -->
  <input type="tel" placeholder="电话（电话键盘）">

  <!-- 弹出带 / 和 .com 的 URL 键盘 -->
  <input type="url" placeholder="网址（URL键盘）">

  <!-- 弹出纯数字键盘 -->
  <input type="number" placeholder="数量（数字键盘）">

  <!-- 弹出标准键盘 + 搜索按钮 -->
  <input type="search" placeholder="搜索（搜索键盘）">
</body>
</html>

实战示例 ​

用户信息采集表单 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>input 类型综合示例</title>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      max-width: 600px;
      margin: 30px auto;
      padding: 20px;
    }

    .form-card {
      background: white;
      padding: 30px;
      border-radius: 12px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    }

    h2 {
      text-align: center;
      margin-bottom: 24px;
    }

    .form-group {
      margin-bottom: 16px;
    }

    label {
      display: block;
      margin-bottom: 6px;
      font-weight: 500;
    }

    input {
      width: 100%;
      padding: 10px 12px;
      border: 1px solid #ddd;
      border-radius: 6px;
      box-sizing: border-box;
      font-size: 14px;
    }

    input:focus {
      outline: none;
      border-color: #4a90d9;
    }

    .row {
      display: flex;
      gap: 16px;
    }

    .row .form-group {
      flex: 1;
    }

    button {
      width: 100%;
      padding: 12px;
      background-color: #4a90d9;
      color: white;
      border: none;
      border-radius: 6px;
      font-size: 16px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="form-card">
    <h2>用户信息</h2>
    <form action="/api/profile" method="post">
      <!-- 隐藏字段 -->
      <input type="hidden" name="source" value="web">

      <div class="row">
        <div class="form-group">
          <label for="name">姓名</label>
          <input type="text" id="name" name="name"
                 placeholder="真实姓名" required maxlength="20">
        </div>
        <div class="form-group">
          <label for="birthday">生日</label>
          <input type="date" id="birthday" name="birthday">
        </div>
      </div>

      <div class="form-group">
        <label for="email">邮箱</label>
        <input type="email" id="email" name="email"
               placeholder="user@example.com" required>
      </div>

      <div class="form-group">
        <label for="phone">手机号</label>
        <input type="tel" id="phone" name="phone"
               placeholder="13800138000" pattern="^1[3-9]\d{9}$">
      </div>

      <div class="form-group">
        <label for="website">个人网站</label>
        <input type="url" id="website" name="website"
               placeholder="https://yoursite.com">
      </div>

      <div class="row">
        <div class="form-group">
          <label for="city">所在城市</label>
          <input type="text" id="city" name="city"
                 placeholder="如：北京" list="cityList">
          <datalist id="cityList">
            <option value="北京">
            <option value="上海">
            <option value="广州">
            <option value="深圳">
            <option value="杭州">
          </datalist>
        </div>
        <div class="form-group">
          <label for="theme">主题颜色</label>
          <input type="color" id="theme" name="theme" value="#4a90d9">
        </div>
      </div>

      <div class="form-group">
        <label for="satisfaction">满意度：<span id="satisfactionValue">50</span>%</label>
        <input type="range" id="satisfaction" name="satisfaction"
               min="0" max="100" value="50">
      </div>

      <div class="form-group">
        <label for="avatar">头像</label>
        <input type="file" id="avatar" name="avatar" accept="image/*">
      </div>

      <button type="submit">保存信息</button>
    </form>
  </div>

  <script>
    // 实时显示滑块值
    const range = document.getElementById('satisfaction');
    const display = document.getElementById('satisfactionValue');
    range.addEventListener('input', () => {
      display.textContent = range.value;
    });
  </script>
</body>
</html>

注意事项 ​

  1. name 属性不可省略：没有 name 的 <input> 控件不会随表单提交。id 用于前端关联，name 用于数据提交。

  2. type 默认值是 text：如果省略 type 属性，<input> 默认为 type="text"。

  3. datetime 类型已废弃：type="datetime" 在 HTML5 中已被废弃，使用 datetime-local 代替。

  4. 日期时间类控件的浏览器兼容性：date、time、datetime-local 等原生日期控件在 Safari（iOS）上的支持较晚。在生产环境中，可能需要使用第三方日期选择器库作为 polyfill。

  5. color 控件的外观差异：type="color" 在不同浏览器中呈现不同（Chrome 为色块，Firefox 为文字按钮），样式控制能力有限。

  6. range 控件需要 JavaScript：type="range" 本身只显示滑块，要显示当前值需要配合 JavaScript 监听 input 事件。

最佳实践 ​

  1. 根据数据类型选择正确的 type：使用语义化的 type 值（email、tel、url、number 等），而非全部使用 text。这不仅提供自动验证，还优化移动端体验。

  2. 为所有输入框关联 label：使用 <label for="id"> 或将 <input> 放在 <label> 内部，提高可访问性。

  3. 合理使用 placeholder：placeholder 是辅助提示，不能替代 label。不要把 placeholder 当作唯一的标签说明。

  4. 为敏感字段使用 autocomplete token：如 autocomplete="current-password"、autocomplete="cc-number" 等。

  5. 使用 hidden 传递元数据：type="hidden" 适合传递用户不可见的辅助数据（如 token、来源标识等），但不要用于安全相关的数据。

下一节

继续学习：text 文本输入

参考链接 ​