Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

<fieldset> #24

Open
raae opened this issue Nov 27, 2023 · 0 comments
Open

<fieldset> #24

raae opened this issue Nov 27, 2023 · 0 comments
Assignees

Comments

@raae
Copy link
Member

raae commented Nov 27, 2023

Long forms? Use fieldset to group it into logical sets of input!

The <fieldset> HTML element is used to group several controls as well as labels (<label>) within a web form.
MDN Docs

My favorite <fieldset> feature is that you may disable all inputs in a <fieldset> with the disabled attribute! You've probably been required to disable all fields in a form at some point and found that the <form> element alone does not allow this. And if not all, at least a subset, and having to add disabled to each input can get annoying: <fieldset> to the rescue.

<form>
  <fieldset disabled>
    <legend>Choose your captain</legend>

    <input type="radio" id="hal" name="captain" value="H" />
    <label for="hal">Hal</label><br />

    <input type="radio" id="lotta" name="captain" value="L" />
    <label for="lotta">Lotta</label><br />
  </fieldset>
</form>

In a longer form, it also makes sense to make use of the <legend> element to appropriately name the set of inputs you've enclosed in the <fieldset>.

Have you made use of <fieldset> before?


And with that, Semantic Advent is on its way. Tell your friends!

@raae raae self-assigned this Nov 27, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: Done
Development

No branches or pull requests

1 participant