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>
Home
HTML CSS Book
HTML
HTML CSS Book
HTML
input Restricted:
- Using the input Element to Restrict Data Entry
- Using the input element to obtain a number
- Using input Element to Obtain a Number in a Given Range
- Using the input Element to Obtain a Boolean Response
- Using the input Element to Create Fixed Choices
- Using the input Element to Obtain email address
- Using the input element to obtain telephone number
- Using the input Element to Obtain url
- Using the input element to obtain times and dates
- Using the input Element to Obtain a Color
- Using the input Element to Obtain Search Terms
- Using the input element to create hidden data items
- Using the input Element to Create Image Buttons and Maps
- Using the input element to upload files
Related: