Waleed Mohamed

In this tutorial I’m going to create a Great HTML5 form using latest css3 techniques.

I'm going to create a simple registration form contains :

• Personal Info.
• Addressing Info 

Also going to use some of HTML5’s new input types and attributes:

• email, for the email field
• tel, for the telephone field
• number, for the credit card number and security code
• required, for required fields
• placeholder, for the hints within some of the fields
• autofocus, to put focus on the first input field when the page loads

1- Create unstyle Html From:

I grouped each section within fieldset also the Gender sub-section into a fieldset , inside each filedset i used order list to contain the lable/input pair.

It will be like that:

2- Style the body Element and Resetting some Css attributes :

3- Style the form , fieldset , legends Elements :

• a) I removed the border from the fieldset and apply some bottom margin to it. Using the :last-of-type pseudo-class, removed the bottom margin of the last fieldset.
• b) Make the legends big and bold, and we will also apply a light-green text-shadow
• c) Adding a clear indication of how many steps our form has? Instead of adding that manually to every legend, we can use automatically generated counters.using  either the :before or :after pseudo-elements to add content via CSS.
• d) Change the style of the legend that is part of the radio buttons group, to make it look like a label:
  

Note: Creating Counter steps:

• create a counter using the counter-reset property on the form element
• call the counter with the content property (using the same name we’ve created before)
• with the counter-incremet property, indicate that for each element that matches our selector, that counter will be increased by 1

3- Styling the List and content :

• a) Adding some nice rounded corners and semi-transparent border and background. Because we are using RGBa colors, we should provide a fallback for browsers that don’t support them (that comes before the RBGa color). For the nested lists, we will remove these properties because they would be overlapping:
• b)  We will float labels to the left and give them a width.
• c) Add an extra user-friendly detail, we’ll add a cursor: pointer to the radio button labels on the :hover state, so the user knows that he can simply click them to select that option.
• Now onto the input elements. Here we want to match all inputs, except for the radio ones, and the textarea. For that we will use the negation pseudo-class (:not()). With it we can target all input elements except for the ones with type of radio.
• We will also make sure to add some :focus styles and add the appropriate styling for the radio inputs.
• Finally we come to our submit button. To it, we will just add some nice typography and text-shadow, align it to the center of the form and give it some background colors for its different states.

I got the male and female img form Icon Finder

http://www.iconfinder.com/icondetails/36041/32/female_gender_icon 

http://www.iconfinder.com/icondetails/36181/32/gender_male_icon

Here’s what we created :

Ref. “New input types and form attributes on HTML5  what’s new on the W3C website.”

Download this ex :

image (1)

Window width: 800px      Window height: 600px

Viewport width: 784px   Viewport height: 375px

image (2)

Window width: 1296px    Window height: 786px

Viewport width: 1280px    Viewport height: 561px

You can enable background scaling by adding the following declarations to your style sheet:

look to get show like the inner image you have to use these three lines to set the shadow and to avoid the cross browsing problems.