In HTML5 there are a few more features which allow you to do some cool things with forms such as validation without writing any Javascript which makes it easier for all people who don't know how to write Javascript. In this article you will learn how to use some of the new HTML5 features in a real world situation. We will learn how to create a form using many of the HTML5 form effects.
HTML5 Form Demo
This is what we will be creating with this tutorial, there are 3 fieldset which separate up the display of the form.
Make sure you try submitting the form without any values in the textboxes to test the validation used just from HTML5.
Before we start it's good to note that this form was made with NO Javascript at all and is just HTML5 and a few CSS3 effects.
The Form HTML
First we start off by writing the HTML for the form. We are going to make this form with a few basic fields which are common in many forms, there will be a section for personal details and a section for your address. For the personal details we are going to need to get First name, Surname and date of birth.
<fieldset>
<legend>Personal Details</legend>
<p><label for=name>First name</label> <input id=name name=name type=text placeholder=First name autofocus required/></p>
<p><label for=surname>Surname</label> <input id=surname name=surname type=text placeholder=Surname required/></p>
<p><label for=dob>Date Of Birth</label> <input id=dob name=dob type=date required/></p>
</fieldset>
We are using fieldsets to separate the form up. Fieldsets have a child node of legend which will add a title to the top of the fields. The inputs in the form have a label, input partnership. Each of the labels will have a for attribute, these relate to ID of the input boxes. Having a for attribute allows the visitor to click on the label and the partnered input will become on focus. Each of the inputs have the following attributes of id, name, type and placeholder. The first input has two extra attributes autofocus and required. Autofocus can be used by only one input type, it means that on page load this input will become on focus. Required attribute is the HTML5 validation attribute, we are saying that this field has to be not empty to submit the form. All of the other inputs have the required attribute.
The last input type has been set to date, so if your browser supports it you will see a date picker when you click on the input area. Next is the address section of the form.
<fieldset>
<legend>Address Details</legend>
<p><label for=telephone>Telephone</label> <input id=telephone name=telephone placeholder="xxxxx xxxxxx" type=tel required/></p>
<p><label for=email>Email Address</label> <input id=email name=email placeholder=yourname@yourdomain.com type=email required/></p>
<p><label>Address</label> <textarea id=address name=address required></textarea></p>
<p><label for=postcode>Postcode</label> <input id=postcode name=postcode type=text placeholder=xxxx xxx required/></p>
</fieldset>
The above shows the HTML for the address section, again all of the inputs have a label input partnership. The first input is going to be for the telephone number so we will use the type=tel so this will have to be in a telephone number format. Next we have the email address field there is a type for email addresses, this means that on submit the HTML5 validation will check that this is a valid email address. After this we have the Address textarea and the postcode textbox which are going to be a required field.
<fieldset>
<label></label>
<button type=submit>Submit Order</button>
</fieldset>
Now the form is finished we put in the submit button to send the form to the action attribute. ### CSS Styling
As we separated the form by using fieldsets we can style each section of the form by applying a style to the **fieldset ** tag.
/*Fieldset*/
fieldset{
background: rgb(238,238,238); /* Old browsers */
background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(238,238,238,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(238,238,238,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
margin:10px 0;
}
legend{
font-size:15px;
font-weight:bold;
border:1px solid #a1a1a1;
padding:10px;
background:#ffffff;
}
/*End Fieldset*/
We want all the inputs to line up together or the inputs will be in different places. This is done by setting a width on the labels.
/*Input label*/
label{
width:150px;
display: inline-block;
}
/*End input label*/
We are going to do the inputs last as we are going to add some CSS animation to expand the input area when you click in the input area. Now we need to style the submit button. All we are going to do is change the on hover background colour and the mouse cursor to show you can click on the button.
/*Submit Button Styles*/
button{
padding:6px;
font-weight:bold;
}
button:hover{
background:#eee;
cursor:pointer;
}
/*End Submit Button*/
Now we can setup the CSS animation when you click on the input buttons, for this we use the :focus selector. On the focus event we are going to increase the width of the input boxes.
/*Input types*/
input:focus{
border: 2px solid #29b8e5;
width:300px;
-webkit-transition: width 300ms linear;
-moz-transition: width 300ms linear;
-o-transition: width 300ms linear;
transition: width 300ms linear;
}
textarea:focus{
border: 2px solid #29b8e5;
height:80px;
-webkit-transition: height 300ms linear;
-moz-transition: height 300ms linear;
-o-transition: height 300ms linear;
transition: height 300ms linear;
}
/*End Input Types*/
Try out the form validation, make sure that some of the fields are empty and click on the submit button to see the form validation.