Proper way of adding disabled and checked attributes to input elements

Question

Is there a standard way of adding attributes like disabled, checked etc. to different input elements in HTML forms?

The MDN documentation (https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled) simply seems to be using the shorthand version in its examples.

<option disabled>Option 2.2</option>

However, MDN didn't seem to mention anywhere is using disabled="disabled" or simply disabled is the correct way to do it. Does it not matter at all now?

The HTML spec (https://www.w3.org/TR/html51/sec-forms.html#enabling-and-disabling-form-controls-the-disabled-attribute) doesn't provide any examples.

There is an old related question What's the proper way to add selected and related attributes to inputs? but I am wondering if the spec or recommendations have changed since then.

score 0 · Accepted Answer · answered Sep 06 '21 at 22:15

The attributes you are talking about are boolean attributes and they do exactly what they mean e.g: disabled for disabling an input/button. A standard way of applying it is <input type="text" disabled> using <input type="text" disabled="disabled"> is not necessary cos it does not do any difference

see the code snippet bellow so a standard way off using those attributes is just using them as they are

.btn{
  border-radius: 0px;
  position: relative;
  padding: 10px 10px 10px 10px;
}

<button class="btn" disabled="no" >Click me (no)</button>

<button class="btn" disabled="yes" >Click me (yes) </button>

<button class="btn" disabled="disabled" >Click me (disabled)</button>

refer to w3schools for clarity

Proper way of adding disabled and checked attributes to input elements

1 Answers1