âlabel and inputs cannot be desendants of an elementâ.
Thatâs simply because, in HTML4, those inline elements may not be direct descendants (they can be descendants/grand children, but not direct ones) of a form.
Wrapping anything block-y around them will fix that error message. As XHTMLcoder said, fieldset works.
<form method=âgetâ action=ââ>
<fieldset>
<legend>According to HTML4, should be first child of a fieldset, but this was dropped in XHTML and HTML5</legend>
<label for=âfooâ>Foo: </label>
<input id=âfooâ name=âfooâ>
<label for=âbarâ>Bar: </label>
<input id=âbarâ name=âbarâ>
<input type=âsubmitâ value=âBaz!â>
</fieldset>
</form>
Thatâs perfectly legal, but what I usually want as CSS hooks is something that can make the label-input pair a unit.
<div>
<label for=âfooâ>Foo: </label>
<input id=âfooâ name=âfooâ>
</div>
<div>
<label for=âbarâ>Bar: </label>
<input id=âbarâ name=âbarâ>
</div>
Even when the design from the designer doesnât require this, I know if I have it I can adjust the style later if needed.
Though with a DL you can easily do top-bottom and side-by-side (with the ability to use vertical-align which is really nice if your dt label wraps and you need the dd input to align with the bottom of the label, the natural eyetracking path), but since with a div-or-whatever unit I can pretty much to the same by manipulating the label into block or inline-block or even float elements.
We make some of our forms using WTForms and the previous developer used lists (just ulâs), which is nasty because generated forms are usually stupid and for example, I had to write some silly logic in our templates to ensure that radios and checkboxes followed the usual order of input-first. Generated forms are supposed to save the developer time, but I think they still suck