There are high chances you have never had to use the
fieldset tag is used to group related inputs and the
legend tag is used to label the group.
You do get a bit of styling when you use the
legend tags, something similar to the example below. This creates some form of a grouping of input fields.
And that's pretty much all you get as far as visuals go, however, there is another use case for these tags. Not all your users benefit much from the looks of your page and some rely on screen readers to surf the web, for those users the structure of your HTML makes a lot of difference.
Screen readers usually scan through HTML tags and their attributes to provide feedback to their users, which means making your site accessible goes beyond the way it looks.
01: <fieldset> 02: <legend>Date of Birth</legend> 03: 04: <label for="DOB-Day">Day</label> 05: <input id="DOB-Month" type="number" min="1" max="31" placeholder="Day"> 06: 07: <label for="DOB-Month-Year-Combo">Month-Year Combo</label> 08: <input id="DOB-Month-Year-Combo" type="month" placeholder="Month"> 09: </fieldset>
With the above example without the
legend tag, the screen reader will only point out the two requested fields namely
Month-Year-Combo without knowing which date is being referred to. Is it the date when they last visited the clinic or when they last went on holiday?
legend tag in place, the reader or listener in this case can tell they are being prompted for their Date of Birth.
Applying further CSS styling
Another good use of these tags is to apply common styling across all grouped fields. By creating CSS stylings that target the
fieldset and or
legend tag you can apply universal styling.
This grouping tag not only helps you improve the visual organization of your page but also offers improved page usage to your non-visual users as well.
Here is another article you might like 😊 "Why Proof Of Work?"