0

I wonder about semantics of <form> tag.

Few inputs

In my React application I have some checkbox inputs that filter the displayed data:

<input type="checkbox" name="filter-a" />
<input type="checkbox" name="filter-b" />
<input type="checkbox" name="filter-c" />

It's done:

  • Without a submit button - filtering logic is triggered on toggling each checkbox
  • No request to the server is made - the whole filtering logic is done in the browser's JavaScript

Question

Is it recommended/valid to wrap those inputs in a <form> element?

<form>
  <input type="checkbox" name="filter-a" />
  <input type="checkbox" name="filter-b" />
  <input type="checkbox" name="filter-c" />
</form>

I'm not asking about the functionality (it works without it), but about the semantics.

Doubts

I have my doubts, because this form does not make any submission nor makes any request. MDN documentation on <form> says:

The HTML element represents a document section containing interactive controls for submitting information.

I can still see how I can treat firing form logic on each checkbox toggle as submission. I just wonder what the official semantics and guidelines are.

Robert Kusznier
  • 6,471
  • 9
  • 50
  • 71
  • If you do not need the semantic markup the form gives, and do not need the HTML5 validation a submit will trigger then I would say no, you do not need a form tag – mplungjan Aug 10 '23 at 08:00
  • @mplungjan What do you mean by "semantic markup the form gives"? – Robert Kusznier Aug 10 '23 at 08:04
  • Screen readers might interpret the checkboxes differently if they are wrapped in a form tag, ditto tabbing might be influenced – mplungjan Aug 10 '23 at 08:10
  • @mplungjan do you have experience of that happening, or is that speculation? – Sean Aug 10 '23 at 08:11
  • Speculation. Which this question sort of begs – mplungjan Aug 10 '23 at 08:12
  • @mplungjan What do you think is wrong with this question? I ask because I'd really like to know how to ask this question in a proper way. I want to write semantic and accessible markup and couldn't find clear information on this anywhere. – Robert Kusznier Aug 10 '23 at 08:16
  • @mplungjan It's important to be clear on that. In my experience screen readers interpret and tab to interactive elements the same way regardless of if they're in a form or not. – Sean Aug 10 '23 at 08:16
  • I would expect someone to vote to close this question as "asks for opinions" but I understand where you come from. I would personally not bother with the form tag unless a test with a screen reader showed me it mattered – mplungjan Aug 10 '23 at 08:23

0 Answers0