Űrlapok - Űrlap strukturálása. A <fieldset> és a <legend> tagok

Egy hosszabb űrlapot érdemes logikai egységenként részekre bontani, mert úgy a felhasználók jobban átlátják az űrlap szerkezetét. Ilyen űrlapmezők definiálására szolgál a <fieldset> tag. A </fieldset> zárótag használata is kötelező.

Gyakrabban használt stílus tulajdonságok:

Margó (margin)
Háttérszín (background-color)
Keret tulajdonságai (border-style, border-width, border-color)

Az űrlapmezőnek címet is lehet adni, ami a <legend> és </legend> tagok közötti tartalom. A zárótag használata is kötelező.

A <legend> tag stílusát úgy szokták beállítani, hogy az is segítse az űrlap áttekinthetőségét. Ez többnyire az alábbi tulajdonságok definiálásával elérhető:

Betűszín (color)
Betűméret (font-size)
Betű vastagság (font-weight)
Betű típus (font-family)

Az alábbi példa egy olyan űrlap HTML kódját mutatja, amelynek az elemeit két csoportba soroltam a <fieldset> tagok alkalmazásával.

<form method="get" action="answer2.php">

   <fieldset>
      <legend>Személyes adatok</legend>

      Név: <input type="text" name="username" size="35"
         maxlength="50"><br>
      E-mail cím: <input type="text" name="email" size="35"
         maxlength="50"><br>
   </fieldset>

   <fieldset>
      <legend>Nyelvtudás, iskolai végzettség</legend>

      Nyelvtudás:<br>
      <input type="checkbox" name="lang1" value="hu"
         checked>magyar<br>
      <input type="checkbox" name="lang2" value="en">
         angol<br>
      <input type="checkbox" name="lang3" value="de">
         német<br>
      <input type="checkbox" name="lang4" value="other">
         egyéb<br>

      Legmagasabb iskolai végzettség:<br>
      <input type="radio" name="edu" value="elementary">
         alapfokú<br>
      <input type="radio" name="edu" value="secondary"
         checked>középfokú<br>
      <input type="radio" name="edu" value="higher">          felsőfokú<br>
   </fieldset>

   <input type="submit" value="Küldés">

</form>

A hozzá tartozó CSS deklarációk

input {margin: 5px}
form {text-align: left; border-style: solid;
      border-width: 2px; border-color: #0000ff;
      padding: 3px; margin: 3px}
fieldset {margin-top: 10px; margin-bottom: 10px;
      background-color: #ddffff; border-style: solid;
      border-width: 1px; border-color: #0000ff}
legend {color: #0000ff; font-size: 12pt;
      font-weight: bold; font-family: Helvetica}

Ami ilyen megjelenést biztosít: