Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Easier form-markup with HTML5

Wednesday, August 28th, 2013 by Servage

The Web is no longer static. Nowadays, we need constant interactions online, which is provided through dynamism. Web forms are an integral part of web applications as well as several types of data driven websites. Creating web forms is a daunting task for an HTML web developer, since they tend to fiddle with style and cross-browser compatibility, particularly when consistency in look and feel is considered. Therefore, most of us try to implement new technologies like JavaScript libraries and various modern frameworks like jQueryUI and YUI to solve the rich functionality problems.

Before HTML 5

Before, HTML 5 we had to place a bunch of JavaScript on the top of our pages, through an additional layer of HTML markups. This becomes frustrating when a particular browser prohibits JavaScript or other additional technologies to display or manipulate  content differently. With the introduction of HTML 5, these problems are covered to an extent. Now, we have simple, but powerful, code to deal with HTML form problems.

With HTML 5

For instance, if we think about the data input in a web application, we can apply input type tags for various purposes, such as:

<input type=”number”>

This will create a text field for number entry with spinner control where you can either select/type the number directly or use increment and decrement control. Similarly, you can show a horizontal slider to select the value between a range using:

<input type=”range”>

If we want to bring some additional functionality, like to display a current value, we can use some JavaScript code along with this HTML 5 code.

Use of a color picker is extensive in many e-commerce web forms with a wide range of products. Therefore:

<input type=”color”>

tag is highly functional, creating a color picker to select a color directly or put hexadecimal values in the field. In the same way we can bring some other functionality, like creating a primitive search field using

<input type=”search”>

Place Holders

Apart from traditional implementation, HTML 5 has a big list of new attributes, some of which are very useful in modern forms. Among them, the placeholder attribute is widely used when a user chooses to leave that as an optional information field. In such cases, we need to implement a placeholder input, which can disappear when a user starts to fill that form. Previously, we used some JavaScript to clear content when users wished to fill it and then place some default value when users left it without their input. Now with:

<input type=”text”_placeholder=”Joe”>

HTML 5 tag is able to accomplish this task.

HTML 5 can also help web developers define some new elements to display and visualize information to the visitors. Among these elements, <progress> and <meter> are high in usage. These elements are both creating a progress bar or a gauge/bar to the users to indicate the percentage of the completion of task or scalar measurement.

Validation

In all forms, a validation process is common. They need client-side and server-side interactions to authorize users or correct the information. This needs reams of JavaScript code or some ready-made validation scripts. In HTML 5, we have simple code to deal with this sensitive issue. One of the controls is:

<input type=”text”_required>

that covers the most common aspect of the forms — that this field is required. This required attribute helps us when placed with “input, select or test area” elements. This way we can display that this field is required, if users manage to avoid it.

As stated before, we can use placeholder text to fill the gap with some default value and now, with type and pattern, we can show some default input texts to indicate that what we actually want in this field; i.e. numbers, e-mail address, an URL or other things. We can use type and pattern tags like:

<input type=”text”_pattern”[a-z]{0*9}”>

Of course, you can create your own custom expressions using this tag.

References & More Reading

New form features in HTML5

HTML5 Form Attributes

 

Easier form-markup with HTML5, 4.5 out of 5 based on 2 ratings
Categories: Guides & Tutorials, Tips & Tricks

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.