HTML - disabled Attribute

The HTML disabled attribute is used to specify that the element is disabled. It is a Boolean attribute. Using this attribute, we can disable the whole form controls such as input elements, buttons, options, textarea, fieldset, etc.

It can be used on the following elements: <input> , <fieldset>, <button>, <textarea>, <select>, <option> and <optgroup> etc.

Syntax

Following is the syntax for HTML disabled attribute −

<input disabled>

Example

In the following example, we are going to use the disabled attribute with the input field.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML disabled attribute</title>
</head>
<body>
   <!--example of the 'disabled' attribute-->
   <p>'disabled' attribute with input element.</p> Text(disabled): <input type="text" placeholder="Disabled" disabled>
   <input type="text" placeholder="Not disabled">
   <br> Checkbox(disabled): <input type="checkbox" disabled>
   <input type="checkbox">Not disabled <br> Radio(disabled): <input type="radio" disabled>
   <input type="radio">Not disabled
</body>
</html>

When we run the above code, it will generate an output consisting of the input fields some are mentioned with disabled attribute displayed on the webpage.

Example

Considering the another scenario, where we are going to use the disabled attribute with the button element.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML disabled attribute</title>
</head>
<body>
   <!--example of the 'disabled' attribute-->
   <p>'disabled' attribute with button element.</p>
   <button disabled>Disabled</button>
   <button>Not Disabled</button>
</body>
</html>

On running the above code, the output window will pop up displaying the buttons out of one i mentioned with disabled attribute on the webpage.

Example

Let's look at the following example, where we are going to use the disabled attribute with the fieldset element.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML disabled attribute</title>
</head>
<body>
   <!--example of the 'disabled' attribute-->
   <p>'disabled' attribute with fieldset element.</p>
   <fieldset disabled>
      <legend>Login Form</legend> Username: <input type="text" placeholder="username">
      <br> Password: <input type="password" placeholder="password">
      <br>
      <button>Login</button>
   </fieldset>
</body>
</html>

When we run the above code, it will generate an output consisting of the input field in the fieldset that are disabled displayed on the webpage.

Example

Following is the example, where we are going to use the disabled attribute with the select and option element.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML disabled attribute</title>
</head>
<body>
   <!--example of the 'disabled' attribute-->
   <p>'disabled' attribute with select and option element.</p>
   <!--disabled option-->
   <select>
      <option>HTML</option>
      <option disabled>CSS</option>
      <option>JavaScript</option>
   </select>
   <!--disabled select-->
   <select disabled>
      <option>HTML</option>
      <option>CSS</option>
      <option>JavaScript</option>
   </select>
</body>
</html>

On running the above code,the output window will pop up displaying the dropdown menu out of one is disabled on the webpage.

html_attributes_reference.htm
Advertisements