mForms - a css form layout library

A library of CSS classes which I hope will take some (if not all) of the pain out of controlling form layout in pure CSS. It uses a modular approach so each form element is independent of it’s neighbouring elements, allowing you to mix and match and still achieve the desired results. I’m still working on additional classes to allow even more flexibility but in the current version should meet most needs. As well as being completely modular it’s also width independent so should work regardless of the available width, it will simply occupy the width of the containing element, alternatively you can just set width for the form element itself.
note - To eradicate the need for extra html markup this system uses label tags that wrap the form elements…
note - While wrapping form fields in labels is a valid technique in the xhtml transition DTD, unfortunately it isn’t valid ‘Strict’ xhtml. I’m happy to say that I’d miss-understood the validation error, The example has been fixed and is now valid strict xhtml.

Use

once the css files has been attached to your document and the class of ‘mForm‘ added to your form tag all you you need to do is add the appropriate class the the element label and mForms should do the rest for you.

Customisation

As well as using the css ‘out of the box’ there are also constants which can be changed to further customise the appearance.

demo

View example of mForm

Download

Download mForm.css

I’ll try and do more work on this, I’m just putting it out there to try and gauge the interest level. If you want me to motivate me to develop this further, incentives are welcomed.

This entry was posted on Wednesday, June 27th, 2007 at 3:09 pm and is filed under CSS, Web design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.