当属性是布尔属性时，HTML 5 中的含义是什么？答案

【问题标题】：What does it mean in HTML 5 when an attribute is a boolean attribute?当属性是布尔属性时，HTML 5 中的含义是什么？
【发布时间】：2011-05-07 14:08:36
【问题描述】：

当隐藏属性这样的属性是布尔属性时，这是什么意思？有人可以通俗地解释一下吗？

【问题讨论】：

相关帖子 - Radio button is checked by default when checked property is false?

标签： html

【解决方案1】：

2.5.2 布尔属性

许多属性是布尔属性。一个的存在元素上的布尔属性表示真值，并且属性不存在代表假值。

如果属性存在，它的值必须是空字符串或属性的 ASCII 不区分大小写匹配的值规范名称，没有前导或尾随空格。

布尔属性不允许使用值“true”和“false”。要表示假值，必须省略该属性完全一致。

【讨论】：

我想我很困惑另一个答案是正确的答案。我让作者自己选择。
html5 之前的布尔属性要么存在要么不存在； foo="false" 和 foo="true" 因此是等价的（并且是真的）。使用 html5，它们不应再具有任意值（从而使人们远离 foo="false" 错误），而必须是 foo="" 或 foo="foo"（两者都为真）。

【解决方案2】：

如前所述，布尔属性是被评估为真或假的属性。

但是，来自 HTML5 规范 - http://www.w3.org/TR/html5/infrastructure.html#boolean-attributes

2.5.2 布尔属性

许多属性是布尔属性。一个的存在元素的布尔属性代表真值，而属性的缺失代表假值。

如果属性存在，它的值必须是空字符串或一个 ASCII 值不区分大小写的匹配属性的规范名称，没有前导或尾随空格。

布尔属性不允许使用值“true”和“false”。到表示一个假值，该属性必须完全省略。

请注意，这意味着在 HTML5 中不允许<div hidden="true">。

正确的是 <div hidden> 或 <div hidden=""> 或 <div hidden="hidden"> 或其中任何一个不区分大小写和单引号/未加引号的变体。

【讨论】：

2.5.2的中间段不是说
@croraf - 第 2.5.2 节，与 HTML5 规范的大多数规范文本一样，同样适用于 HTML 和 XHTML 语法。但是在 HTML 语法中允许没有属性值的属性，但在 XHTML 语法中不允许。所以我们必须查看规范“HTML 语法”的第 8 节。在8.1.2.3 Attributes 中说，指定属性的 4 种方法中的第一种是“空属性语法：只是属性名称。值隐式为空字符串。”隐含值符合中间段落。
允许与否，浏览器实际上并没有以任何方式强制执行规范的这一部分。 hidden="false" 在实践中的评估结果与 hidden 和 hidden="hidden" 相同。（他们应该改用hidden="false" 做什么？）

【解决方案3】：

正如其他人所说，布尔值具有三种可能的 true 语法：

<textarea readonly></textarea>
<textarea readonly=""></textarea>
<textarea readonly="readonly"></textarea>

还有一个 false：

<textarea></textarea>

除了你有几个像这样的例外，显然：

拼写检查 [HTML5]

将此属性的值设置为 true 表示需要检查元素的拼写和语法。值 default 表示元素将根据默认行为进行操作，可能基于父元素自己的拼写检查值。值 false 表示不应检查该元素。

【讨论】：

这也不例外。 spellcheck 不是布尔属性。
啊，是的。 "true" 和 "false" 是新的 Not Boolean。同意。
它是一个枚举属性，可以取值“true”、“false”或“default”。
赞成观察到指定 false 的唯一方法是省略布尔属性。

【解决方案4】：

A.基于 Bob.at.Indigo.Health 的评论：

使用一些应该表示布尔值的 html 属性（例如，复选框的checked 属性）...将其设置为 false 的唯一方法是省略该属性，：

<input type="checkbox"  />

所有其他分配将被解释为true（即使这不符合 html 标准），例如。 g.

<input type="checkbox" checked="checked"/> 
<input type="checkbox" checked=undefined />
<input type="checkbox" checked=null/>
<input type="checkbox" checked=false/>
<input type="checkbox" checked="false"/>
<input type="checkbox" checked=""/>
<input type="checkbox" checked="foo"/>

http://jsfiddle.net/hgq4ewr1/

B.一些 JavaScript 库可能会定义也被解释为 false 的特殊值。

例如，使用 d3.js，您可以通过使用 null 调用 attr 函数来删除属性（“将它们设置为 false”）：

d3Selection.attr('checked', null);

如果 HTMLElement 的 getAttribute 方法返回 null 或 '' 属性不存在。

另见：

C.如果你从 JavaScript 中的HTMLElement 继承，你可以定义不同于字符串类型的自定义属性。另见https://www.webcomponents.org/introduction

但是，我会调用这些 JavaScript 属性而不是 HTML 属性，例如：

<html>
    <head>      
        <script>
            class TreezElement extends HTMLElement {

                static get observedAttributes() {
                    return ['value'];
                }


                get valueProperty() {
                  var stringValue = this.getAttribute('value')
                  return this.convertFromStringValue(stringValue);
                }

                set valueProperty(newValue) {
                  var stringValue = this.convertToStringValue(newValue)
                  if(stringValue === null){
                      this.removeAttribute('value');
                   } else {
                      this.setAttribute('value', stringValue);    
                   }
                }               

                constructor(){
                    super();                        
                } 

                //should be overridden by inheriting class
               convertFromStringValue(stringValue){                     
                    return stringValue;
                }

                //should be overridden by inheriting class
                //return null if the value attribute should be removed
                //(="set to false")
                convertToStringValue(value){

                    return value;
                }

                updateElements(newValue){
                    //should be implemented by inheriting class
                }


                attributeChangedCallback(attr, oldValue, newValue) {
                     if(attr==='value'){                                                
                        if(newValue!==oldValue){    
                            this.updateElements(newValue);                          
                            this.__dispatchInputEvent();
                        }
                     } 


                }       



            }
        </script>
    </head>
</html>

【讨论】：

【解决方案5】：

2.4.2。布尔属性

许多属性是布尔属性。一个的存在元素上的布尔属性表示真值，并且属性不存在代表假值。

如果属性存在，它的值必须是空字符串或者是一个不区分大小写的 ASCII 匹配属性的值规范名称，没有前导或尾随空格。价值布尔属性不允许使用“true”和“false”。代表一个 false 值，该属性必须完全省略。

示例：这是一个选中和禁用的复选框的示例。选中和禁用的属性是布尔属性。

<label><input type=checkbox checked name=cheese disabled> Cheese</label>

这可以等效地写成这样：

<label><input type=checkbox checked=checked name=cheese disabled=disabled> Cheese</label>

您还可以混合样式；以下仍然是等价的：

<label><input type='checkbox' checked name=cheese disabled=""> Cheese</label>

查看此帖子Boolean HTML Attributes 它也可能对您有所帮助。

【讨论】：