Although HTML5 forms offer significantly more functions than their predecessors, they are just as easy to define.
HTML5 actually offers many new field types. Support by current browsers is already comparatively good. In any case, I will only introduce you to those field types that are practical to use.
Color picker
You can give your visitors the option of selecting a color.
If you click on such a field, a typical color picker opens.
This can be used to select the desired color. Such a color picker is defined via <input type="color" />.
Select your favorite color: <input type="color" name="lf" />
A value must always be assigned to the field. If this is missing or invalid, #000 (i.e. black) is automatically assumed.
Date and time
There are also numerous innovations in HTML5, particularly with regard to field types for date and time information. And some of these field types really are quite something. For example, think about the steps required if you want to offer your visitors a date selection field. Normally, nothing can be done without JavaScript (or even Flash). Thanks to HTML5, this is now much easier. All you have to do is define an input field of type date.
<input type="date" />
The browser is solely responsible for displaying and implementing the calendar. The browsers should display a corresponding widget to display the calendar. In Google Chrome, an application looks like this:
A calendar is defined by date, which users can use to select the desired date. The date is automatically transferred to the text field after selection.
A time field can be created just as easily. A field of type time is used for this.
<input type="time" />
The browser should use time to display controls for selecting a time.
Week works in a similarly simple way. A field for selecting the week is displayed above it.
<input type="week" />
You can also display a month field.
<input type="month" />
Both field types display control elements that can be used to set the desired information.
While time and date only allow the selection of either the date or the time, datetime and datetime-local allow a combination of both variants.
With datetime, a date field and a field for selecting the time are displayed next to each other. (datetime is currently only supported by Safari and Opera).
It has already been mentioned that the form fields presented in this section are not yet supported by all browsers. If you still want to use them, you can fall back on corresponding JavaScript solutions. The major JavaScript frameworks such as jQuery and Dojo offer suitable scripts. With jQuery UI, this would look like this:
<!DOCTYPE html> <html> <head> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <script> /* <![CDATA[ */ $(document).ready(function() { $("#datepicker").datepicker(); }); /* ]]> */ </script> </head> <body> <input type="text" id="datepicker" /> </body> </html>So you are on the safe side, even if the browser does not support the classic date.
Fields for numbers
With number, a field is offered that is specifically intended for entering numbers.
In the simplest case, the definition of a number field looks like this:
<input type="number" />
Numbers can be entered in such fields in two ways:
- via the keyboard
- via control elements
By specifying additional attributes, number fields can be described in even more detail. Firstly, there are the two attributes min and max, which can be used to determine the value ranges of the fields.
- min - the smallest possible value
- max - the largest possible value
However, these two attributes only apply to the browser control elements. They cannot be used to influence the user's manual entries via the keyboard.
Integer and floating point numbers can be assigned to both attributes.
The step attribute can be used to specify the step that is to be observed by the browser control elements.
<input type="number" min="0" max="8" step="2" />
In this case, you could only select the values 0, 2, 4, 6 and 8 using the browser's control elements.
Slider
Fields of type range allow you to select a value within a defined value range.
Browsers interpret the range field as a slider.
<input type="range" min="0" max="10" step="2" value="6">
The smallest possible value is specified via the min attribute. max describes the largest possible value. If the two attributes min and max are missing, the browsers assume the two values 0 and 100.
The step sequence can be defined via step.
Creating search fields
search initially has no function. Rather, this field type should be seen as a supplement to the classic text input field. The purpose of search fields is simply to distinguish them visually from simple text fields. Browsers should usually take over the display of search fields.
<input type="search" />
How they ultimately implement this is up to the manufacturers. A good combination is to add the results attribute.
<input type="search" results="5" placeholder="Search..." />
Results is used to specify how many of the previous search entries should be displayed in the field.
But beware: The results attribute is not part of the HTML5 specification.
