标签不支持gender、sex等原生自动选择属性；需用type="radio"单选组（name一致、value明确、checked设默认）、下拉或js动态写入实现，且须兼顾无障碍与数据校验。
HTML <input> 没有 gender 或 sex 自动选择属性
直接说结论：<input> 标签本身不支持 gender、sex 或类似语义化自动选择的原生属性。所谓“自动选择性别”是常见误解，浏览器不会根据用户系统设置、历史输入或 profile 自动填入“男/女”，也不会提供内置下拉或单选组。
实际能用的只有基础表单控件组合，需手动构建逻辑：
-
<input type="radio">配合name分组实现单选（最常用） -
<select></select>+<option></option>实现下拉选择（语义更清晰） -
<input type="hidden">配合 JS 动态写入值（仅限特定场景，如从 localStorage 读取）
用 <input type="radio"> 正确配置性别单选
这是最贴近“自动选择”需求的方案——用户点击即选中，且提交时只传一个值。关键在 name 一致、value 明确、默认项用 checked：
<label><input type="radio" name="gender" value="male" checked> 男</label> <label><input type="radio" name="gender" value="female"> 女</label> <label><input type="radio" name="gender" value="other"> 其他</label>
注意点：
- 必须共用相同
name（如name="gender"），否则无法互斥 -
value建议用英文小写（"male"/"female"），避免空格或中文影响后端解析 - 不要依赖
checked自动“记住上次选择”——它只在页面首次加载时生效；要持久化需 JS +localStorage或服务端回填 - 无障碍访问要求：每个
<input>必须包裹<label></label>或关联for属性
为什么不用 <input type="text"> 加 list 和 <datalist></datalist>？
有人试过用 <input list="genders"> + <datalist id="genders"></datalist> 模拟下拉提示，但这是错误用法：
-
<datalist></datalist>是“建议列表”，用户仍可自由输入任意内容（比如填“保密”“不想说”甚至乱码），无法保证值域受控 - 提交时后端收到的是原始字符串，不是标准化枚举，校验成本陡增
- 移动端体验差：软键盘弹出后，
datalist提示常被遮挡或不触发 - 不符合 WCAG 表单控件可预测性原则
真要兼顾自由输入与选项约束，应改用 <select></select> + <option value="">请选择</option>，并配合必填校验（required）。
后端回填时，JS 如何安全设置 radio 默认选中
如果用户已提交过性别，服务端渲染时需把对应 <input> 的 checked 属性加上；若用纯前端渲染（如 AJAX 加载），可用 JS 设置：
function setGender(value) {
const radios = document.querySelectorAll('input[name="gender"]');
radios.forEach(radio => {
if (radio.value === value) radio.checked = true;
});
}
// 调用：setGender("female");
容易踩的坑：
- 别用
document.getElementById—— radio 没 ID，且多个元素不能共用 ID - 别漏掉
value严格相等（===），避免字符串与数字混淆 - 确保 DOM 已加载完成再执行（放在
DOMContentLoaded或<script></script>放在 body 底部） - 如果页面有多个 gender 表单（如注册+资料编辑），注意
name隔离，避免误操作
真正麻烦的从来不是怎么写那几行 HTML，而是当用户选了“其他”又填了自定义文本时，如何让这个字段既合法又可搜索——那得另起一套 schema 设计和校验逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
