[\/one_third]<\/p>\n
[one_third]<\/p>\n
- \n
- email<\/a><\/li>\n
- month<\/a><\/li>\n
- number<\/a><\/li>\n
- range<\/a><\/li>\n
- search<\/a><\/li>\n
- \n[\/one_third]<\/p>\n
- tel<\/a><\/li>\n
- time<\/a><\/li>\n
- url<\/a><\/li>\n
- week<\/a><\/li>\n<\/ul>\n
[\/one_third_last]
\n[ulp id=’tgm4cmEWcKUikZNn’]<\/p>\n<\/a>1. The input type color : <\/h2>\n
1.1 Presentation<\/h3>\n
\r\n<input type="color"\/>\r\n<\/pre>\n
This type will allow the user to select a color using the system color picker.<\/p>\n
Note : <\/strong> this type is not implemented in all browser, check availability on the can-i-use web site<\/a>.<\/p>\n
1.2 Javascript<\/h3>\n
The color selected by the user will be accessible via the
value<\/code> attribute. And in order to set the color,
\nsimply set thevalue<\/code> attribute, let see an example :<\/p>\n\r\n(function(){\r\n var colorElement = document.getElementById('colorinput');\r\n \/\/ Set the color to red\r\n colorElement.value="#FF0000";\r\n\r\n \/\/ Log the new color on change\r\n colorElement.addEventListener('change', function(e){\r\n console.log(colorElement.value);\r\n });\r\n})();\r\n<\/pre>\nNote<\/strong> : The browsers may set the value to
#000000<\/code> if you try to set an invalid color string.\n<\/p><\/blockquote>\n<\/a>2. The input type date: <\/h2>\n
2.1 Presentation <\/h3>\n
\r\n<input type="date"\/>\r\n<\/pre>\n
The
date<\/code> attribute will define a string representing a specific date.<\/p>\nNote : <\/strong> this type is not implemented in all browser, check availability on the can-i-use web site<\/a>.<\/p>\n
For example, in Chrome, when using this attribute, the browser will present you a calendar to select a date :<\/p>\n
![\"Input](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/date.png\")
<\/a>Input type date<\/figcaption><\/figure>\n 2.2 Javascript<\/h3>\n
The date selected (or entered) by the user will be accessible via the
value<\/code> attribute.<\/p>\n\r\n(function(){\r\n var dateElement = document.getElementById('dateinput');\r\n dateElement.addEventListener('change', function(e){\r\n console.log(dateElement.value);\r\n\r\n \/\/ Get the value as a Date Object\r\n console.log(dateElement.valueAsDate);\r\n\r\n \/\/ Get the value as a number (timestamp)\r\n console.log(dateElement.valueAsNumber);\r\n });\r\n})();\r\n<\/pre>\nNote<\/strong> : The browser (if it supports the attribute) won’t allow you to set a date that is not a valid date string.\n<\/p><\/blockquote>\n
2.3 Other attributes<\/h3>\n
This type allow you to define constraints by adding some attributes :<\/p>\n
- \n
min<\/code> : The Minimum date, as a string, the browser won’t permit the selection of a date before the minimum.\n<input type="date" min="2015-04-01"\/><\/pre>\n<\/li>\n
max<\/code> : The Maximuim date, as a string, the browser won’t permit the selection of a date after the maximum.\n<input type="date" max="2015-04-10" min="2015-04-01"\/><\/pre>\n<\/li>\n
step<\/code> : when define, the browser will start at a date (today, or the date define in the minimum attribute) and allow only date separated by “step” days.\n<input type="date" step="10" \/><\/pre>\n<\/li>\n<\/ul>\n
<\/a>3. The input type datetime : <\/h2>\n
3.1 Presentation <\/h3>\n
\r\n<input type="datetime"\/>\r\n<\/pre>\n
This will allow you to enter a date and time (hour, minute, second, and fraction of a second) based on UTC time zone.<\/p>\n
Note <\/strong> : None of my browsers supported this value<\/p><\/blockquote>\n
<\/a>4. The input type datetime-local : <\/h2>\n
4.1 Presentation <\/h3>\n
\r\n<input type="datetime-local" id="dateinput1" \/>\r\n<\/pre>\n
This will allow you to enter a date and time (hour, minute, second, and fraction of a second) based on local time zone.<\/p>\n
![\"input](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/datetime.png\")
<\/a>input type datetime<\/figcaption><\/figure>\n 4.2 Javascript<\/h3>\n
The date selected (or entered) by the user will be accessible via the
value<\/code> attribute.<\/p>\n\r\n(function(){\r\n var dateElement = document.getElementById('dateinput1');\r\n dateElement.addEventListener('change', function(e){\r\n console.log(dateElement.value);\r\n\r\n \/\/ Get the value as a number (timestamp)\r\n console.log(dateElement.valueAsNumber);\r\n });\r\n})();\r\n<\/pre>\n<\/a>5. The input type email : <\/h2>\n
5.1 Presentation <\/h3>\n
\r\n<input type="email" \/>\r\n<\/pre>\n
This will allow you to enter an email address.<\/p>\n
There is no specific representation of this field, it is shown as an input type text element. But on mobile devices, the keyboard displayed when the user wants to enter some text in this type of field will add some special characters such as the @<\/em> or .com<\/em>.<\/p>\n
5.2 Javascript<\/h3>\n
The email entered by the user will be accessible via the
value<\/code> attribute.<\/p>\n\r\n(function(){\r\n var emailElement = document.getElementById('mail1');\r\n emailElement.addEventListener('change', function(e){\r\n console.log(emailElement.value);\r\n });\r\n})();\r\n<\/pre>\n5.3 CSS Pseudo Elements<\/h3>\n
In order to display the validation status of the element you can use the CSS 3 pseudo elements :
:invalid<\/code> and:valid<\/code><\/p>\n\r\ninput[type='email']:invalid {\r\n color:red;\r\n}\r\n\r\ninput[type='email']:valid {\r\n color:green;\r\n}\r\n<\/pre>\n<\/a>6. The input type month :<\/h2>\n
6.1 Presentation <\/h3>\n
\r\n<input type="month"\/>\r\n<\/pre>\n
This will allow you to enter a month and a year without timezone.<\/p>\n
Note<\/strong> : The browser (if it supports the attribute) won’t allow you to set a month that is not a valid month string.\n<\/p><\/blockquote>\n
Note<\/strong> : This type, will accept the same attributes as the
date<\/code> type, ie :min<\/code>,max<\/code> andstep<\/code>. Here the value 1<\/em> forstep<\/code> represents a month.<\/p><\/blockquote>\n![\"input](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/month.png\")
<\/a>input type month<\/figcaption><\/figure>\n 6.2 Javascript<\/h3>\n
\r\n (function () {\r\n\r\n var element = document.getElementById('input1');\r\n element.addEventListener('change', function (e) {\r\n \/\/ Retreive the value\r\n console.log(element.value); \/\/ 2015-04\r\n\r\n \/\/ Set a ne Value\r\n element.value = "2015-06";\r\n\r\n \/\/ Log the value as Date (First of June ...)\r\n console.log(element.valueAsDate);\r\n\r\n });\r\n })();\r\n <\/pre>\n<\/a>7. The input type number :<\/h2>\n
7.1 Presentation<\/h3>\n
\r\n<input type="number"\/>\r\n<\/pre>\n
This type will create a control, to only accept a numerical value.<\/p>\n
Note<\/strong> : On Mobile devices, this input type, will make the device to show the numeric keyboard when the user wants to enter a value in the field.<\/p><\/blockquote>\n
7.2 Javascript<\/h3>\n
\r\n (function () {\r\n\r\n var element = document.getElementById('input1');\r\n element.addEventListener('change', function (e) {\r\n \/\/ Retreive the value\r\n console.log(element.value); \/\/ 2\r\n });\r\n})();\r\n<\/pre>\n7.3 Attributes and CSS<\/h3>\n
Attributes<\/h4>\n
- \n
min<\/code> : The Minimum Number\n<input type="number" min="0"\/><\/pre>\n<\/li>\n
max<\/code> : The Maximuim Nuhmber\n<input type="date" max="100" min="0"\/><\/pre>\n<\/li>\n
step<\/code> : when define, the browser will not accept any value that are not separated from step (form 0 or min). This can be use to allow the user to enter a decimal value.\n<input type="date" step="0.1" \/><\/pre>\n<\/li>\n<\/ul>\n
CSS Pseudo Elements<\/h4>\n
In order to display the validation status of the element you can use the CSS3 pseudo elements :
:invalid<\/code> and:valid<\/code><\/p>\n\r\ninput:invalid {\r\n color:red;\r\n}\r\ninput:valid {\r\n color:green;\r\n}\r\n<\/pre>\n<\/a>8. The input type range : <\/h2>\n
8.1 Presentation<\/h3>\n
\r\n<input type="range"\/>\r\n<\/pre>\n
This type create a control, that will display a slider to define a value. Usefull for entering a number whose exact value is not really important.<\/p>\n
The default values for the attributes are :<\/p>\n
- \n
min<\/code> : 0<\/li>\nmax<\/code> : 100<\/li>\nvalue<\/code> : min + (max-min)\/2, or min if max is less than min<\/li>\nstep<\/code> : 1<\/li>\n<\/ul>\n![\"input](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/range.png\")
<\/a>input type range<\/figcaption><\/figure>\n 8.2 Javascript<\/h3>\n
\r\n (function () {\r\n var element = document.getElementById('input1');\r\n element.addEventListener('change', function (e) {\r\n \/\/ Retreive the value\r\n console.log(element.value); \/\/ 2\r\n });\r\n})();\r\n<\/pre>\n<\/a>9. The input type search :<\/h2>\n
9.1 Presentation<\/h3>\n
\r\n<input type="search"\/>\r\n<\/pre>\n
This type, is a kind of input type
text<\/code>, except that when the value entered in this input contains line breaks, they are automatically removed from the value sent to the server.<\/p>\n9.2 Javascript<\/h3>\n
\r\n (function () {\r\n var element = document.getElementById('input1');\r\n element.addEventListener('change', function (e) {\r\n \/\/ Retreive the value\r\n console.log(element.value); \/\/ 2\r\n });\r\n})();\r\n<\/pre>\n<\/a>10. The input type tel : <\/h2>\n
10.1 Presentation<\/h3>\n
\r\n<input type="tel"\/>\r\n<\/pre>\n
This will help you to enter a phone number.<\/p>\n
Note<\/strong> : There is no specificities for this element except that on mobile devices the numeric keyboard will be displayed when user want to enter a phone number.<\/p><\/blockquote>\n
10.2 Javascript<\/h3>\n
\r\n (function () {\r\n var element = document.getElementById('input1');\r\n element.addEventListener('change', function (e) {\r\n \/\/ Retreive the value\r\n console.log(element.value); \/\/ 2\r\n });\r\n})();\r\n<\/pre>\n<\/a>11. The input type time :<\/h2>\n
11.1 Presentation <\/h3>\n
\r\n<input type="time"\/>\r\n<\/pre>\n
This will allow you to enter an hour without timezone.<\/p>\n
Note<\/strong> : The browser (if it supports the attribute) won’t allow you to set an hour that is not a valid hour string.\n<\/p><\/blockquote>\n
Note<\/strong> : This type, will accept the same attributes as the
date<\/code> type, ie :min<\/code>,max<\/code> andstep<\/code>. Here the value 1<\/em> forstep<\/code> represents a second, default is 60 seconds.<\/p><\/blockquote>\n11.2 Javascript<\/h3>\n
\r\n (function () {\r\n var element = document.getElementById('input1');\r\n element.addEventListener('change', function (e) {\r\n \/\/ Retreive the value\r\n console.log(element.value); \/\/ 10:00\r\n\r\n \/\/ Set Value to last time of year\r\n element.value = "16:45";\r\n });\r\n })();\r\n <\/pre>\n<\/a>12. The input type url : <\/h2>\n
12.1 Presentation<\/h3>\n
\r\n<input type="url"\/>\r\n<\/pre>\n
This attribute act as the
email<\/code> attribute.<\/p>\nThis will allow you to enter an url (with schema : http, ftp …).<\/p>\n
There is no specific representation of this field, it is shown as an input type text element. But on mobile devices, the keyboard displayed when the user wants to enter some text in this type of field will add some special characters such as .com<\/em> and http:\/\/<\/em>.<\/p>\n
12.2 Javascript<\/h3>\n
The url entered by the user will be accessible via the
value<\/code> attribute.<\/p>\n\r\n(function(){\r\n var urlElement = document.getElementById('url1');\r\n urlElement.addEventListener('change', function(e){\r\n console.log(urlElement.value);\r\n });\r\n})();\r\n<\/pre>\n12.3 CSS Pseudo Elements<\/h3>\n
In order to display the validation status of the element you can use the CSS 3 pseudo elements :
:invalid<\/code> and:valid<\/code><\/p>\n\r\ninput[type='url']:invalid {\r\n color:red;\r\n}\r\n\r\ninput[type='url']:valid {\r\n color:green;\r\n}\r\n<\/pre>\n<\/a>13. The input type week : <\/h2>\n
13.1 Presentation <\/h3>\n
\r\n<input type="week"\/>\r\n<\/pre>\n
This will allow you to enter a week and a year without timezone.<\/p>\n
Note<\/strong> : The browser (if it supports the attribute) won’t allow you to set a week that is not a valid week string.\n<\/p><\/blockquote>\n
Note<\/strong> : This type, will accept the same attributes as the
date<\/code> type, ie :min<\/code>,max<\/code> andstep<\/code>. Here the value 1<\/em> forstep<\/code> represents a week.<\/p><\/blockquote>\n![\"input](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/week.png\")
<\/a>input type week<\/figcaption><\/figure>\n 13.2 Javascript<\/h3>\n
\r\n (function () {\r\n var element = document.getElementById('input1');\r\n element.addEventListener('change', function (e) {\r\n \/\/ Retreive the value\r\n console.log(element.value); \/\/ 2015-W15\r\n\r\n \/\/ Set Value to last week of year\r\n element.value = "2015-W52";\r\n\r\n \/\/ Log the value as Date, this return the first day of the Week\r\n console.log(element.valueAsDate);\r\n\r\n });\r\n })();\r\n <\/pre>\n14. Download<\/h2>\n
- time<\/a><\/li>\n
[one_third_last]<\/p>\n
- \n
- month<\/a><\/li>\n