Product Overview

Fancy Form Design

Table of Contents

- Here’s a look at the table of contents:

0. Preface
   • 1. Who Should Read This Book?
   • 2. What’s Covered in This Book?
   • 3. The SitePoint Forums
   • 4. This Book’s Web Site
   • 5. The SitePoint Newsletters
   • 6. The SitePoint Podcast
   • 7. Your Feedback
   • 8. Conventions Used in This Book
     • 8.1. Tips, Notes, and Warnings
     • 8.2. Markup Samples
   • 9. Acknowledgements
     • 9.1. Jina Bolton
     • 9.2. Tim Connell
     • 9.3. Derek Featherstone
1. 1. Planning
   • 1. The Elements of Forms
     • 1.1. Basic Elements
       • 1.1.1. Text Fields
       • 1.1.2. Radio Buttons
       • 1.1.3. Checkboxes
       • 1.1.4. Labels
       • 1.1.5. Textareas
       • 1.1.6. Select Menus
       • 1.1.7. File Upload
       • 1.1.8. Fieldsets and Legends
       • 1.1.9. Buttons
     • 1.2. Enhanced Elements
       • 1.2.1. Split Buttons with Menus
       • 1.2.2. Sliders
       • 1.2.3. Toggle Switches
       • 1.2.4. Auto-completion
       • 1.2.5. Date Pickers
       • 1.2.6. Color Pickers
       • 1.2.7. Advanced File Uploaders
       • 1.2.8. Rich Text Editors
       • 1.2.9. Drag and Drop
       • 1.2.10. … And More!
   • 2. Research and Finding Inspiration
     • 2.1. Perform a Competitive Audit
     • 2.2. Use Software as Inspiration
   • 3. Interaction Design
     • 3.1. Defining the Goal
       • 3.1.1. Identify the Users
       • 3.1.2. Identify Use Cases and Scenarios
       • 3.1.3. Understand Platforms and Devices
       • 3.1.4. Define Task Flows
     • 3.2. Paper Prototyping
     • 3.3. Wireframing
     • 3.4. Summary
2. 2. Designing
   • 1. Grid and Typography
     • 1.1. Grid Systems
     • 1.2. Type
   • 2. Color
     • 2.1. Highlighting Calls to Action
     • 2.2. The Message of Color
   • 3. Imagery
     • 3.1. Iconography
     • 3.2. Background Patterns and Textures
   • 4. Summary
3. 3. Structure
   • 1. The Structure of a Form
     • 1.1. Understanding the form Element
     • 1.2. Groups and Labels: fieldset, legend, and label
     • 1.3. Form Fields
     • 1.4. Form Layout
   • 2. Instructions, Errors, and Advisory Text
     • 2.1. Required Fields
   • 3. The Final Markup
   • 4. Conclusion
4. 4. Styling
   • 1. Stuff to Consider
   • 2. Preparing Your Canvas
   • 3. Reset Styles
     • 3.1. The Global Whitespace Reset
     • 3.2. Tantek Çelik’s undohtml.css
     • 3.3. Yahoo UI Library’s Reset CSS
     • 3.4. Eric Meyer’s Reset CSS
   • 4. Fieldsets and Legends
   • 5. Form Questions
     • 5.1. Top-aligned Labels
     • 5.2. Side-by-side Labels
     • 5.3. The Trouble with Widgets
     • 5.4. The Good News is …
     • 5.5. A Little Gradient Goes a Long Way
     • 5.6. Visual Hints with Icons
     • 5.7. Styling the Submit Button
   • 6. Putting It All Together
     • 6.1. The Login Link
     • 6.2. Aligning to the Grid
     • 6.3. The Submit Button
     • 6.4. Prefixed Field
     • 6.5. Birth Date Fieldset
     • 6.6. The Final Touch
     • 6.7. A Straggler: The Privacy Settings Form
     • 6.8. Conclusion
5. 5. Enhancing
   • 1. Fancier Form Widgets
     • 1.1. Select Menu Styling
     • 1.2. Checkbox and radio button styling
     • 1.3. Functional Enhancements
       • 1.3.1. Conditional Question Display
     • 1.4. Date Selectors
     • 1.5. Password Strength Indicators
     • 1.6. Autocomplete
     • 1.7. Input Validation
     • 1.8. Submission with Ajax
   • 2. Back to Our Forms
     • 2.1. Enter jQuery
     • 2.2. Password Strength Indicator
     • 2.3. Input Validation
     • 2.4. Select Menu Styling
     • 2.5. Other Forms
   • 3. Conclusion
6. Index

ebook only