Using the input element to obtain times and dates

HTML5 has introduced some input element types to gather dates and times.

Type	Description	Example
datetime	Obtains a global date and time, including time zone.	2012-03-14T12:34:56.123Z
datetime-local	Obtains a local date and time with no time zone information	2012-01-11T12:34:56.123
date	Obtains a local date with no time or time zone.	2012-02-22
month	Obtains a year and month with no day, time, or time zone information.	2012-02
time	Obtains a time.	11:23:45.123
week	Obtains the current week.	2012-W30

The following table shoes additional attributes available for the Date and Time input element

Attribute	Description	New in HTML5
list	Specifies the id of a datalist element that provides values.	Yes
min	Specifies the minimum acceptable value for input validation.	Yes
max	Specifies the maximum acceptable value for input validation.	Yes
readonly	If present, this attribute makes the text box read-only.	No
required	Specifies required field for input validation.	Yes
step	Specifies the granularity of increments and decrements to the value.	Yes
value	Specifies the initial value.	No

 
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
      <form method="post" action="http://yourServer/form">
            <p>
                  <label for="name"> Name: 
                         <input value="Mark" id="name" name="name" />
                  </label>
            </p>
            <p>
                  <label for="password"> Password: <input type="password"
                        placeholder="Min 6 characters" id="password" name="password" />
                  </label>
            </p>
            <p>
                  <label for="fave"> Choice: 
                    <input value="item" id="fave"name="fave" />
                  </label>
            </p>
            <p>
                  <label for="lastbuy"> When did you last buy: <input
                        type="date" id="lastbuy" name="lastbuy" />
                  </label>
            </p>
            <input type="submit" value="Submit Vote" />
      </form>
</body>
</html>

Click to view this demo.

Home
HTML CSS Book
HTML

input Restricted: