HTML/Tutorials/Formulare/Gliederung
Das erste Suchformular enthält drei Elemente: Ein label
-, ein input
- und ein button
-Element. Diese drei Elemente können gut in einer Zeile angeordnet werden. Aus Sicht der Dokumentstruktur ist das form
-Element aber kein Textbaustein. Es gruppiert lediglich Eingabeelemente als zu einem gemeinsamen Datensatz gehörend.
Daher ist es wichtig, sich über sinnvolle Elemente zur Textstrukturierung und Gliederung größerer Formulare Gedanken zu machen.
Inhaltsverzeichnis
Gruppierung mit fieldset
Mit dem fieldset-Element können Elemente innerhalb von Formularen gruppiert werden. Mit dem legend-Element kann zusätzlich eine Überschrift für das fieldset-Element definiert werden.
Das Element fieldset
kann unter HTML5 folgende Attribute haben:
-
disabled
: Mit dem Wert disabled kann das fieldset ausgegraut angezeigt und nicht auswählbar gemacht werden. -
form
: Mit dem Wert derid
eines Formulars kann es diesem zugeordnet werden. -
name
: Durch den Namen kann es in einem verarbeitenden Script ausgewertet werden.
border: none
auch anders festlegen.Fortschrittsanzeige mit progress
Das progress-Element veranschaulicht einen Fortschritt einer Aktion etwa bei Bearbeitung eines Fragebogens in einer an Browser und Betriebssystem angepassten Darstellung. Progress bedeutet Fortschritt oder Verlauf.
Details: caniuse.com
Das progress
-Element erwartet folgende Attribute:
-
max
, gibt an, wieviele Schritte maximal möglich sind -
value
, Anzahl der abgearbeiteten Schritte
Dabei gelten folgende Regeln:
- ein fehlendes
max
-Attribut wird mit dem Wert 1 initialisiert - der Wert des
value
-Attributs sollte kleiner als der desmax
-Attributes sein
function aktualisiere_progressbar() {
var anteil = 0;
for (var k = 0; k < document.forms[0].elements.length; k++) { if (document.forms[0].elements[k].value != '') anteil++; }
document.getElementById('fortschritt').value = anteil;
}
progress
-Elementes schreiben.
Das W3C empfiehlt als Standardabmessungen 10em Breite und 1em Höhe. In den meisten Browserstylesheets ist das auch so umgesetzt.
Ausblick
Die Spezifikation sieht vor dass in Abhängigkeit von den Abmessungen des progress
-Elements verschiedene Darstellungen gerendert werden sollen.
-
height > width
: Säulendiagramm (stehend) -
height < width
: Balkendiagramm (liegend) -
height = width
: Kreisdiagramm
Gliederung durch HTML-Markup
Gliederung durch Textabsatz
Da wir aus visueller Sicht eine einzige Zeile für das Suchformular erwarten, wäre ein Textabsatz bereits eine sinnvolle Lösung:
<form action="https://google.de/search">
<p>
<label for="q">Suchbegriff</label>
<input id="q" name="q">
<button>finden</button>
</p>
</form>
Man kann sich nun streiten, ob der Textabsatz im Formular, oder das Formular im Textabsatz zu stehen habe. Für dieses konkrete Beispiel ist das völlig irrelevant, da beide Möglichkeiten gleichermaßen funktionieren:
<p>
<form action="https://google.de/search">
<label for="q">Suchbegriff</label>
<input id="q" name="q">
<button>finden</button>
</form>
</p>
Visuelle Gestaltungsmöglichkeiten aufgrund semantischen Codes
Will man ein Formular gestalten, benötigt man sowohl die Layoutsprache CSS, als auch eine Dokumentstruktur, die passende Elemente zum Gestalten anbietet. Notiert man beispielsweise alles in einer Zeile und sorgt ausschließlich mit br
-Elementen für Zeilenumbrüche, so hebt man auf der einen Seite die wichtige Trennung zwischen Markup und Layout auf, indem man HTML-Elemente ausschließlich wegen ihrer (voreingestellten) Darstellung ins Dokument schreibt, und hat auf der anderen Seite nicht genügend Elemente im Dokument, für die man ausgeklügelte Darstellungsregeln in der Layoutsprache festlegen könnte. Es lohnt sich also sehr, semantisch sinnvolles Markup zu verwenden.
Wenden wir uns nun einem Login-Formular zu. Für dieses brauchen wir zwei Eingabefelder (1. Benutzername und 2. Passwort), sowie einen Submit-Button. Bereits hier stellt sich aber die Frage, wie man diese drei Elemente in eine sinnvolle Dokumentstruktur einbindet. Drei mögliche Ansätze seien hier einmal vorgestellt:
Der Klassiker aus den Urzeiten des Webs: Tabellenlayout
<form action="login.php" method="post">
<table>
<tbody>
<tr>
<th>
<label for="login">Benutzer</label>
</th>
<td>
<input id="login" name="login">
</td>
</tr>
<tr>
<th>
<label for="pass">Passwort</label>
</th>
<td>
<input id="pass" name="pass" type="password">
</td>
</tr>
<tr>
<td>
</td>
<td>
<button>anmelden</button>
</td>
</tr>
</tbody>
</table>
</form>
Listen anstelle von Tabellen
Eine elegantere Möglichkeit ist die Verwendung einer Liste. HTML bietet hierzu eine (un)geordnete Liste oder eine Definitionsliste an.
<form action="login.php" method="post">
<ul><!-- alternativ wäre <ol> für geordnete Liste -->
<li>
<label for="login">Benutzer</label>
<input id="login" name="login">
</li>
<li>
<label for="pass">Passwort</label>
<input id="pass" name="pass" type="password">
</li>
<li>
<button>anmelden</button>
</li>
</ul>
</form>
<ul>
) bzw. ohne Nummerierung (bei Verwendung von <ol>
) haben, so kann man mit der Gestaltungssprache CSS eine passende Darstellungsregel einsetzen.Auch mit einer Definitionsliste lässt sich das Login-Formular sinnvoll auszeichnen:
<form action="login.php" method="post">
<dl>
<dt>
<label for="login">Benutzer</label>
</dt>
<dd>
<input id="login" name="login">
</dd>
<dt>
<label for="pass">Passwort</label>
</dt>
<dd>
<input id="pass" name="pass" type="password">
</dd>
<dd>
<button>anmelden</button>
</dd>
</dl>
</form>
dd
-Element mit einer Einrückung vom linken Rand angezeigt wird. Außerdem stehen dt
- und dd
-Elemente jeweils in einer neuen Zeile. Will man das anders haben, muss man wieder CSS bemühen und andere Darstellungsregeln verwenden.Wenn die Beschriftung den Gestalter stört
label
-Element verwenden, da Sie sonst die Bedienbarkeit erschweren und Barrieren errichten.<form action="https://google.de/search">
<p>
<label for="q">Suchbegriff</label>
<input id="q" name="q">
<button>finden</button>
</p>
</form>
label[for=q] {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
}
Eine weitere Möglichkeit ist die Verwendung des Attributs aria-label.
<form action="https://google.de/search">
<input id="q" name="q" aria-label="Suchbegriff">
<button>finden</button>
</form>
Man kann die Bedienbarkeit intuitiver gestalten, wenn man im Eingabefeld einen Platzhalter-Begriff eingibt. Das erreicht man mit dem placeholder
-Attribut:
<form action="https://google.de/search">
<p>
<label for="q">Suchbegriff</label>
<input id="q" name="q" aria-label="Suchbegriff" placeholder="Suchbegriff">
<button>finden</button>
</p>
</form>
label[for=q] {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
}
Siehe auch
Referenz:
Weblinks
- css-tricks: The HTML5 progress Element
- html5doctor: The progress Element
Es ist mit fieldset-Elementen in zwei Blöcke gegliedert, die jede eine Erklärung in einem legend-Element haben.