What does it mean in HTML 5 when an attribute is a boolean attribute?
HtmlHtml Problem Overview
What does it mean when an attribute like the hidden attribute is a boolean attribute? Can someone explain this in layman's terms?
Html Solutions
Solution 1 - Html
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
> 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.
Note that this means that <div hidden="true"> is not allowed in 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.
Solution 2 - Html
> 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.
Solution 3 - Html
As the others said, a Boolean has three possible syntax for true:
<textarea readonly></textarea>
<textarea readonly=""></textarea>
<textarea readonly="readonly"></textarea>
And one for 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.
Solution 4 - Html
A. Based on the comment of Bob.at.Indigo.Health:
With some html attribute that should represents a boolean value (e.g. checked attribute for checkbox) ...the only way to set it to false is to omit the attribute, :
<input type="checkbox" />
All other assignments will be interpreted as true (even if that does not follow html standard), e. 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"/>
B. Some JavaScript libraries might define special values that are also interpreted as false.
With d3.js you can for example remove attributes ("set them to false") by calling the attr function with null:
d3Selection.attr('checked', null);
The getAttribute Method of HTMLElement returns null or '' if the
attribute does not exist.
Also see:
- https://stackoverflow.com/questions/15322556/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
- https://stackoverflow.com/questions/10650233/checked-checked-vs-checked-true
C. If you inherit from HTMLElement in JavaScript, you are able to define custom attributes of different type than String. Also see https://www.webcomponents.org/introduction
However, I would call those JavaScript attributes and not HTML attributes, e.g:
<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>
Solution 5 - Html
> 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.
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 https://stackoverflow.com/questions/706384/boolean-html-attributes it may help you as well.