A CSS boilerplate for creating layers of feedback for your forms
paceaux/Form-Feedback-Boilerplate
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
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 0
No packages published