最稳妥方案是用语义清晰、兼容性好的 实现星期选择，value 用 1–7（iso 8601 标准），中文文本用全称，配合 required 和 提升可访问性，并通过 data-* 属性扩展元数据。
用 <select></select> 实现星期选择最稳妥
原生 HTML 没有专门的“星期”输入类型，<input type="week"> 选的是「年+第几周」（如 2024-W23），不是周一到周日。真要让用户选「星期几」，<select></select> 是兼容性最好、语义最清晰的选择。
常见错误是用 <input type="number"> 或硬写 7 个 <radio></radio> 却没设 name，导致表单提交时取不到值。
- 选项文本建议用中文全称（
星期一），避免缩写歧义（比如“周1”在不同地区理解不一致） -
value推荐用数字1–7（1= 星期一，符合 ISO 8601，后端和 JS 处理更统一） - 加
required属性可强制选择，配合<label></label>提升可访问性
<label for="weekday">请选择星期</label> <select id="weekday" name="weekday" required><option value="">-- 请选择 --</option> <option value="1">星期一</option> <option value="2">星期二</option> <option value="3">星期三</option> <option value="4">星期四</option> <option value="5">星期五</option> <option value="6">星期六</option> <option value="7">星期日</option></select>
用 data-* 属性存额外信息很实用
有时需要同时暴露中文名和英文缩写（比如后端要存 mon，前端展示要本地化），直接塞进 value 会污染主逻辑。这时用 data-* 是轻量又标准的做法。
例如：<option value="1" data-en="mon" data-cn="星期一">星期一</option>，JS 里用 el.dataset.en 就能拿到对应值。
- 别用
data-value覆盖原生value，容易混淆；优先用语义化名称如data-code、data-short - 如果选项动态生成（比如从 API 拉），确保
data-*值在渲染时正确绑定，而不是靠 JS 后续 patch - 注意大小写：HTML 中
data-foo-bar对应 JS 的dataset.fooBar
用 JavaScript 动态生成星期选项要注意时区
有人喜欢用 new Date().toLocaleDateString('zh-CN', { weekday: 'long' }) 循环生成星期名，但这个方法依赖用户本地时区和系统语言设置——如果页面支持多语言，或服务端需固定格式，就不可靠。
- 纯前端展示且无国际化要求时可用，否则建议把星期映射表硬编码或由后端下发
- 循环起始日别默认从周日开始（
getDay()返回 0），明确按 ISO 标准从周一（1）开始构造数组 - 避免在
for循环里反复调用toLocaleDateString，性能差；先建好数组再map
const weekdays = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'];
const options = weekdays.map((text, i) =>
<option value="${i + 1}">${text}</option>
);
移动端点选体验差？加 size 或换 <datalist></datalist> 不现实
<select size="7"></select> 在桌面端能显示全部选项，但在 iOS Safari 和部分安卓浏览器上仍会触发原生选择器（滚轮式），无法真正“展开”。想模拟下拉列表效果，得用自定义组件；但为星期这种简单场景引入 UI 库或手写下拉，性价比很低。
<input list> + <datalist></datalist> 看似可行，但它只是自动补全，不阻止用户手动输入非法值，且无法保证必选——表单验证会失效。
- 接受原生
<select></select>在移动端的交互方式，这是用户习惯，也是无障碍支持最好的方案 - 如果设计强求「点击即选、不点开」，只能用
<div> + <code>role="radiogroup"手写，但必须补全键盘导航（Tab/Arrow）、aria-checked、焦点管理 - 别给
<select></select>加appearance: none后只留一个箭头却不处理下拉逻辑——这会让屏幕阅读器完全迷失
实际用下来，<select></select> 配合语义化 value 和 data-* 就够用了。真正容易被忽略的，是后端收到 "1" 时是否默认按 ISO 解释为周一——如果历史数据里曾用 0=周一，这里就会错位。
