应使用 或 实现年份选择：前者语义正确、兼容性好、支持原生验证；后者明确可控、无障碍友好；避免强行改造 type="date"，因其无法真正隐藏月日且跨浏览器行为不一致。
HTML原生不支持只选年份
浏览器原生的 <input type="date"> 最小粒度是“日”，无法限制用户只选年份——它总会带月份和日期，且不同浏览器对年份范围、初始显示格式处理不一致。强行用 min/max 限定为同一年（如 min="2024-01-01" max="2024-12-31"）只是锁死范围，不是隐藏月/日选择器。
用 + 范围约束最轻量可靠
如果只需用户输入一个年份数字（如 2024），<input type="number"> 是语义正确、兼容性好、无需 JS 的首选方案：
-
min和max直接控制年份范围（例如min="1900" max="2100"） - 移动端会唤起数字键盘，体验比日期键盘更直接
- 支持表单验证：
required、step="1"（避免小数）、value可设默认值 - 注意：不要加
pattern或正则校验，type="number"已天然拒绝非数字输入
<input type="number" name="year" min="1970" max="2030" value="2024" required>
需要下拉选择年份？用
当设计要求是下拉菜单（比如近10年、出生年份范围），<select></select> 明确、可控、无障碍友好：
- 用 JS 动态生成选项更灵活（如从当前年往前推30年），但静态写死也完全可行
- 每个
<option></option>的value应为纯数字（如"2024"），避免带“年”字导致后端解析失败 - 别忽略默认提示项：
<option value="" disabled selected>请选择年份</option> - 移动端
<select></select>在 iOS 上默认样式较重，但行为稳定，比 hackdate更省心
强行改 date 输入框？CSS 和 JS 都治标不治本
网上有些方案试图用 CSS 隐藏 date 的月/日部分，或用 JS 截取 change 事件中的年份——这些做法问题明显：
立即学习“前端免费学习笔记（深入）”；
- CSS 隐藏后，用户仍可通过键盘上下键修改月/日，值仍是完整日期字符串（如
"2024-06-15"） - JS 截取年份需每次监听并覆盖
value，但用户粘贴、快捷键（Ctrl+V / Cmd+V）可能绕过逻辑 - Firefox 不支持
date的step属性，Safari 对inputmode支持有限，跨浏览器一致性差 - 屏幕阅读器会把整个日期读出来，语义混乱
除非项目强制要求用 type="date"（比如已有统一表单组件库封装），否则没必要自找麻烦。
真正要小心的是后端——无论前端用哪种方式，都得校验年份是否为合法整数、是否在业务允许范围内。前端永远只是第一道提示，不是防线。
