HTML5默认值设置方法详解

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

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

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

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

<input type="text" name="username" value="guest">
<input type="checkbox" name="newsletter" value="yes" checked>

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

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

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

<select name="country">
  <option value="cn">中国</option>
  <option value="us" selected>美国</option>
  <option value="jp">日本</option>
&lt;/select&gt;

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

<textarea> 是双标签元素，其初始内容必须写在起始与结束标签之间。写 value="xxx" 属性完全无效，浏览器会忽略。

• HTML 解析时，标签体内的换行和空格会被保留并显示为实际内容
• 若需预填充含特殊字符（如 <、&），必须做 HTML 实体转义，否则破坏结构
• JS 动态设置用 textarea.value = "xxx"，但首次渲染仍应以 HTML 内容为准，避免闪动或覆盖

<textarea name="bio">欢迎留言！</textarea>
<textarea name="code"><div class="demo">Hello</div></textarea>

disabled 或 readonly 状态下默认值仍可被提交或读取

很多人误以为加了 disabled 就“不算数”，其实：disabled 字段不会随表单提交，而 readonly 字段会提交且保留默认值。这是关键区别。

• 想让用户看到但不能改、还要提交 → 用 readonly
• 想彻底屏蔽该字段（不参与提交、不触发验证）→ 用 disabled
• 用 JS 设置 input.disabled = true 后，其 value 依然存在，只是不进 FormData

<input type="text" name="id" value="12345" readonly>
<input type="text" name="token" value="abc" disabled>

今天关于《HTML5默认值设置方法详解》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！