mForm - modular, table-less css forms

johnathan kendall - vitamink

A css framework for taking some of the pain out of layout forms. no tables, no extra divs, justs labels and elements.

A note of caution this really just proof of concept at the moment... use at your own risk.

Installation

1. Attach modular_forms.css to you document or stylesheet
2. Add class="mForm" to form tag
3. Add appropriate classes to label tags

Notes - Forms should be constructed using label tags 'wrapped' around form feilds. Then apply following classes to labels to implement layouts (see source code for examples)

Styles have been created to allow layout to work regardless of form width. Change configuration on modular_forms.css for different label/field ratio or to fine-tune appearance

.mForm

add class to form tag - prevents css affecting other page elements

.mFtxt

for single line text input

.mFselect

select box

.mFtxtarea

text area element

.mFtxtarea_big

larger text area element

.mFcheck

for checkboxes and radio buttons

.mFbutton

for all buttons (creates visual appearance)

.mFbutton1

button layout 1

.mFsubmit

Form submit button

.mFfile

File upload field

Example form

A sample single line text input box(.mFtxt): A sample single line text input box(.mFtxt_long):

perhaps a name(.mFtxt): another line(.mFtxt): A sample text area:(.mFtxtarea)some text for the user to edit A sample big text area (.mFtxtarea_big):some text for the user to edit

a button with label:(.mFbutton1 and .mFbutton)

this is a lengend which describes the tick box question: answer below:(.mFinlinetick)

tickbox option 1 tickbox option 2 tickbox option 3

this is a lengend which describes the tick box question: answer below:(.mFListtick)

tickbox option 1 tickbox option 2 tickbox option 3

this is a lengend which describes the tick box question: answer below:

tickbox option 1 can be longer than in the previous example. tickbox option 2 can be longer than in the previous example. tickbox option 3 can be longer than in the previous example.

this is a lengend which describes the tick box question: answer below:(.mFListtick2colom)

tickbox option 1 tickbox option 2 tickbox option 3 tickbox option 1 tickbox option 2 tickbox option 3

make your choice The first choice The easiest option this is an option - internet explorer will usually crop this length A sample single line text input box(.mFtxt): perhaps a name(.mFtxt): another line(.mFtxt): another line(.mFfile):

the following submit has the class mFsubmit (and mFbutton1 class for appearance) on the label

submit the form