IPC SE19 Medienpartner 630x250 48558 v1.jpg

SELFHTML ist in diesem Jahr Medienpartner der IPC.

Für die Hauptkonferenz vom 4. – 6. Juni in Berlin verlosen wir ein Freiticket.

Weitere Informationen finden sich im SELFHTML-Forum.

HTML/Formulare/ausgrauen mit readonly, disabled

Aus SELFHTML-Wiki
< HTML‎ | Formulare(Weitergeleitet von HTML/Formulare/ausgrauen)
Wechseln zu: Navigation, Suche

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.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

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.

readonly[Bearbeiten]

Das readonly-Attribut legt fest, dass der vorgeschlagene Wert nur ausgelesen und nicht verändert werden können soll.

Beispiel: Textvorbelegung mit placeholder
<form action="anmeldung.asp">
  <label for="email">Email: </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.

Hinweis

Sie sollten keinesfalls darauf vertrauen, dass der Inhalt des Eingabefeldes tatsächlich unverändert abgeschickt wird, da es grundsätzlich Möglichkeiten gibt, die Wirkung des readonly-Attributs zu umgehen!

disabled[Bearbeiten]

Das disabled-Attribut legt fest, dass das Eingabefeld weder benutzt werden können soll, noch seine Inhalte bei einer Datenübertragung mitgeschickt werden sollen.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

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.

Beachten Sie: In XHTML müssen Sie dieses Attribut in der Form disabled="disabled" notieren.
Beispiel: Formular ansehen …
<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>
Das Beispiel enthält ein Formular mit zwei Radio-Buttons. Erst wenn Benutzer die AGB akzeptieren, wird das ausgegraute Formular freigeschaltet.
  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.

In dieser Funktion wird überprüft, ob der Akzeptieren-Radio-Button angeklickt wurde. Dann wird das ausgegraute fieldset aktiviert, indem das disabled-Attribut mit der Methode removeAttribute entfernt wird. Wenn der Benutzer wieder auf "Ablehnen" geht, wird das disabled-Attribut mit setAttribute wieder gesetzt.


Gestaltung mit CSS[Bearbeiten]

Beachten Sie: Beim Firefox ist das Eingabefeld zwar nicht benutzbar, aber nicht vom aktiven Eingabefeld zu unterscheiden. Mit CSS können Sie die Pseudoklassen :enabled, :disabled und :checked selektieren und das Feld auch optisch ausgrauen:
Beispiel
  input:disabled {
    background: gainsboro;
  }
  input[value]:disabled {
    color: whitesmoke;
  }

Bearbeiten mit JavaScript[Bearbeiten]

Das Attribut disabled kann mit document.getElementById('id').disabled = false; auf false gesetzt oder durch Element.removeAttribute ganz entfernt werden.

Siehe auch: