HTML5默认值设置方法详解

本文深入解析了HTML5中各类表单元素设置默认值的正确方法：text、email等输入框依赖value属性（非占位符，而是真实提交值）；checkbox和radio必须使用checked属性；select下拉框需在对应option上添加selected属性（服务端动态渲染时需谨慎避免冲突）；textarea则必须将默认内容写在标签体内，value属性完全无效。文章强调原生语义化写法的可靠性与兼容性，尤其指出首次加载时HTML属性比JavaScript赋值更稳妥，并提醒开发者注意空格换行保留、多选控制及表单序列化等易错细节，是前端表单开发不可或缺的实用指南。

input 元素的 value 属性是设置默认值最直接的方式

浏览器原生支持通过 value 属性为 设置初始值，适用于 text、email、number、search 等类型。它不是“占位提示”，而是真实提交的值。

• value 值会参与表单序列化（如 formdata.get() 或 submit 提交）
• 用户未修改时，该值就是最终提交内容；清空输入框后，value 不会自动恢复
• 对于 type="checkbox" 或 type="radio"，需配合 checked 属性，而非 value

select 下拉框用 selected 标记默认选项

本身不支持 value 设默认值，必须在某个 上添加 selected 属性。多个 selected 仅第一个生效（多选场景需用 multiple + JS 控制）。

• 若服务端返回数据动态渲染，注意避免重复写 selected 导致逻辑错乱
• 使用 select.value = "xxx" 在 JS 中设默认值，仅改变当前选中项，不修改 HTML 结构
• 首次加载时，selected 属性比 JS 赋值更可靠（避免 DOM 未就绪问题）

中国 美国 日本

textarea 的默认值写在标签体内，不能靠 value