Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to use time input type in HTML?
Html provides various tags to design a user interface. There is a specific category of tags which are readily available to provide options to the user to choose date and time type of data.
To create the time control using HTML, we have <input type=”time”> tag, where time value can be used in TYPE attribute of <input> tag.
By default, time control will display the output in 24 hr format. Time can be represented in hh:mm(hours::minutes) format or if you want to mention seconds also, then the format will be hh::mm::ss. The value of hour can be selected between 0-24 and for minutes, 0-59.
Let us see a program where a time type input element is created.
Example
<html> <body> <form> <label for="meet">Meeting Time :</label> <input type="time" id="time1"> </form> </body> </html>
When clock icon is selected, it will open the timer options from which time can be selected.
We can also set the default value for time picker, so in that case, instead of blank, it will show the default time initially. To set the default value, we can use VALUE attribute.
Example
<html> <body> <form> <label for="meet">Meeting Time :</label> <input type="time" id="time1" value="13:20"> </form> </body> </html>
We can also specify the range for time picker control as in some cases it may be required to limit the entry for the time like for e.g. the working hours are limited, store timings etc. For this type of information, you should set a range by using min, max and step attributes, and if the user selects out of the given range, an error message will get displayed.
Example
<html> <body> <form> <table border="3" bordercolor="black"> <caption>Online Doctor Appointment Form</caption> <tr> <td>Doctor Name</td> <td>Speciality</td> <td>Appointment Date</td> <td>Available Time</td> </tr> <tr> <td>Dr Kapoor</td> <td>Orthopedic Surgeon</td> <td><input type="datetime-local"></td> <td> <input type="time" id="time1" value="09:12" min="09:00" max="12:00"> </td> <td><input type="submit" value="Schedule"></td> </tr> </table> </form> </body> </html>
In this program, we have also used the datetime-local control to specify the “Appointment Date”. And time control is used to create a time picker. Available timings are displayed in the field using VALUE attribute (9:30 – 12:00) and if a user selects timings other than the
Mentioned one, it will generate an error.
Suppose, if you want to make it mandatory for the user to select the value from the time picker, then you can make use of the REQUIRED attribute.
Apart from setting a time range, we can also add a few specific values in the drop down. Let us now consider an example of flight tracker application like flightview.com. In this application, we can track flights either by entering flight details or by route information. In addition to this, flight timings can be specified and a user can choose from the available timings.
To do this, we can use the <datalist> tag in HTML form. This can be linked with <input> tag by using list attribute in the <input>tag.
Example
<html> <body> <form name="form1"> <label for="fli">Flight Timings :</label> <input type="time" list="avail"> <datalist id="avail"> <option value="06:00"> <option value="07:00"> <option value="08:00"> </datalist> <br><br> <input type="submit" value="Book"> </form> </body> </html>
18K+ Views
