Atributo disabled de HTML
El atributo disabled de HTML es un atributo booleano que especifica que el elemento debe estar deshabilitado.
Este atributo se puede utilizar para evitar el uso del elemento hasta que se cumpla alguna condición, como seleccionar una casilla de verificación. Cuando está presente, el elemento no responde a las acciones del usuario y no puede recibir el foco. Además, los controles de formulario deshabilitados no se envían junto con el formulario. Es posible volver a hacer que el elemento sea utilizable eliminando el atributo disabled con JavaScript. El atributo disabled suele aparecer en gris.
Puedes utilizar el atributo disabled en los siguientes elementos: <button>, <fieldset>, <input>, <optgroup>, <option>, <select> y <textarea>.
Cuando se aplica el atributo disabled a un elemento, también se le aplica la pseudo-clase :disabled. Los elementos que admiten el atributo disabled pero no lo tienen establecido coinciden con la pseudo-clase :enabled.
Sintaxis
Sintaxis del atributo disabled de HTML
<tag disabled></tag>Ejemplo del atributo disabled de HTML utilizado en el elemento <button>:
Ejemplo del atributo HTML "disabled" utilizado en el elemento <button>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<button type="button">Button</button> <br /><br />
<button type="button" disabled>Disabled button</button>
</body>
</html>Ejemplo del atributo disabled de HTML utilizado en el elemento <fieldset>:
Ejemplo del atributo HTML "disabled" utilizado en el elemento <fieldset>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
margin-bottom: 10px;
}
label {
display: inline-block;
width: 120px;
}
fieldset {
background: #e1eff2;
}
legend {
padding: 20px 0;
font-size: 22px;
}
</style>
</head>
<body>
<form>
<fieldset disabled>
<legend>Personal Information:</legend>
<div>
<label>First Name:</label>
<input type="text" />
</div>
<div>
<label>Last Name:</label>
<input type="text" />
</div>
<div>
<label>Date of birth:</label>
<input type="text" />
</div>
</fieldset>
</form>
</body>
</html>peligro
Cuando un
<fieldset>está deshabilitado, todos los controles de formulario descendientes también están deshabilitados, excepto los controles de formulario dentro del elemento<legend>.
Ejemplo del atributo disabled de HTML utilizado en el elemento <input>:
Ejemplo del atributo disabled de HTML utilizado en el elemento <input>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="#" method="get">
<input type="text" name="name" placeholder="Enter your name" />
<input type="number" name="Date of birth:" placeholder="Date of birth:" disabled/>
<input type="submit" value="Submit" />
</form>
</body>
</html>Ejemplo del atributo disabled de HTML utilizado en el elemento <optgroup>:
Atributo disabled de HTML
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<select>
<optgroup label="Books" disabled>
<option value="html">HTML</option>
<option value="css">CSS</option>
</optgroup>
<optgroup label="Snippets">
<option value="java">Java</option>
<option value="linux">Linux</option>
<option value="git">Git</option>
</optgroup>
</select>
</body>
</html>Ejemplo del atributo disabled de HTML utilizado en el elemento <option>:
Ejemplo del atributo HTML "disabled" utilizado en el elemento <option>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<select>
<option value="computers">Computer</option>
<option value="notebook">Notebook</option>
<option value="tablet" disabled>Tablet</option>
</select>
</form>
</body>
</html>Ejemplo del atributo disabled de HTML utilizado en el elemento <select>:
Ejemplo del atributo HTML "disabled" utilizado en el elemento <select>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<select disabled>
<option value="books">Books</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="php">PHP</option>
<option value="js">JavaScript</option>
</select>
</form>
</body>
</html>Ejemplo del atributo disabled de HTML utilizado en el elemento <textarea>:
Ejemplo del atributo HTML "disabled" utilizado en el elemento <textarea>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<textarea name="comment" rows="8" cols="50" disabled>Send your comments to the author.</textarea>
</form>
</body>
</html>Practice
¿Qué puedes decir sobre el atributo 'disabled' de HTML basándote en el contenido de la página?