Home / Articles / Programming languages / Markup languages / HTML & CSS / New types of element input in HTML5

New types of element input in HTML5

New types of element input in HTML5
 
New types of element input in HTML5
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


One of the strangest features of HTML forms is the use of an element with the vague designation input, it creates variety of control elements, starting from check boxes to text fields and buttons. The specific control element depends on the attribute type of element input.

If browser encounters an unknown type of element input, the web browser treats it as a plain text field. This means that the following three elements are treated exactly the same in all browsers:

<input type="text">
<input type="unknown-type-input">
<input>

HTML5 puts this into use. To be more specific, if element input was complimented with several new types, and if any of them is not supported, it will process them as regular text fields. For example, to input an email address you can create a new input field of a new type email:

<input type="email">

When viewing a page with this code in the browser that doesn't support the type email for element input (e.g. Internet Explorer), this field will be displayed as plain text field. But browsers that support HTML5 forms are a bit smarter and can do the following:

  1. Offer editing services. For example, an intelligent browser can provide a way to select an email address from the address book and insert it into the address field.
  2. Prevent possible mistakes. For example, the browser may not accept letters when you type them in the field number, or decline invalid dates, or even to force the user to choose the date from the mini-calendar, which is easier and safer.
  3. Check. Browsers can perform more complex validation when user clicks the button to send the data.

HTML5 specifications do not provide any instructions for browser developers concerning the first point. Browsers are free to control how to display and edit different data types in any possible way that makes sense, and different browsers can add various small features.

But more important is its ability to check and prevent errors. As an absolute minimum, browsers with HTML5 forms should avoid sending forms containing information that violates the rules of data types. Therefore, if the browser can not prevent errors directly when entering (see second point in the list above), it should at least check them when the user tries to submit the form (as in the third point).

Unfortunately, not all modern browsers meet these requirements. Some do recognize new data types and provide some editing, but not checks. Many browsers do support one type of data, but not the other. Particularly problematic, in this respect, are mobile browsers - they provide some easy editing, but no verification capabilities.

Although mobile versions of Safari for iOS and Android don't support checks, providing specialized keyboards for these browsers is a major feature. Therefore, applications for these browsers should use special data types.

Email addresses

Data type email is used for fields where user is to enter his\her e-mail address. In general, e-mail address consists of a string of characters (the use of some characters are not allowed). Valid address must contain @ symbol and a dot, between them there should be at least one character, and after the dot - at least two characters.

Type email supports attribute multiple, which allows you to enter multiple addresses in the field. But these multiple addresses still look like a single line of text, only separated by commas. 

Remember that empty values are also checked. To prevent empty address field, into its element you need to insert the attribute required.

URLs

