What Does It Mean in HTML 5 When an Attribute Is a Boolean Attribute

What does it mean in HTML 5 when an attribute is a boolean attribute?

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.

Boolean Attributes Of Html

Check the HTML standard for any questions of syntax. To quote it:

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.

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>

Boolean HTML Attributes

(Because of some framework code I use, not calling setAttribute(), or calling removeAttribute() is difficult.)

Then I would submit that the framework code needs fixing, or dumping.

You can't setAttribute to unset an attribute, by design. Any solution you found involving out-of-band values like ‘null’, if it happened to work in any particular browser, would be quite invalid according to the DOM Core standard.

setAttribute() is in any case best avoided in browser (non-XML) HTML contexts. IE pre-8 doesn't know the difference between a DOM attribute and a JavaScript property, which can easily result in many really weird problems. If you're trying to set ‘checked’ as an attribute (which theoretically you should do by setting it to the string "checked"), don't expect IE to co-operate.

The full list of boolean attributes in HTML 4.01 (and hence XHTML 1.0) is (with property names where they differ in case):

checked             (input type=checkbox/radio)
selected (option)
disabled (input, textarea, button, select, option, optgroup)
readonly (input type=text/password, textarea)
multiple (select,input)
ismap isMap (img, input type=image)

defer (script)
declare (object; never used)
noresize noResize (frame)
nowrap noWrap (td, th; deprecated)
noshade noShade (hr; deprecated)
compact (ul, ol, dl, menu, dir; deprecated)

Why is the true boolean value the wrong attribute value ?

According to the HTML5 spec:

A number of attributes in HTML5 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 a case-insensitive match for the attribute's
canonical name, with no leading or trailing whitespace.

So with a boolean attribute like disabled, it's presence alone is enough and it needs no value, although virtually every web browser will still accept it. Therefore, you should use either disabled (alone) or disabled="disabled"

Can I use HTML5 data-* attributes as boolean attributes?

The example you show is valid. (Just like using disabled or checked in a form. Only xHTML force the presence of a value)

Although, the value returned is not a boolean. When you query this resource, you'll get an empty string for any empty data-* attributes.

Like so:

 domNode.dataset.draggable; // log ""
domNode.dataset.notAdded; // log null

So, you just have to check it:

var isDraggable = (domNode.dataset.draggable != null)

Edit

Stupid to haven't tell it before. But, you can just check if the attribute exist if you want a boolean:

domNode.hasAttribute("data-draggable");

are attributes without value allowed in HTML4?

Boolean Attributes, Yes they are completely valid.

From W3C: (On SGML & HTML)

Some attributes play the role of boolean variables (e.g., the selected
attribute for the OPTION element). Their appearance in the start tag
of an element implies that the value of the attribute is "true". Their
absence implies a value of "false".

Boolean attributes may legally take a single value: the name of the
attribute itself (e.g., selected="selected").

This states that Boolean attributes are valid in HTML4 as well, but if you use something like, would be invalid.. because that boolean belongs to option tag.. Thanks to @Ronni Skansing for clarifying the doubt..


<p selected>Hello</p>

Sample Image


HTML5 Docs :

From W3C :

Empty Attribute Syntax

Certain attributes may be specified by providing just the attribute
name, with no value.


From W3C: (HTML 5.1 Nightly )

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.


BUT

section is an invalid attribute, if you want to define your own attributes, HTML5 provides a way to do that.. you need to use data- prefix, for example, your section should be written as data-section, this way your attribute will be counted as valid.


If you hesitate to do so, we always have a validator to check - W3C Markup Validation Service

Sample Image

^ Validated As HTML5



NOTE: Though I provided data- is applicable for HTML5, using custom
attributes in HTML4 is invalid, no matter even if you define data-
before the attribute name, but, boolean attributes are valid in HTML4
as well.

MVC4: HTML5 boolean attributes rendered with True/False value

The solution was pretty strange. While doing some tests, I put an @if in the HTML input tag. This if was used to show the required attribute. After this @if, I put the disabled="@Model.BooleanValue" attribute.

It seems that this order disrupted the expected behaviour. Placing the disabled attribute before the @if solved the problem (later I have deleted the @if and converted it to required="@(!Model.BooleanValue)").

Now the working code is:

<input type="radio" name="radio-name" id="radio-name-no" value="false" class="radio" required="@(!Model.BooleanValue)" disabled="@Model.BooleanValue" />

HTML - Why boolean attributes do not have boolean value?

In SGML, an attribute may be minimized so that its value alone is short for both the name and the value, with the only possible value for the attribute in this case obviously being the attribute's own name. HTML uses this for boolean attributes, where the presence or absence of the attribute is what's meaningful, and its value is irrelevant. But in XML, minimized attributes were disallowed, so we wound up with the awkwardness that is selected="selected" when XHTML came into vogue. If you're writing HTML rather than XHTML, you can just write selected.

Setting false value vs. removing an attribute

Boolean attributes are explained here:

http://www.w3.org/TR/html4/intro/sgmltut.html#h-3.3.4.2

Some attributes play the role of boolean variables (e.g., the selected
attribute for the OPTION element). Their appearance in the start tag
of an element implies that the value of the attribute is "true". Their
absence implies a value of "false".

Boolean attributes may legally take a single value: the name of the
attribute itself (e.g., selected="selected").

So, while some browsers may interpret the string "false" as if the value was not set, others may not decide to (which is the correct behavior). Actually, as far as I know (or thought), any non-empty string usually sets the value to on/true (regardless of what the spec says is a legal value). I believe this is also undefined behavior, so this may change as well or be different from browser to browser (don't rely on it).

The bottom line is, just because a browser or two may deviate from the spec doesn't mean that you should. Removing the attribute entirely is the way to go.

Addendum: Looking at your comments and question a little closer, I think you may be confused about attribute values in general. In HTML, attr=false and attr="false" are exactly the same. Quotes are not required in any version of HTML (unless they are needed to remove ambiguity when the value contains spaces). For instance:

<input class=required>
<!-- This is fine -->

<input class=title required>
<!-- this is fine too, but "required" will be parsed as an attribute -->

<input class="title required">
<!-- To have two classes, we need the quotes -->

All attribute values (on elements that have them) are treated as strings. In other words, there is no such thing as a true boolean value (or NULL value) in HTML like there is in javascript.



Related Topics



Leave a reply



Submit