4 ms·
I do not see any disadvantages to nesting inputs inside labels - and it's actually quite semantic and maintainable (in part because inputs no longer need auto-g
by mmatants 13y ago
I do not see any disadvantages to nesting inputs inside labels - and it's actually quite semantic and maintainable (in part because inputs no longer need auto-generated IDs). This approach has been part of the HTML standard pretty much always, as well.
It doesn't matter much if forms are generated using a builder like Formtastic, etc. But even then less custom CSS classes is usually better. This way I have been able to write CSS for fairly complex forms using just standard tag selectors, with just one class on the root form container to separate multiple form styles.
- tracker1 13y agoWhen you put a label with text and the input inside, how would you get the text to take up 150px and the input to be to the right of that consistently across a large form? Such as here: https://www.roadreadycertified.com/order/begin/ https://www.roadreadycertified.com/order/begin/ Note: It's just an example, not promoting the site.
- mmatants 13y agoIt's possible to do by adding a padding-right as well as position:relative on the label, and then position:absolute on the input to place it over the padded area. Not the easiest CSS to write, but I strongly prefer clean markup (at a cost of hackish CSS) to hackish markup.
- tracker1 13y agoI don't really consider that cleaner markup... Now you have a single element containing a text now and another element that can not be transverse independently... As opposed to an e extra tag. You could do the label with a span and the input y though, and then mark your CSS that way as a convention... But then you aren't using a bad framework meant to have broader interoperability in mind.