CODEWITHSUNDEEP
html
oluwasetemi
oluwasetemi

Reputation: 78

What is the difference between HTML attribute `disabled` and `inert`?

I am trying to figure the difference between inert and disabled html attribute , apart from the specific nature of the disabled attribute that only specific element can use it. Does it mean inert is a kind of disabled that works on all element?

<div inert>
  <button>This is a button</button>
  <input type="text">
  <input type="button" value="This is an input">
</div>
<div>
  <button disabled>This is a button</button>
  <input type="text" disabled>
  <input type="button" value="This is an input" disabled>
</div>
<div>
  <button>This is a button</button>
  <input type="text">
  <input type="button" value="This is an input">
</div>

Upvotes: 4

Views: 1519

Answers (3)

Zach Jensz
Zach Jensz

Reputation: 4078

The inert global attribute makes an element non-interactive without hiding or changing it visually in any way (unlike display none). This means that clicking, tabbing etc. will do nothing and browsers can even ignore it in features such as text search.

The disabled form attribute stops an input from being altered. It visually shows a no-access cursor on hover usually and sometimes greys out fields by default.

Disabled should still be used to disable form inputs when needed. Inert is mainly for modals using the showModal() API where you want to show the background but have it non-interactive.

Upvotes: 0

imhotap
imhotap

Reputation: 2490

EDIT: There is now an inert global attribute

There is no HTML attribute inert.

From the (current as of today) WHATWG HTML specification text:

This section does not define or create any content attribute named "inert". This section merely defines an abstract concept of inertness.

See https://html.spec.whatwg.org/multipage/interaction.html#inert-subtrees (HTML Standard - Section 6.2 Inert subtrees)

Upvotes: 1

Angel Politis
Angel Politis

Reputation: 11313

disabled and inert have completely different purposes. disabled is an actual attribute, while inert is merely a definition of the concept it describes.

The purpose of using disabled is to keep a user from interacting with and submitting the value of an input element and is supported solely on such elements.

On the other hand, inert can be used on any element and it's used to instruct the user agent to act as if the marked node were absent for the purposes of targeting user interaction events.

Here is what the HTML standard says about inert:

When a node is inert, then the user agent must act as if the node was absent for the purposes of targeting user interaction events, may ignore the node for the purposes of text search user interfaces (commonly known as “find in page”), and may prevent the user from selecting text in that node.

In addition, the standard has the following two notes regarding inert:

  1. When a node is inert, it generally cannot be focused. Inert nodes that are commands will also get disabled.

  2. This section does not define or create any content attribute named "inert". This section merely defines an abstract concept of inertness.

Upvotes: 2

Related Questions