HTML - Elemente GruppierenWebsites haben meist mehrere logische Bereiche, z.B. bei Formularen. Diese können Sie mit HTML 4.0 auch als eigenen Bereich definieren, und optisch hervorheben.

Es war ein allgemeines Problem, das man sich in Formularen mit vielen Feldern schwer tat, einen Überblick zu behalten. Ein einfaches Formular zum Eintragen in ein Webverzeichnis hat z.B. mehrere logische Bereiche, für die Personendaten, die Websitedaten, sowie den Formular absenden/ abbrechen - Bereich.

Diese einzelnen Bereiche kann man mit den <fieldset> Tag aus dem HTML 4.0 Standard fest auszeichnen, und optisch hervorheben. Mit dem <legend> besteht dann noch die Möglichkeit den Bereich einen eigenen Titel zu geben. Diese beiden Tags lassen sich natürlich auch auf Textabsätze, Ebenen anwenden, nur ist die anschaulichkeit bei Formularen am Deutlichsten.

Anwendung findet dieses Element beispielsweise auch bei einfachen Feedback Formularen oder Newsletterformularen.

Live Demo

<form method="post" action="#">

<fieldset><legend>Personendaten</legend>
Name: <input type="text" name="name"><br>
Strasse: <input type="text" name="strasse"><br>
PLZ: <input type="text" name="plz"><br>
Ort: <input type="text" name="ort">
</fieldset>


<fieldset><legend>Website</legend>
Titel: <input type="text" name="titel"><br>
URL: <input type="text" name="url"><br>
Beschreibung: <textarea cols="60" rows="8" name="beschreibung"></textarea>
</fieldset>

<fieldset><legend>Absenden/ Abbrechen</legend>
<input type="submit" value="Senden"><br>
<input type="reset" value="Abbrechen"><br>
</fieldset>

</form>


Diese Objekte können Sie mit CSS noch beliebig formatieren. Die Ausgabe im <legend> Tag können Sie zudem noch mit HTML Befehlen verändern.

Das Beispiel mit CSS und HTML formatiert

<form method="post" action="#">
<font size="2"><fieldset style="width: 500; border-color: red; padding: 2"><legend style="font-weight: bold; font-size: 8pt; font-face: Verdana; color: red">Personendaten</legend>
<br>Name: <input type="text" name="name">
<br>Strasse: <input type="text" name="strasse">
<br>PLZ: <input type="text" name="plz">
<br>Ort: <input type="text" name="ort">
</fieldset><br>

<fieldset style="width: 500; border-color: orange; padding: 2"><legend style="font-weight: bold; font-size: 8pt; font-face: Verdana; color: orange">Website</legend>
Titel: <input type="text" name="titel"><br>
URL: <input type="text" name="url"><br>
Beschreibung: <textarea cols="50" rows="8" name="beschreibung"></textarea>
</fieldset><br>

<fieldset style="width: 500; border-color: green; padding: 2">
<legend style="font-weight: bold; font-size: 8pt; font-face: Verdana; color: green">Absenden/ Abbrechen</legend>
<input type="submit" value="Senden">
<input type="reset" value="Abbrechen">
<br>
</fieldset> </font>
</form>


Bookmark setzen... These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Bloglines
  • MisterWong
  • MySpace
  • Reddit
  • SEOigg
  • Technorati
  • TwitThis
  • Y!GG
  • Google Bookmarks

Weiterführende Links: