Correct HTML Semantic for editable items on lists

Issue

I'm currently facing a situation that I have never faced before. I need to create a list of users, each item of the list is editable and automatically sends data to our backend.

The basic example that I can give is the following:

<ul>
 <li>
  <label for="username">User name</label>
  <input id="username"/>
  <label for="enabled">Enabled</label>
  <input id="enabled" type="checkbox" />
 </li>
</ul>

This is just a simple example, but it is basically the structure, as you can see I have not added any form and that is the question that I have.

Based on my knowledge of semantic HTML or each item is a form:

<ul>
 <li>
  <form>
   <label for="username">User name</label>
   <input id="username"/>
   <label for="enabled">Enabled</label>
   <input id="enabled" type="checkbox" />
  </form>
 </li>
</ul>

Or I would do a single form for the entire list:

<form>
 <ul>
  <li>
   <label for="username">User name</label>
   <input id="username"/>
   <label for="enabled">Enabled</label>
   <input id="enabled" type="checkbox" />
  </li>
 </ul>
</form>

But, my first attempt before coming here to ask, I tried to look on some websites, like youtube, twitch, gmail and even here, on stackoverflow to see how they do it, and I found this on Twitch that made me think if a form is even necessary. If you click on your avatar on twitch, it give you two options:

Inspecting the page I could only find a label and an input for each of those options, but looking at the remaining HTML I could not find any form nor a div with form role.

So I'm thinking, is semantically correct to have input outside of any forms? If so, what are the conditions to have a form or not?

Because as far I could understand, whenever you need to submit data somewhere, you should have a form for semantically reasons.

Solution

Although is a best practice, sometimes yout your input tag doesn't need to be inside a form or a div with form role. On this case you can simply create the elements and handle the inputs through JS. I don't think there's actually a clear rule for whether using form or not. It was most commonly used before along with the type="submit" to pass data easily on the URL, but with AJAX and web frameworks there's no more need for that and the action attribute might actually trick you.

Check out these references:

• MDN article
• This SO answer

One other reason you might not find a form or equivalent role on your HTML inspection is because most (if not all) of these platforms run on top of various javascript frameworks, like React, Angular, etc. and the role is injected through js.

Answered By - Dante