Tag: step

date time Input Type: HTML5

Today lets learn some very important input types of HTML5:

datetime
datetime-local
date
time
week
month

form-input-type-date-time-type-html5

datetime input type is supported by Opera browser, but as of now(2013), Google Chrome doesn’t support it. All other input date time related input types are supported by Google Chrome.

HTML file: month input type
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

< !DOCTYPE html>
<html>
<head>
<title>date picker: HTML5</title>
<link href="myStyle.css" rel="stylesheet" />
</head>
<body>
 
<form>
<label for="dt">Date: </label>
 <input name="dt" type="month" min="2013-01" max="2013-09"/>
 <input type="submit"/>
</form>
 
</body>
</html>

Here we have a month type input field which has a minimum allowed month as 2013-01 and a maximum allowed month as 2013-09.

HTML file: date input type
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

< !DOCTYPE html>
<html>
<head>
<title>date picker: HTML5</title>
<link href="myStyle.css" rel="stylesheet" />
</head>
<body>
 
<form>
<label for="dt">Date: </label>
 <input name="dt" type="date"/>
 <input type="submit"/>
</form>
 
</body>
</html>

Here we have a date input type, which shows a date picker in the UI.

HTML file: time input type
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

< !DOCTYPE html>
<html>
<head>
<title>date picker: HTML5</title>
<link href="myStyle.css" rel="stylesheet" />
</head>
<body>
 
<form>
<label for="dt">Date: </label>
 <input name="dt" type="time"/>
 <input type="submit"/>
</form>
 
</body>
</html>

Here we have a time input type, we could even specify the fractional seconds. Look for the syntax at the end of this post.

HTML file: datetime input type
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

< !DOCTYPE html>
<html>
<head>
<title>date picker: HTML5</title>
<link href="myStyle.css" rel="stylesheet" />
</head>
<body>
 
<form>
<label for="dt">Date: </label>
 <input name="dt" type="datetime"/>
 <input type="submit"/>
</form>
 
</body>
</html>

datetime input type which signifies Universal Time Convention(UTC).

HTML file: datetime-local input type
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

< !DOCTYPE html>
<html>
<head>
<title>date picker: HTML5</title>
<link href="myStyle.css" rel="stylesheet" />
</head>
<body>
 
<form>
<label for="dt">Date: </label>
 <input name="dt" type="datetime-local"/>
 <input type="submit"/>
</form>
 
</body>
</html>

Here we have a datetime-local input type, which takes the input based on the local time zone of the user’s machine.

HTML file: week input type
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

< !DOCTYPE html>
<html>
<head>
<title>date picker: HTML5</title>
<link href="myStyle.css" rel="stylesheet" />
</head>
<body>
 
<form>
<label for="dt">Date: </label>
 <input name="dt" type="week"/>
 <input type="submit"/>
</form>
 
</body>
</html>

week input type gives date picker UI and allows user to select the entire date.

Form Input Type – date time: HTML5


[youtube https://www.youtube.com/watch?v=VKRuSryBaNk]

YouTube Link: https://www.youtube.com/watch?v=VKRuSryBaNk [Watch the Video In Full Screen.]



Related Read: Format Date and Insert Into Database Table: PHP

Note:
We can specify value, min, max and step attributes for all these input types. And the format for it is as shown below:

date YYYY-MM-DD default step 60 seconds

time HH:MM:SS.FF default step 1 Day (SS.FF means seconds and fractional seconds)

datetime YYYY-MM-DDTHH:MM:SS.FFZ default step 60 seconds (T and Z means the TimeZone, these alphabets/characters must be literally present in the format)

datetime-local YYYY-MM-DDTHH:MM:SS.FF default step 60 seconds (albhabet/character/letter T must be literally present in the format)

week YYYY-WNN default step of 1 week (letter W means the week, this alphabet/characters must be literally present in the format)

month YYYY-MM default step of 1 month

range Input Type: HTML5

Browsers which support range input type know that the field is used for entering a number with in a given range.

form-input-type-range-type-html5

User Interface(UI) enhancement wise, you may get a slider control to select a range of number. You can even use min, max and step attributes to provide additional control for the field – for setting the range.

HTML file
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

< !DOCTYPE html>
<html>
<head>
<title>range Input Type: HTML5</title>
<link href="myStyle.css" rel="stylesheet" />
<script src="myScript.js"></script>
</head>
<body>
 
<form>
<label>Range(2 to 10): </label>
 <input type="range" min="2" max="10" id="get" step="0.2" onchange="fetch()"/>
 <input type="number" min="2" max="10" step="0.2" id="put" />
 <input type="submit"/>
</form>
 
</body>
</html>

Here we have 2 input fields of type range and number respectively. Both having minimum allowed value as 2 and maximum allowed value as 10, and a step of 0.2 (fractional value). The number input field is taken for the sake of illustrating the value selected by the user using the range input field – by using(sliding) the slider.

JavaScript file
myScript.js

1
2
3
4
5

function fetch()
{
var get  = document.getElementById("get").value;
document.getElementById("put").value = get;
}

Here we fetch the value selected by the user using the slider and assign the value to the number input field.

CSS file associated with this is same as present at pattern and title Attribute of Form Field: HTML5

Form Input Type – range: HTML5


[youtube https://www.youtube.com/watch?v=YecwKiFBt0s]

YouTube Link: https://www.youtube.com/watch?v=YecwKiFBt0s [Watch the Video In Full Screen.]



Note: Browsers which do not support range input type, simply fall back to text input type. However, you need to validate the user entered data at server-side for more security. Client side validation is done mainly for the sake of creating the illustration of speed of validating the data and for a better user experience.

number Input Type: HTML5

number input type indicates that the input field is used for entering numbers.

form-input-type-number-type-html5

Advantages of using number input type:
1. Browsers which support HTML5, provides useful user interface enhancement by providing up and down arrow/tickers to increment and decrement the number.
2. You get a customized keyboard which is optimized for numeric inputs on mobile devices which supports number input type.
3. Using attributes like min, max and step, you can have more control. You can specify the minimum, maximum values the field takes and also you can specify the step for incrementing and decrementing the number using arrow marks.
4. Basic validation to check if the user entered numeric value or not.

HTML file
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

< !DOCTYPE html>
<html>
<head>
<title>number Input Type: HTML5</title>
<link href="myStyle.css" rel="stylesheet" />
</head>
<body>
 
<form>
<label for="no">Number: </label>
 <input name="no" type="number" value="5" min="2.0" max="10.0" step="0.2" />
 <input type="submit"/>
</form>
 
</body>
</html>

Here we have a number input type, with minimum allowed value of 2.0 and a maximum allowed value of 10.0 and a step of 0.2 (fraction).

CSS file associated with this is same as present at pattern and title Attribute of Form Field: HTML5

Form Input Type – number: HTML5


[youtube https://www.youtube.com/watch?v=rIiIfqS8190]

YouTube Link: https://www.youtube.com/watch?v=rIiIfqS8190 [Watch the Video In Full Screen.]



Note: Browsers which do not support number input type, simply fall back to text input type, so you can go ahead and implement number input type in your projects without worrying. It’s a good practice to even validate the code at server-side, since browsers can be easily tricked and wrong entries can be made using form elements.