Strict verstehen, Teil 5: Formulare benutzerfreundlich gestalten
Es geht weiter^^ Formulare sind ein wichtiger Bestandteil des heutigen Webs, leider setzen noch viel zu wenige Autoren auf Hilfsmittel, die die Bedienung dieser Forumlare erleichtern, etwa das sehr hilfreiche <label>-Element.
(Ach ja, heute habe ich leider nicht mehr die Kraft zum Generalprobelesen).
Formulare benutzerfreundlich gestalten
Grundlagen
Der Vollständigkeit halber, fangen wir mit dem <form> Element an.
Das accept-Attribut
Dieses Attribut ist in Verbindung mit Dateiuploads sinnvoll. Es kann sowohl innerhalb von <form /> als auch <input /> verwendet werden. Als Wert erhält dieses Attribut von Komma getrennte MimeTypen, wobei die Unterkategorie auch als variabel gekennzeichnet werden kann. text/*,application/xhtml+xml ist eine gültige Angabe.
Kennt ein Browser dieses Attribut werden im Auswahlfeld für hochzuladende Dateien nur Dateien mit diesen MimeTypen angezeigt, was die Dateinavigation erhleblich erleichtern kann. Im Beispiel wären das Textbasierte Formate wie *.txt (text/plain), *.css (text/css) etc. und XHTML-Dokumente (*.xhtml, *.xht).
Das enctype-Attribut
Dieses Attribut muss nur in zwei Sonderfällen gesetzt werden.- Wenn das Formular für das action-Attribut einen mailto:-Verweis angibt muss enctype den Wert text/plain erhalten.
- Wenn über das Formular Dateien hochgeladen werden muss das Attribut den Wert multipart/form-data erhalten.
Formulare strukturieren
Obwohl das <form>Element bereits ein Blockelement ist, kann es Eingabefelder nicht selbstständig sinnvoll strukturieren. Es darf daher nur Blockelemente enthalten.
Besonders vorzuheben ist das <fieldset>Element, welches Eingabefelder in sinnvolle Gruppen einteilt. Eine besondere Beschriftung für diese Gruppe erhält das Element durch das <legend>Element.
HTML-Code:
<fieldset><legend>Persönliche Daten</legend>
<!-- Einige Gruppen wie diese sind auch hier im Forum im Kontrollzentrum aufzufinden. -->
</fieldset>
Für die tatsächliche Strukturierung der Eingabefelder kann durch verschiedene Elemente stattfinden. Oftmals eignen sich Definitionslisten, zur Diskussion stehen auch Tabellen.
Das name-Attribut
Das name-Attribut ist in der Variante Strict missbilligt, die einzige Ausnahme stellen Eingabefelder in Formularen dar. Einerseits sind sie notwendig, um beispielsweise die Funktionalität von Radiobuttons zu ermöglichen. Andererseits sind sie notwendig, um die eingegebenen Informationen an einen Server zu übermitteln.
Das name-Attribut darf in folgenden Elementen vorkommen: <button>, <input>, <select> und <textarea>. Der zweite Sonderfall neben <img /> ist <form>. In HTML 4 ist das name-Attribut für <form> erlaubt, in XHTML jedoch nicht.
Das <label>Element
Das <label>Element ist ein Meisterwerk, da in ihm strukturelle Auszeichnung und Benutzerfreundlichkeit vereint sind.
In den alltäglichen Formularen werden meist einfache Texte als Beschriftung für Formularelemente verwendet:
HTML-Code:
Ihr Name: <input type="text" />
Das hat den Nachteil, dass der Text „Ihr Name“ strukturell und maschinell keine Bedeutung hat. Dieses Problem kann aber gelöst werden, wenn dem Eingabefeld eine ID zugewiesen wird und im <label>Element mit dem for-Attribut darauf hingewiesen wird:
HTML-Code:
<label for="name">Ihr Name:</label> <input id="name" type="text" />
Dies hat einerseits den Vorteil, dass der Text „Ihr Name“ im Dokument eine spezielle Bedeutung hat, andererseits geben die Browser dem Element eine benutzerfreundliche Komponente: Klickt man auf diesen Text erhält das referenzierte Eingabefeld den Fokus. Checkboxen und Radiobuttons können so wesentlich einfacher aktiviert und deaktiviert werden.
Zugriffstasten
Zugriffstasten ermöglichen ein vereinfachtes Bedienen der Webseite mit der Tastatur. In den Elementen <a>, <area>, <button>, <input>, <label>, <legend> und <textarea> kann das accesskey-Attribut angegeben werden. Dieses erhält als wert ein bestimmtes Zeichen (idealerweise einen der 26 Buchstaben des Alphabets).
Drückt der Besucher eine Browserspezifische Tastenkombination zusammen mit der Zugriffstaste erhält das entsprechende Eingabefeld den Fokus (d.h. eine Eingabe ist möglich).
Zugriffstasten für Auswahlfelder
Da das accesskey-Attribut nicht für das <select>Element gesetzt werden kann muss hier ein bisschen getrickst werden: Statt des <select>Elements erhält ein <label>Element, welches die Beschriftung für das Auswahlfeld enthält, die Zuordnung zur Zugriffstaste. Durch die entsprechende Tastenkombination erhält so das <select>Element auf standardkonforme Weise eine Taste zugeordnet.
Tabulatorennavigation für Formularelemente
Ein ergänzender Ansatz zur Bedienung von Webseiten ist der Tabulatorenindex. In den Elementen <a>, <area>, <button>, <input>, <object>, <select> und <textarea> kann das tabindex-Attribut gesetzt werden. Als Wert enthält dieses Attribut eine Zahl zwischen 0 und 32767.
Das Prinzip: Ist eines der gelisteten Elemente aktiv (meist durch einen gepunkteten Rahmen [outline] zu erkennen) und besitzt dieses Element beispielsweise als tabindex den Wert 5, so wird durch drücken der Tabulatortaste das Element aktiviert, welches als tabindex-Wert die nächsthöhere Zahl zwischen 6 und 32767 besitzt.
Am Ende des index springt der Fokus meist auf Browserspezifische Elemente wie das Adressfeld. Danach beginnt der Kreis von vorne.
Bei der Verwendung von Zugiffstasten und/oder des Tabulatorenindexes sollten Autoren ihre Besucher auf die Möglichkeit dieser Bedienung hinweisen.
