title: Correct HTML Semantic for editable items on lists
body: <p>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.</p>
  <p>The basic example that I can give is the following:</p>
  <pre><code>&lt;ul&gt;
   &lt;li&gt;
    &lt;label for=&quot;username&quot;&gt;User name&lt;/label&gt;
    &lt;input id=&quot;username&quot;/&gt;
    &lt;label for=&quot;enabled&quot;&gt;Enabled&lt;/label&gt;
    &lt;input id=&quot;enabled&quot; type=&quot;checkbox&quot; /&gt;
   &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  <p>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.</p>
  <p>Based on my knowledge of semantic HTML or each item is a form:</p>
  <pre><code>&lt;ul&gt;
   &lt;li&gt;
    &lt;form&gt;
     &lt;label for=&quot;username&quot;&gt;User name&lt;/label&gt;
     &lt;input id=&quot;username&quot;/&gt;
     &lt;label for=&quot;enabled&quot;&gt;Enabled&lt;/label&gt;
     &lt;input id=&quot;enabled&quot; type=&quot;checkbox&quot; /&gt;
    &lt;/form&gt;
   &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  <p>Or I would do a single form for the entire list:</p>
  <pre><code>&lt;form&gt;
   &lt;ul&gt;
    &lt;li&gt;
     &lt;label for=&quot;username&quot;&gt;User name&lt;/label&gt;
     &lt;input id=&quot;username&quot;/&gt;
     &lt;label for=&quot;enabled&quot;&gt;Enabled&lt;/label&gt;
     &lt;input id=&quot;enabled&quot; type=&quot;checkbox&quot; /&gt;
    &lt;/li&gt;
   &lt;/ul&gt;
  &lt;/form&gt;
  </code></pre>
  <p>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:</p>
  <p><a href="https://i.stack.imgur.com/M3QM9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/M3QM9.png" alt="Online and share activity sliders on twitch" /></a></p>
  <p>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 <strong>not</strong> find any form nor a div with form role.</p>
  <p>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?</p>
  <p>Because as far I could understand, whenever you need to submit data somewhere, you should have a form for semantically reasons.</p>