The future of the web: how we’ll create forms in HTML5
Lately a lot of people are talking about HTML5 and CSS3: currently the specifications being worked on by W3C are still in draft form but in the near future they’re destined to completely revolutionize the way in which we’re used to seeing the web, or rather, the way in which we’re used to building the web.
Currently, we’re often stuck adding scripts to our HTML markup in order to attain determined results; these scripts obviously require extra work, notably increasing the amount of time needed to finish a project.
Today we’ll look at how HTML5 will enable us to notably simplify our work.
How can HTML5 help us save precious time?
How to create a reservation form using HTML5
Here’s a practical example so we can take a detailed look at the new changes and how to implement the new form attributes available in HTML5.
Note: to visualize the HTML5 examples in this article it is necessary to use the browser Opera, version 10.
In this example, our client is a Professional Education association that has asked us to create a course reservation form to integrate into their website, so future course participants can make a reservation directly online.
What stays the same in form creation?
The first thing that the client requests is that the user can choose from the available courses. To do this, we can simply use a standard element and create a form with a radio input field (input type=”radio”).
<form name="reservation" method="post" action="?"> <fieldset> <legend>Select the type of course you'd like to attend</legend> <p><label> <input type="radio" name="coursetype"> HTML5</label></p> <p><label> <input type="radio" name="coursetype"> CSS3</label></p> <p><label> <input type="radio" name="coursetype"> jQuery</label></p> </fieldset> <p class="center"> <input type="reset" value="Clear form"> <input type="submit" value="Submit Reservation"> </p> </form>
So far there’s nothing new, we’ve created a form using the element “form” and we’ve added a radio type field to give the user the possibility to choose one of the available courses.
Take a look at the example we’ve created (remember to use the latest version of Opera).
How to indicate required fields using HTML5
The client mentions that the reservation form must also contain fields for the personal data of the course attendee making the reservation; these fields (First and Last Name, Telephone and e-mail) are all required, as they are necessary for contacting the user.
Let’s look at how to write the markup using the new HTML5 specifications in order to satisfy our client’s request.
<fieldset> <legend> Course Attendee Information </legend> <p><label>First and Last Name: <input type="text" name="name" required></label></p> <p><label>Telephone: <input type="tel" name="telephone" required></label></p> <p><label>E-mail: <input type="email" name="email" required></label></p> </fieldset>
In this second example, if you try to submit the form without having completed the “required” fields, you’ll see how HTML5 notifies you of the error.
I remind you to visualize the example with the browser Opera.
And if you’d like to indicate that a form field must contain an e-mail address?
If it’s necessary to verify that the information inserted in a specific field contains a valid e-mail address, it’s currently necessary to use a script external to the standard HTML markup.
Another new feature of HTML5 is the addition of new input fields that serve to define, in a more detailed manner, the values that fields must contain.
Analyzing the code of our second example, you’ll have noticed that we used an input field with the value “email” assigned to the attribute “type”.
... <p><label>E-mail: <input type="email" name="email" required></label></p> ...
In HTML4, we indistinctly assign the value “text” to the attribute “type” whether the field contains standard text (for example a first or last name) or an e-mail address. With HTML5, things are much simpler: we’ll be able to clearly indicate that the value a user must insert in a specific field, assigned with the attribute “type” and value “email”, must be in the format of a valid e-mail address.
Once again, try to submit the form in our second example, inserting in the e-mail field a non-valid e-mail address format; look at how HTML5 checks the validity and notifies you immediately of the error.
What other input fields will be available in HTML5?
In addition to the type “email” we’ve just looked at, HTML5 will introduce other new types of input fields that we’ll be able to use in form creation. Let’s look at some of them:
- tel - to indicate a telephone number;
- url – to indicate a website URL;
- datetime – to select the date and time using a convenient calendar;
- number – to indicate a numeric value;
- range – to indicate a numeric value (within a predefined range) using a slider;
For a complete list of all values it will be possible to assign to the attribute “type” with HTML5, I suggest you consult the specifications (still in draft form) compiled by W3C.
Choosing a date
Returning to our example, our client requested that we add another field that allows the user to choose the day, month, and year in which they’d like to attend the course.
We’ll add the following lines of code to our reservation form:
<fieldset> <legend> Select the date in which you'd like to attend the course </legend> <p><label>Date: <input type="date" name="course-date"></label> </fieldset>
Now try to choose a date in the third example that we’ve created. You’ll have noticed how everything becomes simpler and quicker for a developer.
Final tidbits before concluding
There’s still a lot more to say about the new characteristics of HTML5 for form creation, but I don’t want this article to get long or boring; maybe in a while I’ll dedicate additional attention to the matter, but before I conclude this article I’d like to show you some other tidbits.
The placeholder attribute
Using the new attribute “placeholder” we can assign a default value to an input field (for example a suggestion) which will be eliminated as soon as the user clicks inside the field to insert their data.
... <p><label>E-mail: <input type="email" name="email" placeholder="insert a valid e-mail address" required></label></p> ...
Look at this example using Safari or the latest version of Chrome, as they’re the only two browsers that currently support the “placeholder” attribute and try clicking in the e-mail field.
The autofocus attribute
Using the attribute “autofocus” assigned to an input field it’s possible to shift the focus to a determined form field as soon as the page loads.
... <p><label>First and Last Name: <input type="text" name="name" autofocus required></label></p> ...
In this final example I added autofocus to the field “First and Last Name”. Take a look at the result: immediately after the page loads the focus shifts to the field we’ve chosen.
This attribute is already supported by Safari, Chrome and Opera.
Today we’ve had a chance to look at how the new elements offered in HTML5 are destined to, in the near future, make the development of our projects simpler and faster.
It should be said that at the present, there are only a few browsers that support these new elements, but one very important thing is that all the new specifications we’ve looked at are retro-compatible, the browsers that don’t yet support them will simply ignore the new functions and will behave exactly as they do today with HTML4.
So now I’d like to hear your opinions on the matter: do you think it’s premature to implement some of these new elements, or can we already go ahead and hazard some experiments on a new project?
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »