Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
  1. Web Design
  2. Site Elements

or Register: Form Design From Scratch (Day 2)


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

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.