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?

Let’s analyze the development of a form. A web page form has the function of sending data to the webmaster, (for example a registration or reservation form, or a simple contact form). Before the user-inserted data is sent, there’s typically a validity check; today this validation phase requires the addition of scripts  (PHP, Javascript or another language chosen for development) to the standard HTML markup.

With the new specifications contained in HTML5, it will be much simpler to handle the data sent through a form: no more Javascript or PHP, just a simple HTML5 attribute will define most validity checks for inserted data.

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>

As you can see in the code used, there are a few new things. First of all, the use of the attribute named “required”: this is a Boolean-type attribute that, when specified, indicates that the element is needed. It’s sufficient to add this attribute to an input element to make it required without using javascript or any other elements external to the web page.

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 use one of the new input field types available in HTML5 to give the user a convenient calendar with which to choose the desired date, without the use of any external javascript.

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.

Conclusion

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 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

Master per Web Designer Freelance
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 »
[pdf]Scarica articolo in PDF[/pdf]
Tags: ,

The Author

Nando is administrator of Edi Group, a Sicilian web agency founded in 2005. He deals with the development of web applications in php language and the implementation and administration of databases. And besides Microsoft Trainer with years of experience in regional and private training courses as a designer and lecturer.

Author's web site | Other articles written by

Related Posts

You may be interested in the following articles:

54 comments

  1. Max
  2. Rebecca
  3. Sean
  4. kalifa
  5. Chris
  6. Thatcode
  7. AG
  8. John
  9. Kizi 10

Trackback e pingback

  1. The future of the web: how we'll create forms in HTML5 | Your … | Chrome OS Blog
    [...] Read the original here: The future of the web: how we'll create forms in HTML5 | Your … [...]
  2. Descubrimientos del 5 Marzo 2010 | Blog de unique3w
    [...] Crear formularios de contacto con HTML5. – The future of the web: how we’ll create forms in HTML5 | …
  3. 2010-03-05 유용한 링크 | We are connected
    [...] The future of the web: how we’ll create forms in HTML5 [...]
  4. Rémi Garcia – Blog » Vos formulaires en HTML5
    [...] Voici un article très complet proposé par Your Inspiration Web qui nous donne tout ce que l’on doit savoir …
  5. 彼岸(Into the wild) » Blog Archive » HTML5 Unleashed: Tips, Tricks and Techniques
    [...] The Future of The Web: How We’ll Create Form in HTML5 [...]
  6. 解读 HTML5:建议、技巧和技术 - 幸福收藏夹
    [...] 互 联网的未来:如何创建一个 HTML5 表单 [...]
  7. 给HTML5的建议、HTML5的技巧和技术 | 实时信息(shtion.com)
    [...] 互联网的未来:如何创建一个 HTML5 表单 [...]
  8. 解读 HTML5:建议、技巧和技术 | FEDEV
    [...] 互联网的未来:如何创建一个 HTML5 表单 [...]
  9. 解读 HTML5:建议、技巧和技术 | 田园牧歌
    [...] 互联网的未来:如何创建一个 HTML5 表单 [...]
  10. Soun's Blog » Blog Archive » 解读 HTML5:建议、技巧和技术。
    [...] 互联网的未来:如何创建一个 HTML5 表单 [...]
  11. Test's Blog » 解读 HTML5:建议、技巧和技术。
    [...] 互联网的未来:如何创建一个 HTML5 表单 [...]
  12. HTML5 Unleashed: Tips, Tricks and Techniques « Quadrated
    [...] The Future of The Web: How We’ll Create Form in HTML5 [...]
  13. Anything #2 | TASTELESS
    [...] Wer nun sich denkt WTF was ist eigentlich HTML 5 guckt einfach mal bei W3C nach. Hier dazu eine …
  14. Examples of New HTML5 Features | UserZen
    [...] Link [...]
  15. 解读 HTML5:建议、技巧和技术 | 阿拉斯加中文网
    [...] 互联网的未来:如何创建一个 HTML5 表单 [...]
  16. 目前网上关于Html5方面最全的资料文章 – 王魏博客-关注前端,记录生活,记录互联网
    [...] 互联网的未来:如何创建一个 HTML5 表单 [...]
  17. Html5 Solution
    [...] Link [...]
  18. 解读 HTML5:建议、技巧和技术 | 飞翔代码
    [...] 互联网的未来:如何创建一个 HTML5 表单 [...]
  19. 270+ HTML5 Tutorials and a Round-Up of Round-Ups - WebsitesMadeRight.com
    [...] The future of the web: how we’ll create forms in HTML5 (Your Inspiration Web | Mar 4, 2010) [...]
  20. 解读 HTML5:建议、技巧和技术 | blog.moocss.com
    [...] 互联网的未来:如何创建一个 HTML5 表单 [...]
  21. 解读 HTML5:建议、技巧和技术 - Leebay's Blog
    [...] The Future of The Web: How We’ll Create Form in HTML5 互联网的未来:如何创建一个 HTML... [...]
  22. 解读 HTML5:建议、技巧和技术 | web技能 | 天津网站制作|天津网页设计|天津网站设计|天津网络公司|天津网站设计公司|天津wordpress模板制作|天津flash网站制作|天津圣郡网络
    [...] 互联网的未来:如何创建一个 HTML5 表单 [...]
  23. htm5技术指南 | _梦龙
    [...] 互联网的未来:如何创建一个 HTML5 表单 [...]
  24. Html5从入门到精通 » w'tribe
    [...] 互联网的未来:如何创建一个 HTML5 表单 [...]
  25. TUT: The future of the web: how we’ll create forms in HTML5 | mmc blog
    [...] http://www.yourinspirationweb.com/en/the-future-of-the-web-how-well-create-forms-in-html5/ [...]

Leave a Reply

Current day month ye@r *