Search notes:

HTML: Draw a border around related form input elements and label them with the fieldset tag

The <fieldset> tag can be used to group input elements that logically belong together and make the visually stand out by drawing a border around them.

Additionally, the group can be given a title with the <legend> tag.

<!doctype html>
<html>
<head>
  <title>fieldset and legend</title>
</head>

<body>

  <form action="#">

    <fieldset>                         <!-- fieldset: draw a border               -->
      <legend>Enter your data</legend> <!-- legend: place a title onto the border -->

      <table summary="data panel">
        <tr><td>Value one: </td><td><input type="text" id='val_01'></td></tr>
        <tr><td>Value two  </td><td><input type="text" id='val_02'></td></tr>
        <tr><td>Value three</td><td><input type="text" id='val_02'></td></tr>

      </table>

    </fieldset>

  </form>

</body>
</html>

Github repository about-html, path: /tags/fieldset-legend.html

The html above is rendered like so:

HTML: Draw a border around related form input elements and label them with the fieldset tag

See also