Search code examples
htmldomtags

there is a correct way to put a "title" for a fieldset inside a form?


Im new in this world of html, and my question is, if I have a form like this

<form action="" method="post">
            <fieldset id="f1">

            </fieldset>

            <fieldset id="f2">

            </fieldset>

            <fieldset id="f3">

            </fieldset>

</form>

and I want something like this

<form action="" method="post">
            **TITLE HERE FOR ID F1**
            <fieldset id="f1">

            </fieldset>
            **TITLE HERE FOR ID F2**
            <fieldset id="f2">

            </fieldset>
            **TITLE HERE FOR ID F2**
            <fieldset id="f3">

            </fieldset>

</form>

I know that there is a lot of ways to do it, but there exists a "correct way" to do it?


Solution

  • There is an HTML legend tag just for that (and a few other use cases too). Here is how to use it:

    <fieldset>
      <legend>My title</legend>
      
      <input> <br>
      <input> <br> 
      <input> <br>
    
    
    </fieldset>

    Advantages:

    • better for accessibility for example screen readers
    • looks better because the fieldset's line breaks to allow the title to be emphasised.