HTML Boolean Attributes with Examples

HTML Boolean attributes control the behavior of elements and do not need a value. These attributes simplify logic and reduce code errors.

What Are Boolean Attributes in HTML?

Boolean attributes are attributes that do not need values. The presence of the attribute alone controls behavior. You can use them without a value.

They follow true or false logic. The attribute is true when present. It is false when absent.

You write Boolean attributes like this:

<input disabled>

The browser treats this as true for disabled. If you remove the attribute, it is false:

<input>

The browser does not look for disabled="false". That form has no effect.

Syntax Variations: With or Without Values

You can write Boolean attributes in two ways:

<input disabled>
<input disabled="disabled">

Both are valid. Both give the same result. But the first is cleaner. It avoids repetition.

So, which is better and why?

The form without a value is better. It matches HTML rules and avoids confusion about values. Browsers read both the same, but developers prefer the cleaner form.

Here are the differences between standard attributes that need values and boolean attributes that do not:

Boolean:

• It treats it as true when it exists.
• It treats it as false when it doesn’t exist.

Standard:

• The browser reads the value directly.
• Meaning changes with values.

Common Boolean Attributes and Their Usage

These Boolean attributes appear often in forms:

• disabled
• checked
• readonly
• required
• autofocus
• multiple
• selected
• hidden
• novalidate

You can use them in the form tags and other tags. Let’s see examples:

<input type="text" disabled>

This input does not accept text. The user cannot click or type.

<input type="checkbox" checked>

This checkbox starts as checked.

<textarea readonly></textarea>

This textarea shows text but does not allow edits.

<input type="email" required>

This input must have a value before the form submits.

List of All Boolean Attributes in HTML5

Form elements:

• disabled
• readonly
• required
• autofocus
• multiple
• checked
• selected
• novalidate

Media elements:

• autoplay
• muted
• controls
• loop

Other elements:

• hidden
• itemscope
• open
• default
• async
• defer
• formnovalidate
• inert
• reversed
• scoped
• truespeed
• typemustmatch

All modern browsers support Boolean attributes. These include Chrome, Firefox, Safari, Edge, and Opera. Support covers both HTML4 and HTML5. Older browsers also support most Boolean logic.

Examples

Disable a Submit Button:

<button type="submit" disabled>Submit</button>

This button does not work. The browser blocks clicks. You can enable it later with JavaScript.

Autofocus on Input Field:

<input type="text" autofocus>

This input gets focus first when the page loads. It lets users type immediately.

Loop an Audio Clip Automatically:

<audio controls autoplay loop>
  <source src="sound.mp3" type="audio/mpeg">
</audio>

This plays audio when the page loads. It loops the clip. The loop works only if autoplay also exists.

Required Email with Readonly Value:

<input type="email" value="[email protected]" required readonly>

The input must have a value. The form does not submit without it. But the user cannot edit it.

Wrapping Up

In this article, you learned how HTML Boolean attributes work and how browsers treat them. You also saw the syntax and a full attribute list.

Here is a quick recap:

• Boolean attributes use presence, not values.
• They follow true/false logic.
• Clean syntax avoids attribute="attribute".
• Browsers support them widely.
• You use them in forms and media. Also, use them in control tags.
• You can apply them alone or with JavaScript.

<input type="checkbox" checked>
<input type="text" disabled>

<input type="checkbox">
<input type="text">

<input type="checkbox" checked="false"> <!-- Still checked -->

<input type="checkbox"> <!-- Not checked -->

<ul>
  <li><code>checked</code> - For <input type="checkbox"> and <input type="radio"></li>
  <li><code>disabled</code> - Disables form elements</li>
  <li><code>readonly</code> - Makes input read-only</li>
  <li><code>required</code> - Marks a field as mandatory</li>
  <li><code>autofocus</code> - Sets focus on page load</li>
  <li><code>multiple</code> - Allows multiple file selection</li>
</ul>

const input = document.querySelector('input');

// Check if 'disabled' is present
if (input.hasAttribute('disabled')) {
  input.removeAttribute('disabled');
} else {
  input.setAttribute('disabled', '');
}

input.disabled = true; // Adds 'disabled'

input.disabled = false; // Removes 'disabled'

Similar Reads