A CSS boilerplate for creating layers of feedback for your forms
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README
form_feedback_boilerplate_demo_v1.0.html
form_feedback_boilerplate_v1.0.css
form_feedback_boilerplate_v1.1.css

README

Author:       Frank M. Taylor. 
HTML Notes:   This form feedback boiler plate assumes that the label appears after the input field. This allows us to use the ~ sibling selector with the fields' dynamic pseudo classes to bold a label when the user is typing. 
References:   My blog post: http://blog.frankmtaylor.com/2011/12/04/layering-the-feedback-with-css/; http://blog.frankmtaylor.com/2011/12/13/a-css-form-feedback-boilerplate/;
Usage:        This uses object-oriented CSS. Shape and position elements as you see fit. I've broken everything up into four distinct layers, and provided comments which capture each layer. To style the label for Radio buttons, I used an attribute selector for the "for" value of the label. Whatever you name your radio buttons (and their subsequent label), you need to change this line in the CSS. Layer four is when the user is in the last form field before the submit button. The non CSS3 selection means you know what the last form-field is… in this case it's textarea. You'll need to adjust that. The CSS3 method won't require that at all. 

Changes:
Version1.1:
	Added normalize.css so the form behaves properly in all browsers. 
	Added fieldsets to the HTML and wrapped the checkboxes and radios in the fieldsets
	Added CSS for the fieldset legends
known issues and TODOs: 
	when the user is focused on inputs in fieldsets, the legend doesn't go to the third state
	add labels to the inputs inside of fieldsets