HTML/Tutorials/Formulare/ausgrauen mit readonly, disabled
Sie können Elemente in Formularen mit disabled ausgrauen, um zu signalisieren, dass das Element im aktuellen Zusammenhang ohne Bedeutung ist. Ausgegraute Elemente werden auch bei Tabulator-Sprüngen übergangen.
Sinnvoll ist diese Angabe allerdings vor allem als HTML-Grundlage für Script-Sprachen, die Elemente je nach Eingaben oder Auswahl in anderen Elementen dynamisch ausgrauen. Erlaubt ist das Attribut in den Formular-Tags <input>, <fieldset>, <textarea>, <select>, <option>, <optgroup> oder <button>.
So wäre es beispielsweise sinnvoll, Angaben zum Typ des gefahrenen Autos dynamisch auszugrauen, wenn der Anwender ankreuzt, dass er gar kein Auto besitzt.
Inhaltsverzeichnis
readonly
Das readonly-Attribut legt fest, dass der vorgeschlagene Wert nur ausgelesen und nicht verändert werden können soll.
<form action="anmeldung.asp">
<label for="email">E-Mail: </label><input type="text" name="email">
<label for="land">Land: </label><input type="text" name="land" value="Deutschland" readonly>
<button type="submit">Anmelden</button>
</form>
Das readonly-Attribut kann gesetzt werden, um Nutzer davon abzuhalten den Wert des Eingabefeldes zu verändern, bevor eine bestimmte Bedingung (wie das Ankreuzen einer Checkbox mit z. B. einer AGB) erfüllt ist. Falls die Bedingung erfüllt ist, kann das Attribut mit der JavaScript-Eigenschaft elements.readOnly geändert werden.
readonly-Attributs zu umgehen!disabled
Das disabled-Attribut legt fest, dass das Eingabefeld weder benutzt werden können soll, noch seine Inhalte bei einer Datenübertragung mitgeschickt werden sollen.
Für beide Attribute gelten die bei Boolschen Attributen üblichen Regeln für die Notation.
Formularelemente mit dem disabled-Attribut werden von den Browsern üblicherweise ausgegraut dargestellt, um zu signalisieren, dass das Element im aktuellen Zusammenhang ohne Bedeutung ist. Ausgegraute Elemente werden auch bei Tabulator-Sprüngen übergangen.
<form>
<fieldset id="agb">
<input type="radio" name="agb" id="akzeptieren" value="ok" ><label for="akzeptieren">unsere AGB akzeptieren</label>
<input type="radio" name="agb" id="ablehnen" value="no" checked><label for="ablehnen">ablehnen</label>
</fieldset>
<fieldset id="persAngaben" disabled>
<label for="input1">Benutzername</label> <input value="Hans" id="input1">
<label for="input2">Passwort</label> <input type="password" value="Passwort" id="input2">
<button type="button" onclick="alert('Hallo und herzlich willkommen!')">Einloggen!</button>
</fieldset>
</form>
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('ablehnen').checked = true;
document.querySelector('#agb').addEventListener('click', weiter);
function weiter() {
if (document.getElementById('akzeptieren').checked == true) {
document.getElementById('persAngaben').removeAttribute('disabled');
}
if (document.getElementById('ablehnen').checked == true) {
document.getElementById('persAngaben').setAttribute('disabled','disabled');
}
}
});
document.getElementById('ablehnen').checked = true; setzt den Ablehnen-Button auch beim Neuladen wieder auf true , d. h. auf AGB ablehnen.Mit addEventListener wird an das fieldset mit der id agb ein Event-Handler angehängt, der bei einem Klick die Funktion weiter() aufruft.
readonly vs. disabled
| readonly | disabled | |
|---|---|---|
| Inhalt kann geändert werden | nein | nein |
| Formulardaten werden übertragen | ja | nein |
| fokussierbar | ja | nein |
| per Tab anspringbar | ja | nein |
| Eventhandler auf Klick, Doppelklick, Hover reagieren | ja | nein |
Gestaltung mit CSS
input:disabled {
background: gainsboro;
}
input[value]:disabled {
color: whitesmoke;
}
Bearbeiten mit JavaScript
Das Attribut disabled kann mit Element.disabled = false; auf false gesetzt oder durch Element.removeAttribute ganz entfernt werden.
Siehe auch:
