Skip to content

paceaux/Form-Feedback-Boilerplate

Repository files navigation

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

About

A CSS boilerplate for creating layers of feedback for your forms

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published