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 …
<h1>Ausgrauen mit "disabled"</h1>
<form action="#.html" > 
  <label for="check1">unsere AGB akzeptieren
    <input  type="radio" id="agb" name="agb" value="ok" id="check1" onclick="weiter();">
  </label>
  <label for="check2">ablehnen
    <input type="radio" name="agb" id="abl" checked value="no" id="check2" onclick="weiter();">
  </label>
 
  <fieldset id="persAngaben" disabled>
    <label for="input1">Benutzername</label> <input value="Hans" id="input1"><br/> 
    <label for="input2">Passwort</label> <input type="password" value="Passwort" id="input2"><br/> 
    <button type="button" onclick="alert('Hallo und herzlich willkommen!')">Einloggen!</button>
  </fieldset>
</form>
 
<script>
   function init() {
     document.getElementById('abl').checked = true;
  }
  function weiter() {	  
    var e = document.getElementById('persAngaben');
    if (document.getElementById('agb').checked  == true) {
      e.removeAttribute('disabled');
    }
    if (document.getElementById('abl').checked  == true) {
      e.setAttribute('disabled','disabled');
    }
  }
 
  init();
</script>

Das Beispiel enthält ein Formular mit zwei Radio-Buttons. Erst wenn Benutzer die AGB akzeptieren, wird das ausgegraute Formular freigeschaltet. Die Funktion init() setzt den Radio-Button auf AGB ablehnen.

Bei einem Klick auf "Akzeptieren" wird die Funktion weiter()aufgerufen, die das ausgegraute fieldset mit der Methode removeAttribute() aktiviert. Wenn der Benutzer wieder auf "Ablehnen" geht, wird das disabled-Attribut mit setAttribute() wieder gesetzt.



[Bearbeiten] Gestaltung mit CSS

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] Bearbeiten mit JavaScript

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

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Schnell‑Index
Mitmachen
Werkzeuge
Spenden
SELFHTML