Übersichtlichere Formulare für Ihre Website

Daten lesefreundlich präsentieren

Ersten Kommentar schreiben
Stand: 29. Juni 2012 (aktualisiert)

Egal, ob Sie Daten vom Benutzer abfragen oder ihm diese nur zum Lesen präsentieren, ein wenig Überblick hilft ungemein. Schade nur, dass auf vielen Websites so wenig Wert darauf gelegt wird. Lorenz Hölscher zeigt Ihnen eine einfache Technik, die Ihnen hilft, Ihre Daten lesefreundlich zu präsentieren.

Als Beispiel für ein fiktives Formular dient hier die Eingabe von Name und Adresse, wie sie in vielen Anmeldeformularen vorkommt. Dabei geht es nicht um die Datenverarbeitung (die sowieso gar nicht mit reinem HTML möglich ist, sondern immer eine zusätzliche Programmiersprache wie JavaScript oder PHP braucht!), sondern nur um die Darstellung. Das im Beitrag verwandte Beispiel können Sie hier herunterladen (.zip, 3 kB).

Wenigstens Tabellen als Struktur

Tabellen sind (zu Recht) verpönt, wenn damit das Layout einer kompletten Seite zurechtgebastelt werden soll. Für strukturierte Darstellungen sind sie jedoch unverzichtbar. Sie bieten als einziges Element die Möglichkeit, mit automatisch angepasster Breite oder Höhe auf die jeweilige Datenmenge zu reagieren und vor allem damit gleichzeitig die Nachbarelemente zu verändern.

Warum keine Tabellen und was sonst nehmen?

Tabellen blähen den Inhalt im HTML-Code durch sehr viele notwendige Befehle enorm auf und verschleiern oft die eigentliche Struktur der Seite. Zudem fangen dann die eigentlichen Tricksereien erst an, wenn mehrere Zellen spalten- oder zeilenweise zusammengefasst werden. Darin findet sich später niemand mehr zurecht.

Im Beitrag "Websites leichter gestalten" sehen Sie, wie einfach es stattdessen mit dem div-Element geht. Damit wird dann auch die eigentlich geforderte Trennung zwischen Inhalt (in der HTML-Datei) und Format (in der CSS-Datei) wieder eingehalten.

Hier benötigen wir sie, damit die Beschriftung in allen Zeilen gleich breit ist und die Eingabefelder also ordentlich in einer Linie untereinander stehen. Die HTML-Anweisungen sind hier zugunsten der Übersichtlichkeit auf ein Minimum reduziert, sodass der komplette Code zum Erzeugen einer solchen Tabelle mit Eingabefeldern wie folgt aussieht:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1;charset=windows-1252">
	<title>Sch&ouml;nere Formulare</title>
</head>
<body>

<h1>Formular mit Tabelle</h1>
<table>
<tr><td>Vorname:</td><td><input /></td></tr>
<tr><td>Nachname:</td><td><input /></td></tr>
<tr><td>&nbsp;</td></tr>
<tr><td>PLZ:</td><td><input /></td></tr>
<tr><td>Ort:</td><td><input /></td></tr>
<tr><td>Straße:</td><td><input /></td></tr>
</table>

</body>
</html>

Die Bedeutung der umgebenden Deklarationen wie <head> oder <body> können Sie ausführlich im Beitrag "Homepage selber bauen: So erstellen Sie schnell und einfach eine Webseite" nachlesen. Ich werde im Folgenden nur noch den Code für die eigentliche Tabelle mit ihren Änderungen zeigen. Die oben gezeigten Anweisungen führen im Browser zu diesem Ergebnis:

Bild vergrößernBild vergrößernEin erstes Formular mit Tabelle

Das sieht schon ganz brauchbar aus, weil die Tabelle wie versprochen für die korrekte Ausrichtung sorgt. Die leere Tabellenzeile zwischen den beiden Bereichen wird nur dann angezeigt, wenn in dieser Zeile auch tatsächlich etwas steht, daher täuscht das nichttrennbare Leerzeichen (&nbsp; = no-break-space) einen Inhalt vor. Natürlich lässt sich mit ein paar Formatierungsanweisungen auch die Höhe der Zwischenzeile deutlich reduzieren, aber das soll hier nicht das Thema sein.

Als Mitglied können Sie diesen Beitrag weiterlesen!

Werden Sie Mitglied und testen Sie akademie.de 14 Tage lang kostenlos!

In den ersten 14 Tagen haben Sie Zugriff auf alle Inhalte auf akademie.de, außer Downloads. Sie können in dieser Zeit ohne Angabe von Gründen stornieren. Eine E-Mail an service@akademie.de genügt. Nur wenn Sie Mitglied bleiben, wird der Mitgliedsbeitrag nach Ende der 14tägigen Stornofrist abgebucht.

Ich bin bereits Mitglied
Jetzt Mitglied werden und akademie.de 14 Tage kostenlos testen
Ich entscheide mich für folgende Zahlungsweise:
14 Tage Stornorecht:
Ich kann meine Mitgliedschaft in den ersten 14 Tagen jederzeit formlos stornieren, z.B. per E-Mail an service@akademie.de.

Downloads zu diesem Beitrag

Newsletter abonnieren