HTML中应使用两个语义化并排的input框：卡号用inputmode="numeric"、pattern="[0-9]*"，PIN用type="password"、inputmode="text"；外层用<div role="group" aria-label="礼品卡信息">包裹，确保tabindex顺序、无障碍识别与移动端键盘适配。
HTML里怎么实现卡号+PIN并排输入框
直接用两个 <input type="text"> 并排就行，但要注意语义、聚焦顺序和移动端体验。浏览器默认不会自动把卡号和PIN关联成“一组”，得靠结构和属性手动对齐逻辑。
常见错误是只顾样式并排，结果 Tab 键跳转错乱、屏幕阅读器读不出关联、手机弹出数字键盘却输不了字母PIN。
- 卡号用
inputmode="numeric"+pattern="[0-9]*"，触发数字键盘，同时允许粘贴（别用type="number"，它会删前导零） - PIN一般区分大小写或含字母，用
inputmode="text"，加autocomplete="off"防浏览器填错 - 用
<div role="group" aria-label="礼品卡信息">包住两个输入框，让辅助技术知道这是逻辑组合 - 确保
tabindex顺序自然（卡号 → PIN），别用负值打断流式导航
为什么不能用单个 input 拆分卡号和PIN
有人想用一个 <input> 加 placeholder 提示“卡号-PIN”，或者用 JS 切割字符串——这会破坏表单可访问性和数据可靠性。
典型问题：用户复制带分隔符的卡号串（如 1234-5678-ABCD），JS 拆分容易错位；后端收到混合字段还得再解析，出错难定位；而且 required 校验没法分别提示“卡号为空”和“PIN为空”。
立即学习“前端免费学习笔记（深入）”；
- 后端接收时，
card_number和pin是两个独立字段，接口契约明确 - 前端校验可分别触发：卡号长度不足16位就标红卡号框，PIN不是4~6位就标红PIN框
- 移动端 iOS/Android 对双输入框的自动填充支持比单输入更稳定（尤其当页面有多个类似区块时）
防误输：卡号自动空格分组和PIN掩码处理
卡号显示分组（如 1234 5678 9012 3456）是视觉习惯，但必须和实际提交值分离；PIN显示为圆点是基础安全要求，但不能影响复制粘贴能力。
- 卡号展示分组用 JS 监听
input事件做格式化，但form.submit()前务必还原为纯数字字符串（去掉空格、短横线）再赋给隐藏字段或修改input.value - PIN用
type="password"即可，别自己画圆点图——它原生支持双击选中、长按粘贴、密码管理器识别 - 别给PIN加
maxlength="4"硬限制，有些卡PIN是6位或含字母，应由后端和前端正则共同控制（如/^[a-zA-Z0-9]{4,6}$/）
兼容旧浏览器和无障碍要点
IE11 虽已淘汰，但内网系统可能还在跑；而无障碍不只是合规要求，更是真实用户（比如戴手套操作平板的仓库人员）的刚需。
- 不用
inputmode的老浏览器（如 IE、旧版 Safari），靠pattern+title提示（例如title="请输入16位数字卡号"）兜底 - 每个
<input>必须有<label for="xxx">，且for值与id严格一致；别用placeholder当标签 - 错误提示不要仅靠颜色（比如只变红），加图标或文字说明（如
<span class="error-text">PIN必须为6位字符</span>）
