Html value true false

HTML Boolean Attributes

Today we will analyze Pull Request #91 to VueJS to learn about boolean attributes in HTML. This PR perfectly demonstrates how basic web development fundamentals can be all that’s required to make a meaningful contribution.

Pull request introduction

Support boolean attributes (#91) was submitted for review in February 2014. @th0r, the PR author, provided an example of how VueJS at the time did not properly support boolean attributes.

Learning about boolean attributes

@th0r provided the following example to demonstrate how VueJS users were wanting to dynamically toggle the disabled state of a element.

Suppose we were wanting to determine whether a should be enabled or disabled based upon the value of a JavaScript variable. Lets call this hypothetical variable submissionAllowed .

In HTML, the way we indicate we want a button to be enabled(clickable) or not is with the disabled attribute. (Note: there is no enabled attribute — only disabled .)

VueJS users were wanting to specify the above scenario like so:

button type="submit" v-attr="disabled: !submissionAllowed"> 

Ideally, if submissionAllowed was set to true , then the disabled attribute should be set to false , enabling the . If, on the other hand, submissionAllowed was set to false , we would want the disabled attribute to be true so the would be disabled.

But unfortunately that does not work. Observe the following pairings of html followed by the resulting button. Attempt to click on each one of them.

button type="submit" disabled="true">Can you click me?button> 

button type="submit" disabled=true>Did you try?button> 

button type="submit" disabled="false">Have any luck?button> 

button type="submit" disabled=false>How about this one?button> 

button type="submit" disabled="">Or maybe this one?button> 

button type="submit" disabled>Perhaps this one?button> 

button type="submit">It works!button> 

The only clickable button was the last element. That particular button had the disabled attribute completely omitted. Is this a bug? Shouldn’t disabled=false cause the to be enabled?

What the W3C says

The following quoted portions come from the official HTML5 specification from the W3C:

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.

button type="submit" disabled="false">This will be disabledbutton> 

button type="submit" disabled="hahah">This will be disabledbutton> 

button type="submit">This will be enabledbutton> 

Thus the disabled attribute existing at all in the element means «yes, this element should be disabled». Regardless of the value of the attribute, its presence indicates it should be disabled.

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.

Although this appears to be somewhat contradictory to the previous paragraph, this [Stackoverflow answer] offers a solid explanation. To summarize, the only values for the disabled attribute the HTML5 standard deems as valid are:

This applies to all boolean attributes (such as selected ).

The values «true» and «false» are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.

This is a corollary of the first paragraph. The W3C clearly specifies that even the magic words «true» and «false» are invalid values for boolean attributes.

This means the only valid uses of disabled on our button are:

button type="submit" disabled>This is validbutton> button type="submit" disabled="">This is validbutton> button type="submit" disabled="disabled">This is validbutton> button type="submit">This is validbutton> 

Conclusion

@th0r was able to create an impactful contribution to VueJS thanks to his knowledge of boolean attributes in HTML. This PR demonstrates that even the most basic knowledge, when applied correctly, can make a big difference!

Tagged as html, quick tips

Date published — September 05, 2017

Источник

Html value true false

Post from May 19, 2020 (↻ July 14, 2023), filed under Web Development (feed). There are Boolean attributes in HTML and, unless I err somewhere, there are two dozen of them. Here’s a quick rundown of what makes for a Boolean attribute, and what Boolean attributes there are in current HTML. What is a Boolean at all? Citing the The Web Development Glossary , a Boolean is “a data type that has one of two possible values (usually denoted true and false).” What is a Boolean attribute? A Boolean attribute is an attribute that can only be true or false. How does a Boolean attribute work? According to the HTML specification:

The presence of a boolean attribute on an element represents the “true” value, and the absence of the attribute represents the “false” value.

The values “true” and “false” are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.

The Boolean Attributes

Update (October 21, 2022)

The list now strictly follows the HTML specification’s attributes overview. That means it doesn’t contain Boolean attributes found on legacy and obsolete elements anymore, like truespeed .

About Me

I’m Jens, and I’m an engineering lead and author. I’ve worked as a technical lead for Google, I’m close to W3C and WHATWG, and I write and review books for O’Reilly. I love trying things, sometimes including philosophy, art, and adventure. Here on meiert.com I share some of my views and experiences.

If you have a question or suggestion about what I write, please leave a comment (if available) or a message. Thank you!

Read More

Looking for a way to comment? Comments have been disabled, unfortunately.

Get a good look at web development? Try The Web Development Glossary (2020). With explanations and definitions for literally thousands of terms from Web Development and related fields, building on Wikipedia as well as the MDN Web Docs. Available at Apple Books, Kobo, Google Play Books, and Leanpub.

You are here: Home → Archive → 2020 → The 24 Boolean Attributes of HTML

“Machine production […] knows no failures, but it knows no excellence, either.”—Erich Fromm

Источник

Boolean attribute (HTML)

A boolean attribute in HTML is an attribute that can be either true or false .

It is worth noticing that a boolean attribute is true when it is present, and false when it is absent.

Here’s an example of a HTML boolean attribute checked :

input type="checkbox" checked /> input type="checkbox" checked="" /> input type="checkbox" checked="true" /> input type="checkbox" checked="false" /> input type="checkbox" checked="any value" /> input type="checkbox" /> 

See also

Found a content problem with this page?

This page was last modified on Jun 8, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

How to use boolean attributes in Web Components

While all HTML attributes are strings, by reason of HTML being a plain text format, you will often hear about boolean attributes — but how do you set boolean attributes if all attributes are strings?

Declaring boolean attributes

The truth is boolean attributes don’t exist on Custom Elements — when people talk about them they are referring to a simple convention: if an attribute exists on an element then it’s true, whilst if the attribute doesn’t exist on an element then it’s false:

 
my-component open>my-component>

 
my-component>my-component>

Managing boolean attributes in code

There is no dedicated DOM API to deal with boolean attributes since they are a convention rather than a dedicated type of attribute, so you the use standard attribute methods.

To set a boolean attribute to true you set it to an empty string:

const el = document.querySelector('my-component');

el.setAttribute('open', '');
/* 
setting an empty string will set the 
attribute with no value on the element
*/

and to remove a boolean attribute to false you remove it:

To read a boolean attribute you can check it exists:

const isOpen = el.hasAttribute('open');

There’s a few points to note here:

1. You can see here that when using hasAttribute there is no requirement for the attribute to be set to an empty string — setting an attribute to any value will return true , but again by convention boolean attributes should use an empty string.
2. It’s also important to realise that the strings «true» and «false» have no dedicated meaning with HTML attributes and setting a boolean attribute to either «true» or «false» will make the boolean attribute true.
3. There is no explicit way to set a boolean attribute to false, it must be removed. getAttribute returns null for non existent attributes, but you cannot setAttribute(‘open’, null) — this will result in open=»null» which will then be considered true.

The HTML Spec is a little more strict on boolean attributes on built-in elements — it states that the attribute must be set to an empty string or to a value equal to the attribute name, e.g. open=»open» .

Get the latest Web Component news, tips and advice

I send out a regular newsletter — Web Component Bytes — containing curated news, tips and advice about Web Components.

Sign up below to get it hand delivered to your inbox — no spam and unsubscribe at anytime.

Chris Haynes

Источник