HTML/Formulare/ausgrauen

Aus SELFHTML-Wiki
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.

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 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: