Legend és fieldset elemek

<form id="contact-form" action="script.php" method="post"> 
  <fieldset>
    <legend>Kapcsolat:</legend>
    <ul>
      <li>
        <label for="nev">Név:</label>
        <input type="text" name="nev" id="nev" value="" />
      </li>
      <li>
        <label for="email">Email:</label>
        <input type="text" name="email" id="email" value="" />
      </li>
      <li>
        <label for="megjegyzes">Megjegyzés:</label>
        <textarea name="megjegyzes" id="megjegyzes" cols="25" rows="3"></textarea>
      </li>
      <li>
        <label for="levelezo-lista">Feliratkozik a levelezőlistánkra is?</label>
        <input type="checkbox" checked="checked" id="levelezo-lista" value="Igen, feliratkozom!" />
      </li>
      <li>
        <input type="submit" value="küldés" />
        <input type="reset" value="visszaállítás" />
      </li>
    </ul>
  </fieldset>
</form>

Ha ezt megnyitod a böngészőben, akkor a 3. ábrán látható képet kapod.

A két nagyobb elem, amit most hozzáadtunk az űrlaphoz, az a fieldset és a legend. Egyik elemet sem kötelező használni, de nagyon hasznosnak a komplex űrlapok és prezentációk esetében.

A fieldset elem segítségével szemantikus egységekbe rendezheted az űrlapot. Egy bonyolultabb űrlapon például használhatsz különböző fieldset-eket a címekhez, a számlázási adatokhoz, a felhasználói szokásokhoz, és így tovább. A legend elemmel pedig elnevezheted a különböző fieldset részeket.