HTML/Tutorials/Formulare/Gestaltung mit JavaScript

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Generell sollte man sich beim Erstellen von Webseiten immer auf das Standardverhalten der einzelnen HTML-Elemente verlassen. Das Nachbauen der Klickfunktionalität eines buttons für ein div-Element ist nicht nur sinnlos, sondern für Screenreader unbenutzbar. Allerdings können Sie JavaScript benutzen, um zusätzliche Funktionalität bereitzustellen und so Webformulare benutzerfreundlicher zu gestalten.

verbesserte Passworteingabe[Bearbeiten]

Ein Eingabefeld eines Passworts zeigt aus Sicherheitsgründen anstelle der eingegebenen Zeichen nur Platzhalter und der Autovervollständigen-Modus ist natürlich auch ausgeschaltet. So sinnvoll dies in einem Großraumbüro ist, wo einem ständig jemand über die Schulter schaut, möchte man in der eigenen Wohnung doch während der Passworteingabe überprüfen können, ob man sich nicht vertippt hat. Dies ist möglich, indem man auf Benutzerwunsch den Wert des type-Attributs ändert:

  • Chrome
  • Firefox
  • Leer
  • Edge
  • Opera
  • Safari
Beispiel: Passwort sichtbar machen ansehen …
<form>
  <label for="email">E-Mail</label>
  <input type="email" id="email" required>
 
  <label for="passwd">Passwort</label>
  <input type="password" id="passwd" required autocomplete="off">
 
  <button id="check" type="button">Passwort sichtbar machen</button>
  <button class="ok" type="submit">anmelden</button>    
</form>
Das Formular enthält je ein Eingabefeld für die E-Mail-Adresse und für eine Passworteingabe. Damit das Passwortfeld im sichtbaren Modus nicht durch die Autovervollständigung ausgefüllt wird, erhält es neben dem required-Attribut noch ein autocomplete="off"-Attribut.
document.addEventListener('DOMContentLoaded', function () {
 
  document.querySelector('#check').addEventListener('click', function () {
    if (document.getElementById('passwd').type == 'password' ) { 
      document.getElementById('passwd').type = 'text';
      this.innerText = 'Passwort verstecken'; 
    }
    else {
      document.getElementById('passwd').type = 'password';
      this.innerText = 'Passwort sichtbar machen'; 
    }
  });
 
});
Das Beispiel enthält ein Formular mit einem Passwortfeld. Durch einen Klick auf den Button wird der Wert des type-Attributs des input-Felds auf text geändert. Der eingegebene String wird so sichtbar.

Anstelle des Punktoperators können Sie auch setAttribute() verwenden:

document.getElementById('passwd').setAttribute('type', 'text');

Schieberegler[Bearbeiten]

Die Eingabe von Zahlen ist einerseits mit input type="number" möglich, wobei die Pfeile auf der rechten Seite nur bedingt mit CSS gestaltet werden können.

Daneben können Sie mit input type="range" einen Slider (Schieberegler) verwenden . Dieser hat allerdings den Nachteil, dass der Benutzer keine direkte Rückmeldung über die eingegebenen Werte erhält. Dies können Sie mit JavaScript aber schnell nachrüsten:

Beispiel ansehen …
<h2>Ergebnisausgabe eines Schiebereglers</h2>
<label for="volume">Lautstärke:</label>
<input type="range" id="volume" value="50">
<output id="output" for="volume">50</output>
Der Wert des Schiebereglers wird mit dem input-Event ausgelesen und im output-Element wieder ausgegeben.
function ausgeben(ev) {
    document.getElementById('output').value = ev.target.value;
}

document.getElementById('volume').addEventListener('input', ausgeben);
Beachten Sie: Dieses Beispiel funktioniert im Internetexplorer nicht:
  • Der IE verwendet das input-Event nicht korrekt und
  • stellt den Wert (value) des output-Elements nicht dar.
Beachten Sie: Ohne die Verfügbarkeit von JavaScript ist die Berechnung des im output-Element ausgegebenen Werts nicht möglich. Deshalb ist es überlegens- und empfehlenswert, das output-Element erst vor der Ausgabe des Werts mit createElement dynamisch zu erzeugen und das input-Event mittels AddEventListener anzubinden.
Einfacher als das wäre wohl <output hidden></output> und das hidden-Attribut per JavaScript entfernen.

Mehrteilige Formulare[Bearbeiten]

Gerade komplexere Formulare wirken alleine durch ihre Länge unübersichtlich. Das Formular sollte in logische Abschnitte gegliedert sein. So sind in einem WebShop Versand und Zahlungsinformationen oft getrennt.[1]

Dabei sollte

  • auf jeder Seite Hilfeinstruktionen zu finden sein
  • erkennbar sein, welche Abschnitte optional sind und übersprungen werden können
  • erkennbar sein, in welchem Abschnitt man sich gerade befindet

Gliederung[Bearbeiten]

Sie können das Formular mit fieldset in einzelne Bereiche gliedern und mit JavaScript nur den aktuellen Bereich einblenden. Jedes fieldset erhält eine Beschriftung durch das legend-Element.

Fortschrittsanzeige[Bearbeiten]

Damit der Benutzer weiß, wie viele Schritte er bereits geschafft hat, können Sie mit dem progress-Element eine Fortschrittsanzeige einblenden.

Zusätzlich können die Seitenüberschrift, aber auch der title der Seite, der sich auf der Registerkarte des Browsers wiederfindet, geändert werden.

Alternativ könnte man in einer inline angeordneten Liste das jeweils akutelle Element optisch hervorheben:

Beispiel: Formular mit Abschnitten
<ol class="timeline">
	<li class="timeline-past">
		<span class="visuallyhidden">Fertig: </span>
		<a href="billing.html">Rechnungsadresse</a>
	</li>
	<li class="timeline-current">
		<span class="visuallyhidden">Jetzt: </span>
		<span>Versandadresse</span>
	</li>
	<li><span>Bestellung überprüfen</span></li>
	<li><span>Zahlung</span></li>
	<li><span>Kauf abschließen</span></li>
</ol>

Formular-in-Abschnitten.png

Anwendungsbeispiel[Bearbeiten]

ToDo (weitere ToDos)

--Matthias Scharwies (Diskussion) 05:53, 5. Nov. 2018 (CET)
Beispiel: Bestellformular mit verschiedenen Abschnitten ansehen …
<form action="order.php">
  <fieldset>
    <legend>Ware</legend>
    <ul>
      <li>
          <label for="article-1">Plüsch-Teddybär</label>
          <input id="article-1" name="article-1" type="number" value="0">
      </li>
      <li>
          <label for="article-2">Sofakissen "Sonnenblume"</label>
          <input id="article-2" name="article-2" type="number" value="0">
      </li>
    </ul>
  </fieldset>
  <fieldset>
    <legend>Bezahlung</legend>
    <p>
      <label for="payment">Art der Bezahlung</label>
      <select id="payment" name="payment">
        <option value="ae">American Express Card</option>
        <option value="master">MasterCard</option>
        <option value="visa">VISA</option>
        <option value="prepayment">Vorkasse</option>
      </select>
    </p>
    <p>
      <input id="email-receipt" name="email-receipt" type="checkbox">
      <label for="email-receipt">Quittung per E-Mail</label>
      <label for="email">an folgende Adresse</label>
      <input id="email" name="email" type="email">
    </p>
  </fieldset>
  <fieldset>
    <legend>Versand</legend>
    <dl>
      <dt>Lieferanschrift</dt>
      <dd>
          <ul>
            <li>
              <label for="recipient-name">Name</label>
              <input id="recipient-name" name="recipient-name">
            </li>
            <li>
              <label for="recipient-address">Anschrift</label>
              <input id="recipient-address" name="recipient-address">
            </li>
            <li>
              <label for="recipient-zip">PLZ</label>
              <input id="recipient-zip" name="recipient-zip">
              <label for="recipient-city">Ort</label>
              <input id="recipient-city" name="recipient-city">
            </li>
          </ul>
      </dd>
      <dt>Rechnungsanschrift</dt>
      <dd>
          <ul>
            <li>
              <label for="buyer-name">Name</label>
              <input id="buyer-name" name="buyer-name">
            </li>
            <li>
              <label for="buyer-address">Anschrift</label>
              <input id="buyer-address" name="buyer-address">
            </li>
            <li>
              <label for="buyer-zip">PLZ</label>
              <input id="buyer-zip" name="buyer-zip">
              <label for="buyer-city">Ort</label>
              <input id="buyer-city" name="buyer-city">
            </li>
          </ul>
      </dd>
    </dl>
  </fieldset>
  <fieldset>
    <legend>Zusatz</legend>
    <p>
      <label for="message">Ihre Nachricht an uns</label>
      <textarea id="message"></textarea>
    </p>
  </fieldset>
  <p><button>jetzt Kostenpflichtig bestellen</button></p>
</form>
Dieses Beispiel verwendet verschiedene Eingabemöglichkeiten wie mehrzeiliges Textfeld, Auswahlliste und Checkboxen neben reinen Textzeilen. Die verschiedenen Bereiche werden mit fieldset-Elementen voneinander abgegrenzt. Die Beschriftung eines fieldsets erfolgt mit einem legend-Element.


  1. W3C: Web Accessibility Tutorials Multi-page Forms