Video icon 64
Want to be a web designer? Skill up fast with video courses from Tuts+. Start your free trial.
Advertisement

Sign-in or Register: Form Design From Scratch (Day 2)

by

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.

Don't like ads? Subscribe to Webdesigntuts+ screencasts via iTunes!


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.

Don't like ads? Subscribe to Webdesigntuts+ screencasts via iTunes!


Section 6: Styling the Sign In Form

Having styled our basic tab structure, let's now look at the sign in form.

Don't like ads? Subscribe to Webdesigntuts+ screencasts via iTunes!


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.

Don't like ads? Subscribe to Webdesigntuts+ screencasts via iTunes!


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.

Don't like ads? Subscribe to Webdesigntuts+ screencasts via iTunes!


Further Reading and Useful References

Advertisement