HTML5 Input 类型

HTML5 给 <input> 新增了一大批语义化输入类型：日期、颜色、数字、邮箱等，浏览器会自动提供对应的选择控件和格式校验。学习它们，可以让表单更易填写、减少前后端校验工作量。

常用新类型一览

类型	作用
color	取色器，值为 #rrggbb
date	日期选择，值为 yyyy-mm-dd
datetime-local	本地日期+时间
month / week	月份 / 周
time	时间 hh:mm
email	邮箱，自动校验格式
url	网址，自动校验格式
tel	电话号码（不校验，仅移动端弹数字键盘）
number	数字，可设 min/max/step
range	滑块，0~100 等范围取值
search	搜索框，带清除按钮

示例：一个综合表单

把类型直接写在 type 上即可，浏览器会自动渲染成对应控件。

<form>
    生日：<input type="date"><br>
    邮件：<input type="email" placeholder="you@example.com"><br>
    主页：<input type="url"><br>
    数量：<input type="number" min="1" max="10" value="1"><br>
    音量：<input type="range" min="0" max="100" value="50"><br>
    颜色：<input type="color" value="#ff0000"><br>
    搜索：<input type="search"><br>
    <input type="submit" value="提交">
</form>

在浏览器中显示为：日期出现日历选择器，邮箱/网址提交时自动检查格式，range 是可拖动的滑块，color 是取色器。

number 与 range 的细节

number 有上下箭头并可限制范围与步长：<input type="number" min="0" max="100" step="5">。想直观滑动取值就用 range，二者都可用 JS 读 value：

<input type="range" id="vol" min="0" max="100" value="30"
       oninput="document.getElementById('v').innerHTML=this.value">
<p>当前值：<span id="v">30</span></p>

在浏览器中显示为：拖动滑块时"当前值"数字实时变化。

易错点

① 老浏览器不认识新类型时会自动降级为普通文本框，功能靠不住时要自己加 JS 兜底；② email/url 的自动校验在提交时触发，但只挡格式错误，服务端仍必须校验；③ date 等控件的显示格式随浏览器/地区而变，取值才是标准格式，别拿显示文本当值；④ range 默认 0~100，取不到 min 时用 JS 记得读 value 而非 textContent。

小结：date/color/email/number/range 等 Input 新类型让表单更友好，浏览器负责 UI 与基础校验，服务端校验与老浏览器兜底不能省。