HTML5如何预设默认值_HTML5预设默认值方式【要点】

input 的 value 属性设默认值最直接，适用于 text 等类型；checkbox/radio 用 checked；select 用 option 的 selected；textarea 内容写标签体内；disabled 不提交，readonly 会提交。

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></select> 本身不支持 value 设默认值，必须在某个 <option></option> 上添加 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>
</select>

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

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

人声去除

用强大的AI算法将声音从音乐中分离出来

下载

• HTML 解析时，标签体内的换行和空格会被保留并显示为实际内容
• 若需预填充含特殊字符（如 、<code>&），必须做 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>