HTML Formulare ohne Tabellen umsetzen

veröffentlicht am 28. November 2010

Früher war es ja Gang und Gebe, dass man Webseiten mit Tabellenlayouts umgesetzt hat. Heutzutage sind Tabellen grundsätzlich verpönt – außer natürlich für tabellarische Inhalte. Doch wie erstellt man stattdessen ordentlich ausgerichtete Formulare?

Als Beispiel dient hier ein ganz einfaches Loginformular. Dafür benötigen wir je ein Eingabefeld für Benutzername und Passwort, sowie einen Submit-Button. Der Einfachheit halber habe ich unwichtige Quellcode-Teile weg gelassen.

Tabellen-Layout (falsch)

Wenn man das angesprochene Formular mit Tabellen entwerfen würde, sieht das Ganze so aus:

<table>
   <tr>
      <td><label for="user">Benutzername:<label></td>
      <td><input id="user" name="user" type="text" /></td>
   </tr>
   <tr>
      <td><label for="pass">Passwort:</label></td>
      <td><input id="pass" name="pass" type="password" /></td>
   </tr>
   <tr>
      <td></td>
      <td style="float:right"><input type="submit" value="anmelden" /></td>
   </tr>
</table>

Formular nur mit CSS (richtig)

Nun zeige ich euch, wie man Formulare richtig gestaltet. Zunächst einmal benötigen wir natürlich unser Formular:

<form action="login.php" method="post">
   <label for="user">Benutzername:</label>
   <input id="user" name="user" type="text" />
   <label for="pass">Passwort:</label>
   <input id="pass" name="pass" type="password" />
   <input type="submit" value="anmelden" />
</form>

Zudem müssen folgende Zeilen in dein Stylesheet:

form {
   width: 300px;
}

label {
   clear: both;
   float: left;
}

input {
   float: right;
}

input[type="submit"] {
   clear: both;
   float: right;
}

Natürlich musst du das Stylesheet an deine Gegebenheiten anpassen und mit geeigneten CSS-Selektoren ausstatten, damit nicht deine ganze Seite verunstaltet wird. Ebenso fehlen zum Beispiel noch mehrzeilige Eingabefelder und Auswahlmenüs in diesem Beispiel.

Fazit

Neben einem besseren Stil verbessert die Lösung mit CSS die Lesbarkeit des Quelltextes enorm. Dass die Realisierung mit CSS ganz einfach ist, sollte hiermit hoffentlich deutlich geworden sein :)

Kommentare

Gute Idee, werde ich in Zukunft auch so umsetzen.
Und damit die Zeilen nicht direkt zusammenkleben:

label, input, textarea usw. {
margin:0.5em;
}

Kommentar #1 von marco am 28. November 2010


Alter hut ;-), aber schön, dass es jemand anspricht. Nun noch ein wenig javascript und man hat ein wunderbares formular

Kommentar #2 von wucherpfennig am 28. November 2010


ja so ist es wohl die bessere lösung. ich habs teilweise immer mit einem break gemacht… werds in zukunft auch lieber so aufbauen.

Kommentar #3 von dewe am 07. Dezember 2010


Hinterlasse einen Kommentar