当属性是布尔属性时，HTML 5 中的含义是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4139786/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What does it mean in HTML 5 when an attribute is a boolean attribute?
提问by HELP
What does it mean when an attribute like the hidden attribute is a boolean attribute? Can someone explain this in layman's terms?
当像隐藏属性这样的属性是布尔属性时，这意味着什么？有人可以用外行的术语解释这一点吗？
采纳答案by Amir Raminfar
2.5.2 Boolean attributes
A number of attributes are boolean attributes. The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.
If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace.
The values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.
2.5.2 布尔属性
许多属性是布尔属性。元素上布尔属性的存在表示真值，不存在该属性表示假值。
如果该属性存在，则其值必须是空字符串，或者是与该属性的规范名称不区分大小写的 ASCII 匹配值，且没有前导或尾随空格。
布尔属性不允许使用值“true”和“false”。要表示假值，必须完全省略该属性。
回答by Alohci
As already stated boolean attributes are attributes that are evaluated either true or false.
如前所述，布尔属性是被评估为真或假的属性。
However, from HTML5 Spec - http://www.w3.org/TR/html5/infrastructure.html#boolean-attributes
但是，从 HTML5 规范 - http://www.w3.org/TR/html5/infrastructure.html#boolean-attributes
2.5.2 Boolean attributes
A number of attributes are boolean attributes. The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.
If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace.
The values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.
2.5.2 布尔属性
许多属性是布尔属性。元素上布尔属性的存在表示真值，不存在该属性表示假值。
如果该属性存在，则其值必须是空字符串，或者是与该属性的规范名称不区分大小写的 ASCII 匹配值，且没有前导或尾随空格。
布尔属性不允许使用值“true”和“false”。要表示假值，必须完全省略该属性。
Note that this means that <div hidden="true">is notallowed in HTML5.
需要注意的是，这意味着<div hidden="true">是不是在HTML5允许的。
Correct would be either <div hidden>or <div hidden="">or <div hidden="hidden">or case-insensitive and single quotes/unquoted variations of any of them.
正确的是<div hidden>or or <div hidden="">or <div hidden="hidden">or 不区分大小写和单引号/不带引号的变体。
回答by Alexis Wilke
As the others said, a Boolean has three possible syntax for true:
正如其他人所说，布尔值具有三种可能的true语法：
<textarea readonly></textarea>
<textarea readonly=""></textarea>
<textarea readonly="readonly"></textarea>
And one for false:
一个是false：
<textarea></textarea>
Except that you have a few exceptions like this one, obviously:
除了你有一些像这样的例外，显然：
spellcheck [HTML5]
Setting the value of this attribute to true indicates that the element needs to have its spelling and grammar checked. The value default indicates that the element is to act according to a default behavior, possibly based on the parent element's own spellcheck value. The value false indicates that the element should not be checked.
拼写检查 [HTML5]
将此属性的值设置为 true 表示元素需要检查其拼写和语法。值 default 表示元素根据默认行为进行操作，可能基于父元素自己的拼写检查值。值 false 表示不应检查该元素。
回答by Stefan
A. Based on the comment of Bob.at.Indigo.Health:
A. 根据 Bob.at.Indigo.Health 的评论：
With some html attribute that should represents a boolean value (e.g. checkedattribute for checkbox) ...the only way to set it tofalseis to omit the attribute, :
使用一些应该表示布尔值的 html 属性（例如checked复选框的属性）......设置它的唯一方法false是省略属性, ：
<input type="checkbox" />
All other assignments will be interpreted as true(even if that does not follow html standard), e. g.
所有其他分配将被解释为true（即使不遵循 html 标准），例如
<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"/>
B. Some JavaScriptlibraries might define special values that are also interpreted as false.
B. 一些JavaScript库可能定义特殊值，这些值也被解释为 false。
With d3.js you can for example remove attributes ("set them to false") by calling the attrfunction with null:
例如，使用 d3.js，您可以通过调用attr函数来删除属性（“将它们设置为 false”）null：
d3Selection.attr('checked', null);
The getAttributeMethod of HTMLElement returns nullor ''if the
attribute does not exist.
HTMLElement的getAttribute方法返回null或者''如果该属性不存在。
Also see:
另见：
- How to remove an attribute in D3.js?
- https://www.w3schools.com/jsref/prop_checkbox_checked.asp
- https://www.w3schools.com/jsref/met_element_getattribute.asp
- https://www.w3schools.com/jsref/met_element_setattribute.asp
- checked = "checked" vs checked = true
- 如何删除 D3.js 中的属性？
- https://www.w3schools.com/jsref/prop_checkbox_checked.asp
- https://www.w3schools.com/jsref/met_element_getattribute.asp
- https://www.w3schools.com/jsref/met_element_setattribute.asp
- 已检查 = “已检查” vs 已检查 = 真
C. If you inherit from HTMLElementin JavaScript, you are able to define custom attributes of different type than String. Also see https://www.webcomponents.org/introduction
C.如果从继承HTMLElement中的JavaScript，您可以定义不同的类型的字符串的自定义属性。另请参阅https://www.webcomponents.org/introduction
However, I would call those JavaScript attributes and not HTML attributes, e.g:
但是，我会调用这些 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>
回答by maxwolf929
2.4.2. Boolean attributes
A number of attributes are boolean attributes. The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.
If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing white space. The values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.
2.4.2. 布尔属性
许多属性是布尔属性。元素上布尔属性的存在表示真值，不存在该属性表示假值。
如果该属性存在，则其值必须是空字符串，或者是与该属性的规范名称不区分大小写的 ASCII 匹配值，且没有前导或尾随空格。布尔属性不允许使用值“true”和“false”。要表示假值，必须完全省略该属性。
Example: Here is an example of a checkbox that is checked and disabled. The checked and disabled attributes are the boolean attributes.
示例：以下是选中和禁用复选框的示例。选中和禁用的属性是布尔属性。
<label><input type=checkbox checked name=cheese disabled> Cheese</label>
This could be equivalently written as this:
这可以等效地写成这样：
<label><input type=checkbox checked=checked name=cheese disabled=disabled> Cheese</label>
You can also mix styles; the following is still equivalent:
你也可以混合风格；以下仍然是等效的：
<label><input type='checkbox' checked name=cheese disabled=""> Cheese</label>
check this post Boolean HTML Attributesit may help you as well.
检查这篇文章Boolean HTML Attributes它也可以帮助你。
