input、select、checkbox/radio 的默认值分别通过 value、selected、checked 属性设置,必须由服务端直接写入 html;disabled/readonly 字段的 value 同样需正确赋值,否则提交或 js 读取异常。

input 元素的 value 属性就是默认值
浏览器渲染时,value 属性的值会直接显示在输入框里,用户没动手前看到的就是它。这不是“占位提示”,也不是“初始状态模拟”,而是真实提交时的默认取值。
常见错误现象:placeholder="请输入姓名" 被误当成默认值;或者用 JS 在 onload 里赋值,结果表单重置后丢失。
-
value必须是字符串,数字要转成字符串,比如value="123",不能写value=123(HTML 属性值不加引号易出错) - 服务器返回数据时,把字段值插进
value属性最稳妥,比如 PHP 输出<input name="email" value="<?= htmlspecialchars($user['email']) ?>"> - 如果字段为空,别留空
value=""—— 这算合法默认值,但要注意后端是否允许空提交
select 下拉框用 selected 标记默认选项
selected 是布尔属性,只出现在你想设为默认的那个 <option></option> 上,不是写在 <select></select> 标签上。
使用场景:编辑页回填用户上次选的分类、地区、状态等。
立即学习“前端免费学习笔记(深入)”;
- 多个
<option selected></option>不会报错,但浏览器只认第一个 - 动态生成时,注意比较逻辑:后端传来的值和
<option value="...>的值必须完全一致(包括大小写、空格) - 不要用 JS 模拟选中来代替
selected,否则表单重置(form.reset())会失效
示例:
<select name="role"> <option value="user">普通用户</option> <option value="admin" selected>管理员</option> </select>
checkbox 和 radio 默认勾选靠 checked 属性
checked 和 selected 类似,是布尔属性,只加在需要默认激活的标签上。
容易踩的坑:把 checked 写成 checked=" true> 或 <code>checked="checked" —— 虽然大多数浏览器能识别,但 HTML 规范只要求存在即生效,多余属性值反而增加混淆。
- radio 组里只能有一个
checked,否则语义混乱;浏览器实际也只认第一个 - checkbox 可多选,默认勾选多个就写多个
checked - 如果后端返回的是布尔值或数字(如
1表示选中),模板里要转换成是否存在checked属性,而不是输出checked="1"
disabled 或 readonly 字段的默认值照样要设 value
哪怕一个 input 被设了 disabled 或 readonly,它依然会随表单提交(disabled 的不会提交,这点特别容易错),所以 value 该填还得填。
性能影响不大,但逻辑上常被忽略:比如订单详情页显示“支付状态”,用 <input readonly value="paid">,如果漏写 value,提交时这个字段就丢了。
-
disabled字段不参与表单提交,但它的value仍需设置,否则 JS 读取.value会是空字符串 -
readonly字段会提交,value缺失会导致提交空值 - 别依赖 CSS 隐藏 + JS 管理值来绕过属性设置,维护成本高,且表单重置、序列化时行为不可控
真正麻烦的不是怎么设默认值,而是当字段类型混合(比如下拉联动 + 动态 checkbox 组 + 时间范围 input)、又带服务端校验时,value/selected/checked 的来源和更新时机稍有错位,整个表单状态就对不上了。











