O'Reilly logo

HTML5 Data and Services Cookbook by Mite Mitreski, Gorgi Kosev

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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:

Inputting time

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required