New types of element input in HTML5
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:
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:
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:
- 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.
- 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.
- 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:
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:
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.
Attribute step also affects the buttons in the 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:
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:
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:
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:
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.
Continue reading here: Animated frames for social media buttons with 3D effect using only CSS3
Was this article helpful?