What's new in HTML5 Forms

To demonstrate the use of new HTML5 Form elements, I have presented this article in How to format so that it would be easy to understand and remember.

Please remember that HTML5 is still being improved and all browser doesn't support all features of HTML5. The screen shots you see above are taken mostly from Opera and few of them from Google Chrome. 

How to render a mandatory field TextBox with watermark text?

To render a mandatory field textbox with watermark text in it, we can use the required attribute and set placeholder attribute.

Get 500+ ASP.NET web development Tips & Tricks and HTML5 Online training here.

Code

<input type="text" id="myName" name="myName" placeholder="Please enter your name" />

In the above code snippet, you can see that we have set the placeholder attribute of the input type text that brings a watermark to the textbox like below

Output

In order to make this textbox mandatory, we can use required attribute.

<input type="text" id="myName" name="myName" required placeholder="Please enter your name" />

Output

How to detect if user has entered valid email id in the textbox?

In order to detect whether user has entered valid email id in the TextBox we can set the type attribute to “Email”.

Email: <input name="myEmail" id="myEmail" name="myEmail" type="email" required placeholder="Enter email" /

Output

How to detect if entered text is a valid url in the text box?

To detect whether the entered text is a valid url in the Text box, we can set the type attribute to “url”.

Code

Url: <input type="url" id="myUrl" name="myUrl" name="myUrl" />

(Screenshot from Chrome)

How to give option to the user to select a color?

To give option to the user to select a color on the webpage we can set the input type attribute to “color”.

Code

Color: <input type="color" id="myColor" name="myColor" name="myColor" />

Output

How to enable user to enter number in the TextBox?

To enable user to enter only number in the Text box, we can set the type attribute of the input element to “number”.

Code

Number : <input type="number" name="myNumber1" id="myNumber1" />

In case user enters some text that is no number, the textbox value is treated as empty (in the Opera).

Output

How to force the user enter a range of numbers in the TextBox?

To force the user to enter a range of numbers in the TextBox, we can set the max and min property of the input type “number”.

Code

Number (1 to 10):
        <input type="number" name="myNumber" id="myNumber" max="10" min="1" name="myNumber" />

Above code snippet, limit the user to enter number only from 0 to 10, in case user enter more than 10, it shows error; if user enter text other than number its value becomes empty (on the server side).

Output

How to give option to the user to select a month?

To provide option to select a month to the user, we can set the type attribute of the input element to “month”.

Code

Month: <input type="month" id="myMonth" name="myMonth" />

Output

How to provide a Date dropdown to the Text box to enable user select a date?

To provide option to select a date from the dropdown we can set the type attribute of the input element to “date”.

Code

Date: <input type="date" name="myDate" id="myDate" />

To provide option to enter date and time both, we can set type attribute of the input element to “datetime”. This option enable user to enter time in “Universal Time Coordinated”. To enter local time, we need to set the type attribute to “datetime-local".

Code

Datetime:
<input type="datetime" name="myDateTime" id="myDateTime" />
<br />
Datetime Local:
<input type="datetime-local" name="myDateTimeLocal" id="myDateTimeLocal" />
<br />

To give ability to select week from the dropdown, we can set the type attribute of the input element to “week”. 

Code

Week: <input type="week" name="myWeek" required id="myWeek" />

To give option to the user to select a value from the range, we can set input type as “range”, this displays a slider.

Following are additional attributes to set

• Min – minimum value of the range
• Max – maximum value of the range
• Step – value to step up and down
• Value – default value to set

Range: <input type="range" id="myRange" name="myRange" min="0" max="50" step="2" 
value="0" onchange="rangeOutput.value=this.value" />
 
<output name="rangeOutput">0</output>

In the above code snippet, we have set the min, max, step and value attributes. When we slide the pointer, it increase or decrease the value by 2. Onchange event handles the change event that fires when the slider is moved that changes the value of the output element.

Output

How to enable user to select multiple files to upload?

To provide option to select multiple files to upload on the server, we can set input type attribute to “file”. By default, this let user select only one file. To enable user to select multiple files, write multiple attribute.

Code

Select file: <input type="file" multiple id="myFiles" name="myFiles" />

Output

How to display a drop list along with a TextBox?

To display a drop list, we can write datalist > option element. To attach a data list for the textbox, we can set the list attribute of the textbox to the datalist id

Code

List items: <input type="text" list="listForMyList" name="myList" id="myList" />
<datalist id="listForMyList">
    <option value="Option 1" >
    <option value="Option 2" > 
    <option value="Option 3" >
    <option value="Option 4" >
    <option value="Option 5" >
</datalist>

Output

Hope this article presented in How to format would be useful, do let me know your feedback by responding to this article.

Thanks for reading; keep sharing your knowledge, it ultimately increase your knowledge !!!