Following on from my Photoshop tutorial last week, How to Create a Clean and Stylish Login Form In Photoshop I will walk you through how to code the form up from the initial Photoshop concept into HTML5/CSS3, I will also use the awesomeness that is @font-face to implement the stylish Miso font.

View the Demo

Take a look at the HTML5/CSS3 Form Demo.

The Form

Using HTML5 to build forms allows you to utilize allot more functionality with form inputs, it also allows you to write less code! Two HMTL5 features we will be using will be ‘autofocus’ and ‘required’.

HTML5 Form Attributes

The raw form result:

HTML5 ‘reqiured’ allows you to specify that the field is required and cannot be submitted without a value, it will also allow you to add CSS to the ‘required’ input.  Likewise the ‘autofocus’ attribute specified that the input field should be focused on page load.

Styling The Form

First I will style our input fields, I will use CSS3 to create the rounded corners and the inner shadow.  To create the rounded corners use: -webkit-border-radius, -moz-border-radius, and border-radius  attributes. To create the inner shadow letterpress effect on the inputs I use the box-shadow property but with a minus (-1px) shadow. This brings the shadow form the outside of the input, logically into the inside.

The result look like so:

The labels for the form required I use a font called Miso, to use this font on the web without annoying extra images required me to use the fantastic @font-face property. Using font-face is really simply, you just need an openType font which you can upload to your server.

The result will look like so:

Next I will create the submit button, again using CSS3, the button will use the same border radius properties however I will also add a CSS3 gradient, when the button is hovered the gradient will change subtly to make it more interactive. When the button is clicked, I will also add a CSS3 outer shadow to emphasise the user pressing the button. Take a look below to see the button code.

The result will look like so:

View the Demo and view the code!

Take a look at the HTML5/CSS3 Form Demo