HTML disabled-Attribut
Das disabled-Attribut ist ein boolean-Attribut, das angibt, dass ein Element deaktiviert sein muss. Erfahren Sie mehr und auf welchen Elementen es eingesetzt wird.
Das HTML-Attribut disabled ist ein boolean-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 einer Checkbox. Wenn es vorhanden ist, reagiert das Element nicht auf Benutzeraktionen und kann nicht fokussiert werden. Darüber hinaus werden deaktivierte Formularelemente nicht mit dem Formular gesendet. Es ist möglich, das Element durch Entfernen des disabled-Attributs mit JavaScript wieder nutzbar zu machen. Das disabled-Attribut wird üblicherweise ausgegraut dargestellt.
Das disabled-Attribut kann auf folgenden Elementen verwendet werden: <button>, <fieldset>, <input>, <optgroup>, <option>, <select> und <textarea>.
Wenn das disabled-Attribut auf ein Element angewendet wird, gilt auch die Pseudo-Klasse :disabled, sodass Sie deaktivierte Steuerelemente in CSS formatieren können. Elemente, die das disabled-Attribut unterstützen, es aber nicht gesetzt haben, entsprechen der Pseudo-Klasse :enabled.
Syntax
<tag disabled></tag>Da disabled ein boolean-Attribut ist, reicht seine bloße Anwesenheit aus, um es zu aktivieren. Sie benötigen keinen Wert; disabled, disabled="" und disabled="disabled" sind alle gleichwertig. Um es zu deaktivieren, entfernen Sie das Attribut vollständig.
disabled vs. readonly
Beide Attribute verhindern, dass ein Benutzer ein Formularelement ändert, verhalten sich jedoch sehr unterschiedlich. Die Wahl des falschen Attributs ist eine häufige Fehlerquelle, insbesondere wenn der Wert eines Feldes noch den Server erreichen muss.
| Verhalten | disabled | readonly |
|---|---|---|
| Wert wird mit dem Formular gesendet | Nein | Ja |
| Kann Tastaturfokus erhalten | Nein | Ja |
| Erscheint bearbeitbar (Cursor, Textauswahl) | Nein (ausgegraut) | Ja |
Entspricht :disabled / :read-only | :disabled | :read-only |
| Wird von Screenreadern ausgegeben | Oft übersprungen | Normal ausgegeben |
| Funktioniert bei jedem Steuerelementtyp | <input>, <select>, <textarea>, <button> usw. | Nur textähnliche <input> und <textarea> |
Verwenden Sie disabled, wenn das Steuerelement vollständig inaktiv sein soll und sein Wert ignoriert werden soll. Verwenden Sie readonly, wenn der Benutzer einen Wert sehen (und kopieren), ihn aber nicht bearbeiten können soll, während er weiterhin mit dem Formular gesendet wird.
Barrierefreiheit
Ein deaktiviertes Element wird aus der Tab-Reihenfolge entfernt, kann nicht angeklickt werden und wird von unterstützenden Technologien oft übersprungen. Dadurch ist es leicht zu übersehen: Ein Screenreader-Nutzer, der per Tab durch ein Formular navigiert, bemerkt möglicherweise nie, dass ein deaktivierter „Senden"-Button existiert oder warum.
Wenn ein Steuerelement wie nicht verfügbar aussehen und sich so verhalten soll, aber dennoch fokussierbar und für assistive Technologien zugänglich bleiben soll, verwenden Sie das Attribut aria-disabled="true" anstelle des nativen disabled-Attributs. Mit aria-disabled bleibt das Steuerelement in der Tab-Reihenfolge und wird als „gedimmt/nicht verfügbar" ausgegeben, aber Sie müssen seine Aktion selbst in JavaScript verhindern — der Browser blockiert weder Klicks noch das Absenden des Formulars für Sie.
Als Faustregel gilt: Verwenden Sie natives disabled für Steuerelemente, die wirklich nicht teilnehmen sollen, und greifen Sie auf aria-disabled zurück, wenn die Auffindbarkeit des Elements wichtiger ist als der eingebaute Schutz.
Beispiele nach Element
Beispiel des HTML-Attributs disabled am <button>-Element
<!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 des HTML-Attributs disabled am <fieldset>-Element
<!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>Wenn ein <fieldset> deaktiviert ist, werden alle untergeordneten Formularelemente ebenfalls deaktiviert, mit Ausnahme der Formularelemente innerhalb des <legend>-Elements.
Beispiel des HTML-Attributs disabled am <input>-Element
<!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 des HTML-Attributs disabled am <optgroup>-Element
<!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 des HTML-Attributs disabled am <option>-Element
<!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 des HTML-Attributs disabled am <select>-Element
<!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 des HTML-Attributs disabled am <textarea>-Element
<!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>disabled per JavaScript umschalten
Ein häufiges Muster ist es, ein Steuerelement deaktiviert zu lassen, bis der Benutzer etwas tut — zum Beispiel einen „Senden"-Button erst aktivieren, nachdem eine Checkbox angehakt wurde. In JavaScript stellt jedes Formularelement eine boolean-Eigenschaft disabled bereit. Setzen Sie sie auf true, um das Element zu deaktivieren, und auf false, um es zu aktivieren:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<label>
<input type="checkbox" id="agree" /> I accept the terms
</label>
<br /><br />
<button id="submit" type="button" disabled>Submit</button>
<script>
const agree = document.getElementById("agree");
const submit = document.getElementById("submit");
agree.addEventListener("change", function () {
// Enable the button only while the checkbox is checked
submit.disabled = !agree.checked;
});
</script>
</body>
</html>Das Setzen von element.disabled = true fügt das Attribut hinzu, und element.disabled = false entfernt es. Beachten Sie, dass die Eigenschaft ein boolean ist und kein string "disabled" — weisen Sie daher immer true oder false zu.