Freeola Internet Get Dotted Domains Blog Guides Chat
Using HTML5 in Web Forms
Grab a half-price .COM domain for 1 year! That's the world's most popular domain for just £4.75.
Freeola Guides

Making Web Forms more useful with HTML5

By on 14th July, 2016 | 1 Comment(s) | 2 out of 2 people found this article useful.
 Making HTML Web Forms more useful with HTML 5

 

HTML has been around for a long time, and for a long time it has stayed the same. That is either a good thing or a bad thing, depending on whom you ask.

 

Some might say it’s good to remain the same, because it will always work, while others will say staying the same will hold back progress.

 

Whichever side you may sway towards, HTML is changing, with the push towards HTML 5, which aims to cater to both points of view.

 
HTML 5

 

HTML 5 was a concept put together a few years ago, with the aim of updating HTML to become more compatible and usable with newer media and technologies, while retaining its simple mark-up structure, readability and compatibility with older technology.

 

Fast forward a few years, and HTML 5 is a big thing in the world of the web, and browser vendors, including Microsoft, are implementing many aspects of the developing specification.

 

One such aspect of HTML 5 is an update to web forms, which will be the focus of this small and simple article, and as such, this article assumes a basic grasp of HTML and HTML forms.

 

HTML 5 Web Forms

 

Web forms today offer users an opportunity to interact with any site, either to log in, send a comment, place and order or push out a tweet.

 

The basic HTML Web Form allows people to input data and send it – anything else usually has to be programmed in, either on the client-side (such as using JavaScript in the web browser) or server-side (such as using PHP on your web sites hosting server).

 

With HTML 5 Web Forms, some of this work can finally be passed on to the web browser, without the need to know how to program JavaScript or PHP.

 

Built-in Web Form Validation

 

One of the main features of HTML 5 Web Forms is being able to validate some of the information you’re asking from the user, or at the very least ensuring they enter something in to a text box, rather than submitting a blank form.

 

No <script>ing necessary

 

Because these new features are part of HTML 5, the web browser is already prepared to handle some of the validation form for you. You don’t need to do any JavaScript coding of your own, you simply follow the HTML 5 spec and include the necessary HTML 5 Web Form attributes.

 

Backward compatible with older web browsers

 

As mentioned above, one of the aims of HTML 5 was its ability to remain compatible, and HTML 5 Web Forms honour that desire very well.

 

By default, a web browser will treat an HTML web form element as a “text input” element, unless it is told otherwise. This is a key aspect of how HTML 5 web forms are built, because they create new web form types that take over the “text input” field in a supporting browser.

 

If a web browser does not support a particular HTML 5 Web Form type, it will fallback to be a standard text element, which the user will be able to use easily.

 

Browser updates are rapidly increasing

 

The days of Internet Explorer 6 are gone, and with it, the days of no browser updates.

 

Google Chrome and Mozilla Firefox release new versions of their browser almost monthly, and Opera and Safari are fairly regular with their updates as well. While Internet Explorer still has around 2 years between major releases, these releases contain massive amounts of updates.

 

Not widespread just yet

 

HTML 5 Web Forms are not fully supported by the majority of released web browsers at the moment, but that won’t take long to change, as browser vendors have committed to making HTML 5 a success.

 

By starting to use HTML Web Forms now, you can get an idea of what you can expect from them, and make a decision as to whether or not to use them when they become part of the HTML 5 specification.

 

That being said, it might not be for you. If you’ve already got a full JavaScript validation thing going, then it might be a little trickier to start using HTML 5 Web Form validation.

 

If however, you’ve got no JavaScript validation on y our web form, starting to use HTML 5 can make the experience a lot more user friendly, for your users and for you, because a simple tweak here and there can have your users sending a more valid and useful web form to you, especially if you’re making use of a Form to Mail script.

 

Jumping right in

 

As mentioned above, this article assumes basic knowledge of HTML, so hopefully, you’ll recognise the following HTML:

 

<input type="text" name="name">

 

The HTML above adds an input field to your page, and the key aspect is the “type” attribute. This is the attribute that gets changed to alter the way a web form element will behave, but if the new web form type isn’t supported, the element will just stay as a text element.

 

Placeholder Text

 

You’ve probably seen plenty of forms with filled in text already, such as the word “Search here” or “type your name or keyword here...”, which is usually used as a hint to the user as to what information the field is expecting.

 

This is usually done by setting the “value” attribute of the form field, and then using JavaScript to remove that value once the user selects the element.

 

HTML 5 Web Forms offer the dedicated attribute “placeholder” to take care of this, and allows you to add the “placeholder” text to the element, having it automatically disappear once the element is selected, and only re-appear if the element is left blank.

 

The text is usually different in presentation style from how regular text would look when typed in to the text field, highlighting that it’s something to notice.

 

You can add a “placeholder” to any text-like form field by including the “placeholder” attribute inside the <input> element and assigning it a value of text that you’d like to appear, for example:

 

<input type="text" name="name" placeholder="Your Name">

 

The above code would remain as a text field, but add the placeholder aspect of the web form to supporting web browsers, as shown in the screenshot below:

 

Name Input Field

 

Browsers that don’t support the “placeholder” attribute simply ignore it.

 

Autofocus

 

Using the “autofocus” attribute, you can select a form element that you would like to automatically receive focus, i.e. which form element is ready to be used right away, without any user selection.

 

This is common on sites with a single form element, such as search engines, or login pages where the username is automatically focused (selected). This is usually done with JavaScript, but with the “autofocus” attribute, it’s built right in to the browser, all you need to do it pick your preferred form element, and add the “autofocus” attribute to it, for example:

 

<input type="text" name="name" placeholder="Your Name" autofocus>

 

Requiring a value

 

HTML 5 Web Forms allow you to set any input element as being “required”, in that the form won’t submit until a value has been entered into the field. To add this setting, you simply need to add the attribute “required” within the form element, for example:

 

<input type="text" name="name" required>

 

The form element mark-up is the same as with many other web forms, expect the single difference of the additional “required” attribute at the end. It doesn’t need a value, just the name of the attribute, and any supporting browser will ask the user to fill in this element before submitting the web form, as shown in the example screenshot below:

 

Required Field

 

It’s a clear yet non-invasive method of alerting the user that they need to enter a value for this field. The screenshot above was taken from Google Chrome, but each web browser has its own style of highlighting the need for the form field to be filed in.

 

Many sites require you to tick a box to conform you’ve read and accepted the terms and conditions, or to opt in or out of a mailing list. You can set the “required” attribute on this type of element just as easily, as shown below:

 

<input type="checkbox" name="tick" required>

 

… which would ask the user to tick the box before submitting the form, as shown in the screenshot below:

 

Required Checkbox

 

You can set the “required” attribute on any HTML form element, including the ones listed below, but remember, you may not want to ask for all fields to be filled in, so it isn’t necessary to mark-up every element as required.

 

Asking for an email address

 

If you want to ask the user for their email address, you can set the form field type to “email”. This will activate the browsers well-formed email address feature, that will ensure that the user enters an email address that at least looks valid.

 

Whereas before you might have had:

 

<input type="text" name="email">

 

… simple change the type value from “text” to “email”:

 

<input type="email" name="email">

 

The form field will still be a text box, but if the user enters something that doesn’t look like an email address, the browser will inform them, as shown in the screenshot below:

 

Email Address Prompt

 

If you don’t mark this as a “required” field, then the web browser will not pop-up an alert if the field is left blank. It will sill validate the email address if the user enters something in to the field.

 

Browsers that don’t support the type “email” will present a standard and usable text box.

 

Touchscreen Keyboard

When coming across this form field, devices with a touchscreen keyboard (such as PC monitors, tablets, smartphones, inc iPhone, iPad & iPod Touch) will present a slightly different onscreen keyboard, thus making the typing in of an email address slightly easier.

 

Asking for a web address

 

If you want to ask the user for their web site address, you can set the form field type to “url”. This will activate the browsers well-formed web address feature, that will ensure that the user enters a web address that looks like a web address.

 

Whereas before you might have had:

 

<input type="text" name="webaddr">

 

… simple change the type value from “text” to “url”:

 

<input type="url" name="webaddr">

 

The form field will still be a text box, but if the user enters something that doesn’t look like a web address, the browser will inform them, as shown in the screenshot below:

 

URL Required

 

If you don’t want to mark this as a “required” field, then the web browser will not pop-up an alert if the field is left blank. It will sill validate the web address if the user enters something in to the field.

 

Browsers that don’t support the type “url” will present a standard and usable text box.

 

Touchscreen Keyboard

When coming across this form field, devices with a touchscreen keyboard (such as PC monitors, tablets, smartphones, inc iPhone, iPad & iPod Touch) will present a slightly different onscreen keyboard, thus making the typing in of a web address slightly easier.

 

Asking for a number

 

You can offer the user a chance to select a number by way of a “spinner control”, which is a text box that includes the ability to scroll up or down the number sequence.

 

This is done using the “number” type, so if you were asking someone for their age, you might have:

 

<input type="text" name="age">

 

… and if you simply change the type value from “text” to “number”:

 

<input type="number" name="age">

 

… a supporting browser would offer the user a form element that is shown in the screenshot below:

 

Age Field

 

The number type allows the use of three additional attributes, which are “min”, “max” and “step”. The “min” and “max” are perhaps quite obvious, in that they set the minimum selectable number and the maximum selectable number. If you wanted the user to select an age between 18 and 30, you could use the following code, and the user could not select a number higher than 30 or lower than 18:

 

<input type="number" name="age" min="18" max="30">

 

The user could manually enter a lower or higher number, but the browser would alert them to this mistake, as shown in the screenshot below:

 

Incorrect Value Entered

 

The “step” attribute is used to set the sequence the numbers will scroll though. By default, this is “1” (so you get 18, 19, 20, 21, etc) but if you want to “step” though a different sequence, you can set that here.

 

Setting the “step” attribute to “2” would scroll though every two numbers, such as 18, 20, 22, 24, 26. Setting the “step” attribute to “5” would scroll though every five numbers, such as 18, 23, 28, 33, 38.

 

Browsers that don’t support the type “number” will present a standard and usable text box for the user to enter a number.

 

Offering a slider bar

 

Another type of selection is the “range” type, that offers a slider bar that lets the user slide a bar to make their selection. It is similar to the “number” type, in that in contained a minimum and maximum range to select.

 

HTML5 Slider Bar

 

To create a slider bar (as shown in the screenshot above), use the “range” type in your web form, so rather than using:

 

<input type="text" name="rate">

 

… simple change the type value from “text” to “range”:

 

<input type="range" name="rate" min="1" max="10" value="5">

 

The “value” attribute sets the default value for the element.

 

Browsers that don’t support the type “range” will present a standard and usable text box for the user to enter a number.

 

Setting Date and Time

 

When asking the user for a date and/or time, you can use the “date” and “time” form types. Supporting browsers will produce an easily selectable calendar to the user for the “date” form type and a selectable time element for the “time” form type.

 

Using the code:

 

<input type="time" name="time">

 

… supporting browsers would offer something like the example screenshot below:

 

HTML5 Time Select

 

While using the code:

 

<input type="date" name="date">

 

… supporting browsers would offer something like the example screenshot below:

 

HTML5 Calendar Select

 

You can make use of the “datetime” type, which will combine the “date” and “time” in to a single element, or split up the date in to three elements, using the types “day”, “month” and “year”.

 

Browsers that don’t support the type “date” and “time” will present a standard text box for the user to enter a date and time.

 

Give it a go

 

And there you have it, HTML 5 Web Forms that can make your standard web form a little more usable with little effort from you. Simply chance a form “types” and maybe add a “required” attribute here and there, and the supporting web browsers will take care of the rest.

 

Such changes are a good way for web sites that have no current form validation to add a little filter to their forms to ensure a more accurate and useful result. Not all features are supported by all browser, but if you don’t have any validation at the moment, the browsers that do support these features will use them to help your users fill in the form closer to how you’d like them to.

 

Sites that already include validation may want to remain with what they have for now, or do some testing before going live with HTML 5 Web Forms.

 

For important sites, server-side validation is still very important, so don’t consider this a replacement for that, merely an addition to it in aid of the user.

 

The HTML 5 spec is still under construction, so things might change. If you try out HTML5 Web Forms, check them every so often to see if things have changed.

Did you find this article helpful? Yes | No
Article Comments (1)
Add your comment:
Comments are limited to 750 characters, you have 750 remaining.
Avatar
thecapedcrusader commented on 14th August, 2012:
Great article. Something else I now need to explore.

Freeola is a UK internet service provider offering the best value and extensive free services. Please compare our domain name registration prices or check out our UK high speed internet access. If you are in business please see examples of our free hosting at Freeola.com/customer-sites.

Safe and Secure Payment