Formwin - form styles for IE8+

Welcome to Formwin! For now this is just a copy of the Demo Page.

The following form elements showcase Formwon form elements ;)
Dashed lines around form elements are intentionally there (set in demo.css) to show you the actual form element boundaries including labels.

textarea without label and and with placeholder-attribute:

textarea with label above, some text contained, inline css to set size:

Textarea Label (above)

long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text long textarea text

textarea with label to the right and in 'positive' state:

Textarea Label (right)

textarea with label below and in 'negative' state:

Textarea Label (below)

disabled textarea with label to the left:

Textarea Label (left)

input[type=text] without label and and with placeholder-attribute:

input[type=text] with label above and some text contained:

Input Label (above)

input[type=text] with label to the right and in 'positive' state:

Input Label (right)

input[type=text] with label below and in 'negative' state:

Input Label (below)

disabled input[type=text] with label to the left:

Input Label (left)

input[type=password] without label and and with placeholder-attribute:

disabled input[type=password] with label above and some text contained:

Input Label (above)

input[type=password] positive with label to the left and some text contained:

Password Label (left)

input[type=password] negative with label to the left and some text contained:

Password Label (left)

select without label and nothing selected:

select with label above and moar text in options, 2nd option selected:

Select Label (above)

select with label to the right, pre-filled value ("One"):

Select Label (right)

1

select with label below:

Select Label (below)

disabled select with label to the left:

Select Label (left)

checkbox without label:

checkbox with label above, checked:

Checkbox Label (above, checked)

checkbox with label to the right:

Checkbox Label (right)

disabled checkbox with label below:

Checkbox Label (below, disabled)

disabled and checked checkbox with label to the left:

Checkbox Label (left, disabled, checked)

radios without labels and nothing selected:

radios with labels above, 2nd one selected:

Radio Label (above)

Radio Label (above and checked)

Radio Label (above)

radios with labels to the right, line breaks added:

Radio Label (right)

Radio Label (right)

Radio Label (right)

radios with labels below, 2nd one disabled:

Radio Label (below)

Radio Label (below and disabled)

Radio Label (below)

radios with labels to the left, all disabled, 3rd one selected, line breaks added:

Radio Label (left, disabled)

Radio Label (left, disabled)

Radio Label (left, disabled, checked)

by Rocco, PavingWays