HTML5 introduces a lot of changes to support the new scenarios in which the “World Wide Web” is being used. One of the new changes being introduced in HTML5 is the support for month as a first class input element type. The introduction of this new input type allows web developers to get the input element’s value as a string which represents month.
The “month” input type is a type which represents a control that supports capturing “month” values as a string on a HTML5 page.
The following attributes apply to an input element with “month” input type.
- autocomplete – Acceptable values are “on” or “off”.
- autofocus – Acceptable values are “autofocus”, “” or empty.
- disabled – Acceptable values are “disabled”, “” or empty.
- form – An attribute ID on the form with which to associate the element.
- list – Acceptable value is ID of a datalist element in the same document.
- max – String representing valid month.
- min – String representing valid month.
- name – String.
- readonly – Acceptable values are “readonly”, “” or empty.
- fquired – Acceptable values are “readonly”, “” or empty.
- step – Acceptable values are “any” or a positive floating point number.
- value – String which represents the month.
Here is a simple web page with month input type attribute.
<!DOCTYPE html>
<html>
<body>
<header>
<h1>Month type demo</h1>
<p>Demo showing month type on input element</p>
</header>
<footer>
<h1></h1>
<p>HTML Goodies</p>
</footer>
Month example
<input type=”month“ />
</body>
</html>
This code should render like this in a modern browser:
Month type demo
Month type demoDemo showing month type on input element
Month example
You can download an example of this html file here. (Right Click “Save link as”)
When this page is opened in a modern browser which supports HTML5 (latest version of Google Chrome), it should look like the following:
When you click the element, you can choose only the month, or both the month and the year:
Selection showing only the month selected will look like this:
Selection showing both the month and year selected:
In this example, when you click on the down-arrow on the input control, you can see that when you select any date, it selects the whole month. As with other input controls, one can add validation to make the inputs in these fields more restrictive.
As discussed, month input types can be used where the control’s value is required to be a value month formatted as a string.
Summary
In this article, we learned about the new month type on the input element in HTML5.
About the author
Vipul Patel is a Program Manager currently working at Amazon Corporation. He has formerly worked at Microsoft in the Lync team and in the .NET team (in the Base Class libraries and the Debugging and Profiling team). He can be reached at vipul.patel@hotmail.com
