Inputting Time in HTML 5
Mastering HTML5 - Part 19
Forward: In this part of the series, we see how the user can input time and date in HTML 5.
By: Chrysanthus Date Published: 22 Jul 2012
Introduction
Note: If you cannot see the code or if you think anything is missing (broken link, image absent. Etc.), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.
The input Control
In order to display time or date to the user, you need the time element. In order for the user to input time or date, you need the input control. The input control is used for many things, depending on the value of its type attribute. To use the input element for date or time, you just have to use the appropriate value for the type attribute and let the user type the input in the right format.
Inputting Time
Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<label>Time: <input type="time" name="The Time" placeholder="24-hour clock e.g. 13.52"><small> hh:mm</small></label>
</body>
</html>
The value of the type attribute is, time. The placeholder attribute and the small element indicate to the user the format of which he should type the time. If the format of the time the user types in is wrong, the browser should not allow this (has to indicate an error). The presence of the placeholder attribute and the small element are not obligatory. However, looking at the format that HTML5 imposes, it is good to have them.
Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<label>Date: <input type="date" name="The Date" placeholder="e.g. 2011-08-27"><small> yyyy-mm-dd</small></label>
</body>
</html>
The value of the type attribute is, date. Again the HTML5 format of the date has to be respected by the user; otherwise the browser would not accept it and would issue an error message. At the moment many browsers do not do this validation.
Inputting Global Date and Time
Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<label>GMT Date and Time: <input type="datetime" name="GMT Date Time" placeholder="e.g. 2011-05-15T13:09Z"><small> yyyy-mm-ddThh:mmZ</small></label>
</body>
</html>
The value of the type attribute is, datetime. Again, the HTML 5 format must be respected by the user. The browser is supposed to validate the date-time.
Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<label>Date and Time in your Country: <input type="datetime-local" name="Country Date Time" placeholder="e.g. 2011-05-15T13:09"><small> yyyy-mm-ddThh:mm</small></label>
</body>
</html>
The value of the type attribute is, datetime-local. Again, the HTML 5 format must be respected by the user. The browser is supposed to validate the date-time.
That is it for this part of the series. We stop here and continue in the next part.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT