JavaScript/Tutorials/Formulare/Gestaltung mit JavaScript
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.
Inhaltsverzeichnis
verbesserte Passworteingabe
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:
<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>
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';
}
});
});
text geändert. Der eingegebene String wird so sichtbar.
Anstelle des Punktoperators können Sie auch setAttribute() verwenden:
document.getElementById('passwd').setAttribute('type', 'text');Mehrteilige Formulare
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
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
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:
<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>
Anwendungsbeispiel
ToDo (weitere ToDos)
<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>
fieldset-Elementen voneinander abgegrenzt. Die Beschriftung eines fieldsets erfolgt mit einem legend-Element.
Siehe auch:
In JavaScript/Tutorials/JavaScript_und_CSS wird gezeigt, wie eine Fortschrittsanzeige bei umfangreicheren Formularen durch das progrss-Element und eine schrittweise Änderung von Klassen visualisiert wird.
