How to Use Forms in HTML5


HTML Forms form the basis of every online form, from your mail sign up to your personal website making. HTML5 is the new version for HTML, and it adds many new things to old HTML.

Part 1

 on How to Use Forms in HTML5

1
This forms the basis of HTML5 and you won't understand this article if you do not know HTML4.

 on How to Use Forms in HTML5

2
The steps outlined below show the new tags description and use.

 on How to Use Forms in HTML5

3
<input placeholder="this is a text box" type="text"> This provides a placeholder for your box-the text that is displayed until the user clicks on it. This was provided by JavaScript, which is now simplified.

 on How to Use Forms in HTML5

4
<input required="" type="text"> This is also good for future proofing as well as validation in select browsers.

 on How to Use Forms in HTML5

5
Instead of using JavaScript to automatically focus the a cursor in the text field, you can just use the autofocus attribute. <input autofocus="" type="text">

 on How to Use Forms in HTML5

6
It is well known that almost every site that asks for registration asks for an email address. So, use- <input type="email"> You may notice that most browsers do not change anything, but a few hints, like the indication in Opera, or the keyboard-optimization in iPhone.

 on How to Use Forms in HTML5

7
<input type="url">

 on How to Use Forms in HTML5

8

 on How to Use Forms in HTML5

9
<input min="0" max="10" step="2" type="number"> As you may have realized, all these are optional(except the type of course); and so do not need to be entered. These also help reduce redundant JavaScript.

 on How to Use Forms in HTML5

10
Sliders are a much desired UI part of web design, and HTML5 has it. <bor><input min="0" max="10" step="2" type="range"> The same rules as type="number" apply to it.

 on How to Use Forms in HTML5

11
<input type="colorpicker"> <input type="date"> Sadly, Opera is the only browser with major support for these.

 on How to Use Forms in HTML5

12
<input type="search"> Mac OS Safari rounds in and gives it native search box styling, which is pretty good. But other browser support is a problem, where no other vendor supports this.

 on How to Use Forms in HTML5

13