HTML disabled-Attribut
Das HTML disabled-Attribut ist ein boolesches Attribut und gibt an, dass das Element deaktiviert sein muss.
Dieses Attribut kann verwendet werden, um die Nutzung des Elements zu verhindern, bis eine bestimmte Bedingung erfüllt ist, z. B. das Aktivieren eines Kontrollkästchens. Wenn es vorhanden ist, reagiert das Element nicht auf Benutzeraktionen und kann nicht den Fokus erhalten. Darüber hinaus werden deaktivierte Formularsteuerelemente nicht mit dem Formular gesendet. Es ist möglich, das Element wieder nutzbar zu machen, indem das disabled-Attribut mit JavaScript entfernt wird. Das disabled-Attribut wird üblicherweise grau dargestellt.
Sie können das disabled-Attribut für die folgenden Elemente verwenden: <button>, <fieldset>, <input>, <optgroup>, <option>, <select> und <textarea>.
Wenn das disabled-Attribut auf ein Element angewendet wird, gilt auch die Pseudoklasse :disabled. Elemente, die das disabled-Attribut unterstützen, aber nicht gesetzt haben, entsprechen der Pseudoklasse :enabled.
Syntax
Syntax des HTML disabled-Attributs
<tag disabled></tag>Beispiel für das HTML disabled-Attribut, das auf das <button>-Element angewendet wird:
Beispiel für das HTML "disabled"-Attribut, das auf das <button>-Element angewendet wird
<!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>Beispiel für das HTML disabled-Attribut, das auf das <fieldset>-Element angewendet wird:
Beispiel für das HTML "disabled"-Attribut, das auf das <fieldset>-Element angewendet wird
<!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>DANGER
Wenn ein <fieldset> deaktiviert ist, werden auch alle untergeordneten Formularsteuerelemente deaktiviert, außer den Formularsteuerelementen innerhalb des <legend>-Elements.
Beispiel für das HTML disabled-Attribut, das auf das <input>-Element angewendet wird:
Beispiel für das HTML disabled-Attribut, das auf das <input>-Element angewendet wird
<!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>Beispiel für das HTML disabled-Attribut, das auf das <optgroup>-Element angewendet wird:
HTML disabled-Attribut
<!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>Beispiel für das HTML disabled-Attribut, das auf das <option>-Element angewendet wird:
Beispiel für das HTML "disabled"-Attribut, das auf das <option>-Element angewendet wird
<!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>Beispiel für das HTML disabled-Attribut, das auf das <select>-Element angewendet wird:
Beispiel für das HTML "disabled"-Attribut, das auf das <select>-Element angewendet wird
<!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>Beispiel für das HTML disabled-Attribut, das auf das <textarea>-Element angewendet wird:
Beispiel für das HTML "disabled"-Attribut, das auf das <textarea>-Element angewendet wird
<!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
Was können Sie über das HTML 'disabled'-Attribut basierend auf dem Seiteninhalt sagen?