HTML Part - 3

Demo with New Input attributes

New type values

Earlier developer were using different libraries in order to get different UI elements such as datepicker, range picker, color picker etc.

Now HTML 5 brought standard by introducing new attributes to “type” attribute of input elements.

Let’s look at some of them.

• Number

 Collapse | Copy Code

<input type="number" name="MyNuberElement" id="MyNumberElement" />

• Range

 Collapse | Copy Code

<input type="range" name="MyRangeElement" id="MyRangeElement"/>

• Color

 Collapse | Copy Code

<input type="color" id="MyColorElement" name="MyColorElement" />

• Date

 Collapse | Copy Code

<input type="date" id="MyDateElement" name="MyDateElement" />

• Time

 Collapse | Copy Code

<input type="time" id="MyTimeElement" name="MyTimeElement"/>

• Datetime-local

 Collapse | Copy Code

<input type="datetime-local" id="MyDateTimeLElement" name="MyDateTimeLElement" />

• DateTime (Also include time zone)

 Collapse | Copy Code

<input type="datetime" id="MyDateTimeElement" name="MyDateTimeElement"/>

• Month

 Collapse | Copy Code

<input type="month" id="MyMonthElement" name="MyMonthElement" />

• Week

 Collapse | Copy Code

<input type="week" id="MyWeekElement" name="MyWeekElement" />

Some useful attributes

• Autofocus

This attribute let us set initial focus on page load.

 Collapse | Copy Code

…

<label for="birthMonth">Birth Month</label>

<input type="month" id="MyMonthElement" name="MyMonthElement" autofocus />

&hellip;

This code makes focus to be set on “MyMonthElement” control element by default when page loads for the first time.

Note: In case “autofocus” is attached to multiple controls focus will be set on first control.

• Placeholder

Let us set watermark on an input control.

 Collapse | Copy Code

<input type="text" placeholder="Enter Value" id="MyPlaceHolderControl"

               name="MyPlaceHolderControl" />

                                                      Source collected from CodeProject.com