Forms are very common on web sites. And as many sites have forms there are many ways to style them. Previously tables were used to separate the form labels from the form fields (input elements in HTML). In the last few years however it has become more accepted to use CSS to style forms.

The following videos show one way to use CSS to style forms. To follow along download this HTML file:

The tutorial shows one way to organize the HTML for the form (there are other, equally valid ways). And then different ways to style this HTML form using CSS.

Part 1: Creating the HTML
Watch on YouTube

Part 2: Styling with CSS
Watch on YouTube

Part 3: Styling Submit and Input:hover/active states
Watch on YouTube

This page has the reference for all of the form elements.

Post a Comment

Your email is never published nor shared. Required fields are marked *


You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>