Having completed our form design in Photoshop, we’re now going to turn our attention to the nuts and bolts of the process. Let’s slice up the PSD, sort out some markup, style the whole lot, add some jQuery flourishes, then finish off with some inline form validation.
There’s a lot to do, so let’s get started!
Section 4: The HTML Markup
Let’s continue our forms by laying out the HTML markup based on our design.
Section 5: Slicing up the PSD
It’s now time to turn our attention to the PSD again. We’re going to slice up the visual elements we need, then begin some styling in the CSS.
Section 6: Styling the Sign In Form
Having styled our basic tab structure, let’s now look at the sign in form.
Section 7: Styling the Sign Up Form
We’re now going to treat our sign up form in a similar way. Let’s also add some jQuery magic to the tab layout.
Section 8: Inline Validation
Having completed the build of our forms, let’s now concentrate on the functionality. We’re going to apply some nifty inline validation, and polish up the final touches.
Further Reading and Useful References
- Smashing Magazine Web form design patterns
- Webdesigntuts+ An Introduction to Color Theory for Web Designers
- Six Revisions A Look into Color Theory in Web Design
- dezinerfolio.com30 Free Vector Icons
- Nettuts+ Build a Neat HTML5 Powered Contact Form
- Dive Into HTML5 A Form of Madness
- A List Apart Forward Thinking Form Validation
- Nettuts+ 8 Regular Expressions You Should Know
- HTML5 Input Patterns
- CSS Tricks Force Element To Self-Clear its Children
- Code Style Font stack builder
- FamFamFam Silk Icons