首页 › HTML › 表格与表单 › HTML5 输入类型与验证

HTML5 新增了多种输入类型和表单验证特性，无需 JavaScript 即可实现基础的输入校验。

HTML5 新增输入类型

日期/时间相关

<label>日期：<input type="date" name="date"></label>
<label>时间：<input type="time" name="time"></label>
<label>日期+时间：<input type="datetime-local" name="datetime"></label>
<label>月份：<input type="month" name="month"></label>
<label>周：<input type="week" name="week"></label>

所有日期输入均弹出浏览器原生日期选择器，无需 UI 库。

数字相关

<label>数量：
  <input type="number" name="quantity" min="1" max="100" step="1" value="10">
</label>

属性	作用
min	最小值
max	最大值
step	步进值（如 0.1 支持小数，或 any 无限制）
value	默认值

范围滑块

<label>
  音量：<input type="range" name="volume" min="0" max="100" value="50">
</label>

颜色选择

<label>
  主题色：<input type="color" name="color" value="#1890ff">
</label>

其他类型

<!-- 搜索（语义化搜索框） -->
<input type="search" name="q" placeholder="搜索...">

<!-- 电话（移动端弹出数字键盘） -->
<input type="tel" name="phone" placeholder="请输入手机号">

<!-- URL 验证 -->
<input type="url" name="website" placeholder="https://example.com">

<!-- 阻止自动填充 -->
<input type="text" name="one-time-code" autocomplete="off">

HTML5 表单验证

验证属性

<form>
  <label>用户名：
    <input name="username" required
      minlength="3" maxlength="20"
      pattern="[A-Za-z0-9_]+"
      title="只能包含字母、数字和下划线">
  </label>

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

  <label>年龄：
    <input type="number" name="age" required min="18" max="120">
  </label>

  <label>网站：
    <input type="url" name="website" placeholder="https://">
  </label>

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

属性	作用
required	必填字段
minlength / maxlength	文本最小/最大长度
min / max	数字/日期最小值/最大值
pattern	正则表达式验证
step	数字步进
type="email"	内置邮箱格式验证
type="url"	内置 URL 格式验证
title	验证失败时的提示文字

pattern 正则验证

<!-- 6位数字邮编 -->
<input type="text" pattern="[0-9]{6}" title="请输入6位数字邮编">

<!-- 手机号（简单版） -->
<input type="tel" pattern="1[3-9]\d{9}" title="请输入11位手机号">

<!-- 字母开头、4-16位字母或数字 -->
<input type="text" pattern="[A-Za-z][A-Za-z0-9_]{3,15}" title="字母开头，4-16位">

验证 CSS 伪类

注：以下伪类用于 CSS 样式控制，但仅列出供参考（CSS 后续独立输出）：

伪类	时机
:valid	验证通过
:invalid	验证失败
:required	必填字段
:optional	非必填字段
:in-range	值在范围内
:out-of-range	值超出范围

关闭验证

<!-- 在 form 上关闭整个表单的验证 -->
<form novalidate>
  ...
</form>

<!-- 在 button 上跳过验证提交 -->
<button type="submit" formnovalidate>不验证直接提交</button>

<output> 输出元素

显示计算结果或用户操作的结果：

<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
  <input type="number" name="a" value="10"> +
  <input type="number" name="b" value="20"> =
  <output name="result">30</output>
</form>

小结

类型/属性	作用
date / time / datetime-local	日期时间选择
number / range	数字输入/滑块
color	颜色选择器
search / tel / url	专用语义类型
required / pattern / min / max	内置验证
novalidate	关闭验证
<output>	显示计算结果

上一节：表单与输入元素 下一节：语义标签与页面结构

贡献者: 布欧-Lewyon