Sunday, January 9, 2011


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.

Html
<body>
    
    <form id=register>
    <fieldset>
        <legend>Personal Info</legend>
        <ol>
            <li>
                <label for=name>Name</label>
                <input id=name name=name type=text placeholder="First and last name" required autofocus>
            </li>
            <li>
                <label for=email>Email</label>
                <input id=email name=email type=email placeholder="example@domain.com" required>
            </li>
            <li>
                <label for=phone>Phone</label>
                <input id=phone name=phone type=tel placeholder="Eg. +447500000000" required>
            </li>
            <li>
                <fieldset>
                    <legend>Gender</legend>
                    <ol>
                        <li>
                            <input id=male name=Gender type=radio>
                            <label for=male>Male</label>
                        </li>
                        <li>
                            <input id=female name=Gender type=radio>
                            <label for=female>Female</label>
                        </li>
                    
                    </ol>
                </fieldset>
            </li>
        </ol>
    </fieldset>
    <fieldset>
        <legend>Personal Address</legend>
        <ol>
            <li>
                <label for=address>Address</label>
                <textarea id=address name=address rows=5 required></textarea>
            </li>
            <li>
                <label for=postcode>Post code</label>
                <input id=postcode name=postcode type=text required>
            </li>
            <li>
                <label for=country>Country</label>
                <input id=country name=country type=text required>
            </li>
        </ol>
    </fieldset>

    <fieldset>
        <button type=submit>Register</button>
    </fieldset>
</form>
   
    
</body>

It will be like that:

image

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

 

Body Css

html, body, h1, form, fieldset, legend, ol, li {
    margin: 0;
    padding: 0; }

body
{
    background-position: #F0F0F0;
    background: #F0F0F0;
    color: #FFFFFF;
    font-family: Georgia, "Times New Roman" , Times, serif;
    padding: 20px;
}

 

 

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

Form Css
form#register
{
    background-position: #3366FF;
    background: #3366FF;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 20px;
    width: 400px;
    color: #FFFFFF;
}

    form#register fieldset {
        border: none;
        margin-bottom: 10px; }

        form#register fieldset:last-of-type { margin-bottom: 0; }

    form#register legend
{
    color: #000099;
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 10px;
    text-shadow: 0 1px 1px #c0d576;
}

    form#register > fieldset > legend:before {
        content: "step " counter(fieldset) ": ";
        counter-increment: fieldset; }

    form#register fieldset fieldset legend
{
    color: #FFFFFF;
    font-size: 13px;
    font-weight: normal;
    padding-bottom: 0;
}

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.

List and Content Css

    form#register ol li {
        background: #b9cf6a;
        background: rgba(250,250,250,.3);
        border-color: #e3ebc3;
        border-color: rgba(250,250,250,.6);
        border-style: solid;
        border-width: 2px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        line-height: 30px;
        list-style: none;
        padding: 5px 10px;
        margin-bottom: 2px; }

    form#register ol ol li {
        background: none;
        border: none;
        float: left; }

    form#register label {
        float: left;
        font-size: 13px;
        width: 110px; }

    form#register fieldset fieldset label {
        background: none no-repeat left 50%;
        line-height: 20px;
        padding: 0 0 0 30px;
        width: auto; }

    form#register label[for=male] { background-image: url(male.png); }

    form#register label[for=female] { background-image: url(female.png); }



    form#register fieldset fieldset label:hover { cursor: pointer; }

    form#register input:not([type=radio]),
   form#register textarea {
        background: #ffffff;
        border: none;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        -khtml-border-radius: 3px;
        border-radius: 3px;
        font: italic 13px Georgia, "Times New Roman", Times, serif;
        outline: none;
        padding: 5px;
        width: 200px; }

    form#register input:not([type=submit]):focus,
   form#register textarea:focus { background: #eaeaea; }

    form#register input[type=radio] {
        float: left;
        margin-right: 5px; }

    form#register button
{
    background-position: #3399FF;
    background: #3399FF;
    border: none;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
    color: #000000;
    display: block;
    font: 18px Georgia, "Times New Roman" , Times, serif;
    letter-spacing: 1px;
    margin: auto;
    padding: 7px 25px;
    text-shadow: 0 1px 1px #000000;
    text-transform: uppercase;
}

        form#register button:hover
{
    background-position: #3333FF;
    background: #3333FF;
    cursor: pointer;
    color: #FFFFFF;
}

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 :

image

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

Download this ex :

 

 

Eng. Waleed Mohamed
Flair Software House
http://www.twitter.com/Waleed_mohamed
http://blog.waleedmohamed.net 
http://www.facebook.com/waleed.mohamed
http://eg.linkedin.com/in/waleedmohamed


www.flair-systems.com  
http://www.facebook.com/Flair.Systems
http://twitter.com/flair_systems
http://www.linkedin.com/company/flair-systems



2 comments:

web development company said...

Awesome Tutorial!!! All your tips and tricks are rocking. Waiting for your upcoming post.

Asya Khatri said...

Lush work!!!