布尔属性只需写属性名（如required）表示启用，不写即禁用；规范写法仅限省略值或空字符串（required=""），禁用带值写法（如required="true"）；autocomplete等非布尔属性必须带值。

布尔属性只需写属性名本身，不加等号、不写值，就表示“启用”；完全不写，就表示“禁用”。这是 HTML5 的正式规范，不是简化技巧，而是语义要求。

哪些属性属于布尔属性

必须按规范判断，不能凭感觉。常见合法布尔属性包括：

• checked（复选框/单选框默认选中）
• disabled（禁用表单控件）
• required（必填校验）
• readonly（只读）
• hidden（隐藏元素）
• open（details 展开）
• multiple（多选下拉或文件上传）
• novalidate（表单跳过原生验证）
• autoplay（媒体自动播放）
• loop、controls（音视频控制）

怎么写才规范

只允许两种写法：完整省略值，或写成空字符串（即 hidden="" 这类），二者语义等价。但推荐省略值，更简洁清晰。

• ✅ 正确：<input required>、<textarea readonly></textarea>、<div hidden> <li>✅ 合法但冗余：<code><input required="">、<button disabled></button>
• ❌ 错误：required="true"、disabled="false"、checked="0"、hidden="true"

注意：autocomplete、contenteditable、spellcheck 等不是布尔属性，必须带值，不能简写。


财经HTML高端海报生成
复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP
下载

立即学习“前端免费学习笔记（深入）”；

动态操作时的常见误区

HTML 属性和 DOM 属性是两套机制，混淆会导致状态不一致。

• 初始状态靠 HTML 写，如 <input type="checkbox" checked>
• 运行时控制用 JS 赋值 DOM 属性：el.checked = true、el.disabled = false
• 避免用 setAttribute('checked', '') —— 它只改 HTML 字符串，不触发 DOM 属性同步
• 切换可用 el.toggleAttribute('disabled')，现代浏览器已支持

模板与框架中的注意事项

服务端模板或前端框架里，要防止把布尔逻辑转成字符串拼接。

• ❌ 错误：hidden="{{ shouldHide ? 'true' : 'false' }}"
• ✅ 正确：条件渲染或直接输出属性名，如 {% if shouldHide %}hidden{% endif %}
• Vue/React 中应绑定布尔变量：:disabled="isSubmitting" 或 disabled={isSubmitting}
• 表单重置行为依赖 HTML 初始值，JS 设置的 value 或 checked 不影响 reset 结果