What's new in HTML5 Forms

Sheonarayan
Posted by in HTML 5 category on for Beginner level | Points: 250 | Views : 15430 red flag
Rating: 5 out of 5  
 2 vote(s)

In this article, we are going to learn new form elements introduced in HTML5.

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" />

Output

(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" />

Output


How to provide option to user to enter Date and time both?

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 />

Output


How to give DropDown to the user to select week?

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" />

Output


How to provide an option to the user to select a value from a range?

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

Code

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 !!!

Page copy protected against web site content infringement by Copyscape

About the Author

Sheonarayan
Full Name: Sheo Narayan
Member Level: HonoraryPlatinum
Member Status: Administrator
Member Since: 7/8/2008 6:32:14 PM
Country: India
Regards, Sheo Narayan http://www.dotnetfunda.com
http://www.snarayan.com
Ex-Microsoft MVP, Author, Writer, Mentor & architecting applications since year 2001. Connect me on http://www.facebook.com/sheo.narayan | https://twitter.com/sheonarayan | http://www.linkedin.com/in/sheonarayan

Login to vote for this post.

Comments or Responses

Posted by: Patel28rajendra on: 3/13/2012 | Points: 25
Hi
Sheonarayan

Nice Article

very helpful
Write more on html5


Thanks

Rajendra Patel

Login to post response

Comment using Facebook(Author doesn't get notification)