Felder von Formular zusammenfassen

Über die HTML-TAGs <fieldset> und <legend> kann einem Formular Struktur mitgegeben werden. So können alle zusammengehörigen Felder jeweils innerhalb einer Umrahmung platziert werden. Soll nun das Feld Vorname und Nachname in dieser Form platziert werden, kommt um beide Eingabefelder das <fieldset>

Beispiel in Browser dann:

Beispiel in HTML

<form name="testformular" action="" method="get" enctype="text/html">

  <fieldset>
    <p>Vorname:<br />
    <input type="text" name="vorname" value="" size="20" maxlength="50" />
    </p>

    <p>Nachname:<br />
    <input type="text" name="nachname" value="" size="20" maxlength="50" />
    </p>

  </fieldset>

</form>

Beschriftung für Zusammenfassung des Tabellenbereichs

Kommt zusätzlich noch der HTML-TAG <legend> in Spiel, bekommt der Kasten eine Beschreibung im oberen Bereich.

Und als HTML-Code

<form name="testformular" action="" method="get" enctype="text/html">

  <fieldset>
    <legend>Bitte Vor- und Nachnamen eingeben</legend>

    <p>Vorname:<br />
    <input type="text" name="vorname" value="" size="20" maxlength="50" />
    </p>

    <p>Nachname:<br />
    <input type="text" name="nachname" value="" size="20" maxlength="50" />
    </p>

  </fieldset>

</form>

Das Design wird später über CSS gemacht! Der Rahmen in Farbe, Aussehen und Stärke kann fort geändert werden und die Hintergrundfarbe verändert.

Formularfeld-Beschriftung Formulare und untergliedertes Options-Menü

HTML5-Video-Kurs:
hier klicken für
mehr Informationen

weitere eigene Projekte:

Programmiersprachen

Bildbearbeitung & Fotografieren

MS Office Kurs / Ernährung