Inputting time

In this recipe we will take a look at how to use time input controls and how they are combined with date selections. The general idea is to have the user agent render a clock that can be used as input. There are options to include the time zone and to have plain time representation and will try them out by creating a simple form as shown in the following screenshot:

How to do it...

Similar to the other examples, we create a form containing few input elements:

1. First we start the form and add the time input element:

   <form>
     <label>
       Select time <input name="time" type="time" >
     </label>

2. We add a datetime-local input:

     <label>
       Date and time local <input name="datetime-local" type="datetime-local" >
     </label>

3. Also we add a datetime input:

     <label>
       Select date and time <input name="datetime" type="datetime" >
     </label>

4. Finally we add submit and close the form

     <input type="submit">
   </form>

How it works...