Verfasst von: bletra | 29. September 2009

HTML: Formulare und Tabellen

Formulare und Tabellen können auf verschiedene Weise valide dargestellt werden. Wer sowieso, die Tags neu lernt, kann die Barrierefreiheit gleich mit berücksichtigen. Bei Formularen heißt das, Labels zu verwenden und bei Tabellen heißt das die Zuordnung zwischen Tabellenzellen und der zugehörigen Spaltenüberschrift herzustellen.

Formulare

Längere Formulare sollten durch die Tags <fieldset> und <legend> gegliedert werden. Alle Formularelemente sollten ein zugehöriges -Tag haben, so dass klar ist, welches Eingabeelement wofür ist. Hier ist ein Beispiel für ein längeres Formular.

<form method=“get“ action=“TuEs.php“>
<fieldset>
<legend>Persönliche Daten</legend>
<label for=“name“>Name</label>
<input type=“text“ id=“name“ size=“10″ />
<label for=“vorname“>Vorname</label>
<input type=“text“ id=“vorname“ size=“10″ />
</fieldset>
<fieldset>
<legend>Vorlesung</legend>
<label for=“vorlesung“>Vorlesung</label>
<select id=“vorlesung“ >
<optgroup label=“Anwendungsentwicklung“>
<option value=“Herr“>EWA</option>
<option value=“Frau“>GUI</option>
</optgroup>
<optgroup label=“Datenbanken“>
<option value =“Frau Dr“>Datenbanken 1</option>
<option value =“audi“>Datenbanken 2</option>
</optgroup>
</select><br />
<textarea rows=“2″ cols=“20″>
Kommentar
</textarea>
</fieldset>
<p>
— weiterere Formularblöcke
<button type=“submit“>senden</button>
</p>
</form>

Weitere Elemente werden bei w3c gut beschrieben.

Tabellen

Tabellen dienen ausschließlich der Darstellung tabellarischer DATEN. Sie sollten nicht aus Designgründen eingesetzt werden – hierfür gibt es CSS. Die Zuordnung zwischen einer Zelle und der oder den Spalten kann auf verschiedene Weise hergestellt werden. Ich bevorzuge das Attribut headers wie im folgenden Beispiel.

<table border=“1″
summary=“This table charts the number of
cups of coffee consumed by each senator,
the type of coffee (decaf or regular),
and whether taken with sugar.“ >
<caption>Cups of coffee consumed by each senator</caption>
<tr>
<th id=“header1″>Name</th>
<th id=“header2″>Cups</th>
<th id=“header3″ abbr=“Type“>Type of Coffee</th>
<th id=“header4″>Sugar?</th>
</tr>
<tr>
<td headers=“header1″>T. Sexton</td>
<td headers=“header2″>10</td>
<td headers=“header3″>Espresso</td>
<td headers=“header4″>No</td>
</tr>
<tr>
<td headers=“header1″>J. Dinnen</td>
<td headers=“header2″>5</td>
<td headers=“header3″>Decaf</td>
<td headers=“header4″>Yes</td>
</tr>
</table>

Weitere Möglichkeiten werden bei w3c gut beschrieben.

Advertisements

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

Kategorien

%d Bloggern gefällt das: