Übersichtlichere Formulare für Ihre Website

Daten lesefreundlich präsentieren

Stand: 28. 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.

Mitglied werden

Als zahlendes Mitglied von akademie.de haben Sie vollen Zugriff auf alle Inhalte und können alle PDF-Dateien, Checklisten, Mustervorlagen und Anwendungen herunterladen.

Sind Sie sich noch unsicher? Dann wählen Sie die Option “akademie.de kostenlos testen”. So können Sie sich 14 Tage in Ruhe umschauen. Downloads stehen Ihnen in dieser Zeit nicht zur Verfügung. Gefällt Ihnen akademie.de nicht, reicht ein formloser Widerruf per E-Mail innerhalb der ersten 14 Tage. Es entstehen für Sie keine Kosten. Widerrufen Sie nicht, erhalten Sie nach Ablauf von 14 Tagen vollen Zugriff und der Mitgliedsbeitrag wird abgebucht.

Ich bin bereits Mitglied
Mitglied werden!
Ich entscheide mich für folgende Zahlungsweise:

Downloads zu diesem Beitrag

Newsletter abonnieren