Type url is used for URL input fields. The question of what a valid URL is, still holds hot debates. But most browsers use a relatively non-strict validation algorithm. URL must contain a prefix (which can be either real, type http://, or made up, such as mytype://), it allows to enter a space, and most special characters except the colon.

Some browsers also offer possible options for the URL in the drop-down list, which are typically taken from the history of recently visited browser pages.

Search fields

Type search is used for search fields. They are designed to input keywords, and then accordingly the search is conducted. It can search in the Internet (as in Google), search in a single page or special search procedure that explores catalog information. In any case, the search looks almost exactly the same as regular text field.

In some browsers, such as Safari, the search field looks a bit different and has rounded corners. In addition, when the user starts entering data into the search field in Safari or Chrome, on the right side of the field a small icon in form of X is displayed, clicking this icon clears the field.

Except for these minor differences, the search field is identical to a normal text field. The main difference is in the semantics. In other words, the data type search is used in order to "explain"  the name to browsers, supporting programs, for not so bright users. They can direct visitors to the desired locations on the page or provide other, more smart services, at least in the near future.

Phones numbers

The data type tel is used to designate fields, into which you can input telephone numbers that can be represented in various formats. In some cases, digits are used, in some spaces, dashes, "plus" signs and parentheses. Perhaps this lack of a common format is the reason why the HTML5 standard does not require from browsers to check phone numbers. However, it is not clear why tel type field does not invalidate at least the letters.

Currently, the only benefit from the use of field type tel is to provide specialized virtual keyboard to input phone numbers on mobile browsers, which contains numbers, but not letters.

Numbers

HTML5 defines two numeric data types. Type number is for ordinary numbers.

This data type has obvious advantages. Common text fields accept everything: numbers, letters, spaces, punctuation signs, etc. For this reason, one of the most common tasks of checking is to make sure the value is a number within a certain range. But when you enter data into the type field number, the browser automatically ignores all characters except digits. The following code is an example of how to create this field type:

<label for="age">Age</label>
<input id="age" type="number">

Of course, there are many figures that are not suitable for every type of numeric data. For example, in the above example it is allowed to input the following - age 5000 or -12 years, and  that does not correspond with real world. This problem is solved by using attributes min and max. The following code shows an example of a reasonable range of age limits:

<input id="age" type="number" min="18" max="110">

Usually the field type number accepts only integers, but fractions, such as 20.5 are not allowed (moreover, some browsers don't even allow to input decimal point). But this, as well, can be changed by using the attribute step, which indicates a step change in the number (up or down). For example, by setting the value in step to 0.1, you can enter values such as 0.1, 0.2, 0.3, etc. But if you try to submit form with a value of 0.25 all you'll get is a notorious pop-up error message. By default the value is equal to 1.

<input id="age" type="number" min="18" max="110" step="0.1">

Attribute step also affects the buttons in the counter field:

Attribute step in counter field

Sliders

Another number type in HTML5 is range. Like the type number, this type can display integers and fractional values. Also supports attributes min and max designed for setting the range of values. This is the code to create this type field:

<label for="age">Age</label>
<input id="age" type="range" min="0" max="110" value="20">

The difference is in how the field type range displays the data. Instead of a counter, as in field type number, the intelligent browser displays the data in the form of a slider:

Field type range

To set the value of the type range, you just need to drag the slider to the desired position between the minimum and maximum values. But browsers that support this field type, provide no feedback about the set value. To get this piece of data, you need to add to the markup a JavaScript procedure, which responds to changes in the slider (perhaps through processing an event onChange), and then this procedure displays the information next to the field.

Date and time

In HTML5 several types of data are defined which are associated with time. Browsers that support date types may display a convenient drop-down calendar, in which the user can select the desired date and/or time. This not only eliminates the uncertainty regarding the correct date format, but also prohibits accidental (or intentional) setting of non-existent dates. Intelligent browsers can do even more, for example supporting integration with a personal calendar.

The following example shows the use of dates:

<label for="dob">Date of birth</label>
<input id="dob" type="date" min="1940-01-01" max="2010-01-01">
Use of dates

The table below lists six new HTML5 formats for date and time, given with a brief description:

Data type

Description

date

Date pattern YYYY-MM-DD.

time

Time in 24-hour format with optional seconds, with pattern hh:mm:ss.ss.

datetime-local

Date and time separated by an uppercase case T (pattern YYYY-MM-DDThh:mm:ss).

datetime

Date and time, also with datetime-local type, but with time zone offset. Use of the same pattern (YYYY-MM-DDThh:mm:ss-hh:mm), also true for element time.

month

Year and month number with pattern YYYY-MM.

week

Year and week number with pattern YYYY-WeekNumber.

Browsers that support date and time data types, also support the attributes min and max that allows you to set the minimum and maximum dates but only if you use the correct date format. This is demonstrated in the example above.

Color

The data type color is used for fields intended for color input. Data type color is an interesting, though rarely used, secondary feature that allows the visitor of the web page to choose color from a drop-down palette, similar to the palette of a graphics editor:

<label for="color">Color</label>
<input id="color" type="color">
Data type color

Several unusual attributes of element input

HTML5 standard recognizes several attributes that are used to control the browser when filling forms. Not all of these attributes are supported by all the browsers. Nevertheless, it's a pleasant to experiment with them.

Attribute spellcheck

Some browsers try to fill the gaps in user's education by checking the spelling of text input. The obvious problem with this service is that not all of the text consists of real words, and wavy red underlines can very quickly begin to act on the user's nerves. To disable spell check in the field, set the attribute spellcheck to false, and to reverse the action - set to true.

By default, different browsers behave differently with spell check, but by installation the attribute spellcheck leads to a uniform behavior.

Attribute autocomplete

Some browsers are trying to save you some time by offering an input field values that were entered in this field before. Such behavior is not always desirable, as indicated in the HTML5 specifications, because some information may be confidential (for example, codes for launching nuclear missiles ;-)) or remain relevant only for a short time (e.g. one-time passwords to the self-service banking system). For such fields, set the autocomplete attribute to off, this way the browser won't offer options to complete the input of the text field. And to perform autocomplete for a particular field, set the value of this attribute to on.

Attributes autocorrect and autocapitalize

These attributes are used to control auto correct and auto capitalize capabilities on some mobile browsers, namely Safari versions for iPad and iPhone.

Attribute multiple

Web developers use attribute multiple with element select to create lists with multiple choices since the beginning of time. But now they can apply this attribute to certain types of element input, including the type file (for uploading files) and email. In browsers that supports this attribute, the user can select multiple files for upload or input multiple email addresses in one field.


 

Read also

Form validation in HTML5

Form validation in HTML5

Forms in HTML5

Forms in HTML5

Form elements in HTML

Form elements in HTML

The HTML5 hype - is Flash really dead?

The HTML5 hype - is Flash really dead?

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation