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

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
是双标签元素,其初始内容必须写在起始与结束标签之间。写 value="xxx" 属性完全无效,浏览器会忽略。
- HTML 解析时,标签体内的换行和空格会被保留并显示为实际内容
- 若需预填充含特殊字符(如
、&),必须做 HTML 实体转义,否则破坏结构 - JS 动态设置用
textarea.value = "xxx",但首次渲染仍应以 HTML 内容为准,避免闪动或覆盖
disabled 或 readonly 状态下默认值仍可被提交或读取
很多人误以为加了 disabled 就“不算数”,其实:disabled 字段不会随表单提交,而 readonly 字段会提交且保留默认值。这是关键区别。
立即学习“前端免费学习笔记(深入)”;
- 想让用户看到但不能改、还要提交 → 用
readonly - 想彻底屏蔽该字段(不参与提交、不触发验证)→ 用
disabled - 用 JS 设置
input.disabled = true后,其value依然存在,只是不进FormData
默认值是否生效,取决于标签语义和属性匹配是否正确。最容易漏掉的是
textarea 忘记写闭合标签、select 漏掉 selected、以及把 disabled 当作只读来用。











