Formulare übersichtlicher gestalten

Manche Formulare scheinen aus den Fugen zu geraten, weil sie saumäßig unübersichtlich gestaltet sind. Ein erster Schritt zur Verbesserung ist es natürlich, dieses Formular in eine Tabelle zu packen, aber es gibt noch eine Möglichkeit...

Es ist nämlich möglich, Teilausschnitte des Formulars (aber natürlich auch das gesamte) zu umrahmen (Demo).
Dies geschieht mit dem Befehl <fieldset>...</fieldset>

Dort, wo die drei Punkte sind, kommen die zu umrahmenden Formularfelder rein.

Aber dennoch gibt es ein weiteren Befehl, der diese Umrahmung erst richtig toll werden lässt: Man kann Überschriften IN die Umrandung einbauen.
Gib einfach direkt nach dem <fieldset>-Befehl dieses ein:

Code:

<legend>Erste Eingaben</legend>

Na, das ist doch mal etwas sehr nützliches. Und beachtenswert, dass der IE schon seit seiner 4-er Generation diesen Befehl interpretiert. Netscape zog nun mit seiner 6-er Version nach.
Der Quelltext für das Beispiel sieht folgendermaßen aus:

Code:

<form> <fieldset> <legend>Erste Eingaben</legend> Eingabe Nummero Eins: <input type="Text" name="name1"> Eingabe Nummero Zwo: <input type="Text" name="name2"> </fieldset> </form>

Geschrieben von Phil Marx am 18.06.2004 (4865x gelesen)