Add inputset tag for simplifying form creation

It is very common to need to wrap a form element in a div or the like for formatting purposes. It is also necessary to create a lot of id attributes to wire up labels and descriptions etc. I propose an <inputset> tag to leverage the former against the latter.

An <inputset> is a block element that automatically associates labels and the like with its first descendant form element (native or custom).

This

<inputset>
  <label>Label</label>
  <input>
  <datalist>
    <option value=A>
    <option value=B>
  </datalist>
</inputset>

is equivalent to

<style>
  input-set { display: block; }
</style>
<input-set>
  <label for=id1>Label</label>
  <input id=id1 list=id2>
  <datalist id=id2>
    <option value=A>
    <option value=B>
  </datalist>
</input-set>

This reduces the need for coming up with many globally unique ids for adjacent elements.

That can sometimes be achieved in simple cases by wrapping the input element in the label element but that can make certain layouts harder and only handles the case of the label. This would also handle descriptions and possibly errors if taken with my other proposal for extending the label element. I wrote a demo of both together: https://codepen.io/jimmyfrasche/pen/yLoeRQm

It’s easier to read, easier to write, and harder to get wrong.

If the wrapper element is not required it can be set to display: contents without altering the semantics.

So it chains adjacent elements?

Roughly. It’s meant to improve that task by providing a simpler way of doing that, yes. I don’t think it should be limited to adjacent in the strict sense, though. Descendant would probably be preferable to allow extra divs and such for styling and grouping.

Why not using <fieldset> ?

fieldset already exists and does something different so it can’t really be changed to do this or would it make much sense to have some kind of attribute toggle that makes it work in two very different ways with very different effects on its children