Elemente Gruppieren

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>

This entry was posted in HTML. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *