Forms in HTML5

HTML forms are simple controls which are used to collect information from website visitors. These include text fields for data entry using a keyboard, drop-down lists with pre-defined data, checkboxes to change settings and so on. There are countless ways to use HTML forms, and if you have wandered through the Internet for just a few days, there is no doubt you have used them for different purposes - starting from registering on forums and mailboxes, to viewing exchange rates or purchasing goods in an online store.

HTML forms existed from the earliest times of HTML standard, and since then they haven't changed by a bit, in-spite some serious efforts. Developers of web standards for several years did some sorcery over the standard XForms, which was supposed to replace HTML forms, but it suffered the same failure as the standard XHTML2.

Although XForms standard provided elegant solutions for certain problems, but it as well had significant flaws. For example, XForms code was too bulky, and to work with it needed a good knowledge of XML standard. But the biggest problem was that the standard XForms was not compatible with HTML forms in no respect whatsoever. This meant that the developers had to rush into the uncharted waters of a new model without life savers, having only blind faith and a great courage.

But since major browser developers never bothered implementing XForms in their products, because it was too complex and not often used, the community of web developers have never made this next step.

HTML5 standard offers a different approach. Rather than starting from scratch, as was the case with XForms, it improved the existing model of HTML forms. This means that HTML5 forms can also work on older browsers, but without the newest widgets or features. But HTML5 forms also allow to use new features that are currently in use by developers. These features are handy because you don't have to write bunch of JavaScript pages or use third-party JavaScript toolkit.

What is form?

Most likely, you had a chance to work with forms before. But if not, or your memory doesn't serve you well, the following material will allow you to obtain the necessary information for a more in-depth study of this part of web design.

Web forms are set of text fields, lists, buttons and other clickable control elements, through which visitors of the page can "supply" it with different kinds of information. Forms can be found throughout the Internet, thanks to forms we can create email accounts, browse and buy products in online stores, carry out financial transactions and more. The simplest of forms is a lonely text field of search engines, for instance Bing:

Bing

All major web forms work the same way. The user inputs some information, and then clicks a button to send the information to the web server. When it arrives to the web server, this information is processed by an application, which then makes the appropriate next step. Before sending the new page back to the browser, the server program can access the database to retrieve or store information.

The difficulties arise because there are hundreds of different ways to implement the server application which processes data received from a form. Some developers may feel content with basic scripts for handling the data obtained, while others may use high-level tools that pack the data from the form into a neat program objects. But in any case, the task of these applications should be, generally, the same, to explore the data from the form, perform actions on them, and then use the results to send the browser a new (or refreshed) page.

Improving traditional HTML forms

The best way to learn how to use HTML5 forms is to take a typical modern form and improve it. Below is a sample form which is perfect for study purposes. The markup of such a form is simple enough. If you previously had to work with forms, you won't see anything new. First of all, the whole code for the form is contained in the element form.

Element form contains all the control elements related to forms, also called fields. In addition, it also tells the browser where to send the data when user clicks submit button, providing URL in the attribute action. But if all the work is performed on the client's side using JavaScript and not by a remote server, then for the attribute action, you can simply set the value #.

A well-designed form is divided into logical fragments using fieldset element. Each part can be assigned a name, for these purposes use element legend. In the following listing the markup of form is provided:

Please, fill the form. Required fields marked*

Contact information


Personal information

Choose from the list

Add some CSS styles:

label {
  width: 150px;
  display: inline-block;
}

input,
select,
textarea {
  width: 200px;
  display: inline-block;
}

input[type=checkbox] {
  width: 20px;
}

em {
  color: red;
}

And here's the result:

Traditional HTML form

As in all forms, most of the work in this example, is done using a universal element input, which collects data and creates checkboxes, radio buttons and lists. To enter a single line of text, element input is used, and if multiple lines, element textarea; element select creates a drop-down list. A brief overview of these and other control elements of form are given in the table below:

Control elements

HTML element

Description

One-line text field


Displays a single-line text field for text input. If the attribute type is set to value password, user input characters are displayed as asterisks (*) or marker-points (•).

Multiple-line text field

Text area in which you can input multiple lines of text.

Checkbox

Displays checkbox which you can mark or clear.

Radio button

Displays radio button, control element is in the form of a small circle, which can be checked. Typically a group of radio buttons is created with the same value of the attribute name, as the result, you can choose only one of them.

Button




Displays standard clickable button. Buttons with type submit always collect information from the form and send it for processing. Buttons with type image do the same thing, but instead of text it allows inserting images. Button with type reset clears the form fields from user input. Buttons with type button by themselves do nothing. To change this, that it would perform at least some actions, it's necessary to add JavaScript.

List

Displays a list, from it the user can pick a value. For each value in the list we add element option.

One of the limitations of HTML forms is that the developer can not control the way in which browsers display form controls. For example, if you want to replace a dull gray checkbox with a large black-and-white box with a red tick, you will fail. One solution of this problem is using JavaScript to create an element with a similar to a checkbox behavior, in other words, the element changes its appearance when it is clicked upon.

This restriction stayed unchanged in HTML5 and applies to all new elements of control, which we will discuss. This means that these forms will not suffice for developers who want complete control over the appearance of their pages but also have a need for controls with a special appearance.

Now that we have a form ready to be worked upon, it is time to improve it using HTML5. We begin in the next section by adding a textual hints and fields with auto focus.

Adding hints

Usually, new form fields don't contain any data. For some users, this form may not be entirely clear, in particular, what's the information that should be entered in a specific field. So, often form fields contain sample information explaining which information needs to be entered. This hint text is also called "watermark", as it is often displayed in light gray font to distinguish it from real input text. Example of these hints is shown below:

Hints

Above, if the field is empty, it displays the hints. Below, when the user clicks in the field (by setting it in focus), the hint disappears. If the user moves to another field without entering anything, the field is again filled with the hint.

Hints for the fields are created by using the attribute placeholder:


Browsers that do not support hints, just ignore the attribute placeholder; especially those minor applications like Internet Explorer. Fortunately, this is not such a big problem, because hints are just nice features, and are not must-have-or-die widgets.

At the moment there is no standard way to change the appearance of the hints, for example, highlighting it in italic font or a certain color. In time, browser developers will create the required handlers. But until then, you need either to use browser-specific CSS pseudo-classes (namely -webkit-input-placeholder or -moz-placeholder), or put up with the predicament.

On the other hand, pseudo-class focus provides better support, and it can be used to change the appearance of the text field when it in focus. For example, to make the background field darker, so that it would stand out, do the following:

input:focus {
  background-color: gray;
}

If you want to use hints, just read the article about cross-browser support for placeholder attribute in HTML5.

Focus

Since the purpose of this form is to input information, the first thing after it loads the users will want to enter loads of information into it. Unfortunately, they'll fail to do this until they click the first field, or select it by pressing Tab, by doing this they'll set focus on that field.

The user can do something about this by setting the automatic focus on the desired initial field. This can be done with JavaScript, by using method focus on the desired input element. But this approach requires an extra line of code, and can sometimes cause some annoying problems.

For example, some "bright" users can click faster than the focus call in invoked, by trying to be ahead of things, start typing in, and when the method finally invokes, the user is rudely ejected from his chosen field and moves to the one selected by the method. However, if focus is controlled by browser, it acts somewhat more clever and moves focus only if the user has not chosen any other field.

This is the idea behind HTML5 attribute autofocus, which can be inserted into the input element or textarea (but only into one of them), as shown in the following example:

The degree of browser support of autofocus attribute is about the same as in the case of attribute placeholder, and that means that almost all browsers support it, except for the minor applications like Internet Explorer. But again, this problem is easily solved. Check support of autofocus attribute for a particular browser, using the tool Modernizr and, if necessary, run your own code for auto focus.

Continue reading here: Adaptive vs. responsive web approach - two sides of the same coin

Was this article helpful?

0 0