HTML5 - Web Forms 2.0
What is Webforms 2.0
WebForms 2.0 is an extension to the forms features that are found in HTML4. Every form elements and attributes in HTML5 offer a greater level of semantic mark-up than the HTML4 and it frees us from a great amount of stressful scripting and styling that was required in HTML4.
The <input> element in HTML4
HTML4 input elements make use of the type attribute for setting the data type. The following types are available in HTML4:
| Sr.No. | Type & Description |
|---|---|
| 1 |
text This type is a free-form text field, nominally free of line breaks. |
| 2 |
password This type is a free-form text field for sensitive information, nominally free of line breaks. |
| 3 |
checkbox This type is a set of zero or more values from a predefined list. |
| 4 |
radio This type is an enumerated value. |
| 5 |
submit This type is a free form of a button initiates form submission. |
| 6 |
file This type is an arbitrary file with a MIME type and optionally a file name. |
| 7 |
image This type is a coordinate, relative to a particular image's size, with the extra semantic, that it must be the last value selected and initiates form submission. |
| 8 |
hidden This type is an arbitrary string that is not normally displayed to the user. |
| 9 |
select This type is an enumerated value, much like the radio type. |
| 10 |
textarea This type is a free-form text field, nominally with no line break restrictions. |
| 11 |
button This type is a free form of a button that can initiate any event related to button. |
The following code below is a simple example of making use of labels, radio buttons, and submit buttons:
... <form action = "http://example.com/cgiscript.pl" method = "post"> <p> <label for = "firstname">first name: </label> <input type = "text" id = "firstname"><br /> <label for = "lastname">last name: </label> <input type = "text" id = "lastname"><br /> <label for = "email">email: </label> <input type = "text" id = "email"><br> <input type = "radio" name = "gender" value = "female"> Female <br> <input type = "submit" value = "submit"> <input type = "clear"> </p> </form> ...
The <input> element in HTML5
HTML5 input elements were shipped with various new values for the type attribute. These values are listed below.
NOTE − Make sure you're using the latest version of the Opera browser to test the examples.
| Sr.No. | Type & Description |
|---|---|
| 1 | datetime This is a date and time (year, month, day, hour, minute, second, fractions of a second) encoded according to ISO 8601 with the time zone set to UTC. |
| 2 | datetime-local This is a date and time (year, month, day, hour, minute, second, fractions of a second) encoded according to ISO 8601, with no time zone information. |
| 3 | date This is a date (year, month, day) encoded according to ISO 8601. |
| 4 | email It accepts only the email value. |
| 5 | url It accepts only the URL value. If you try to submit a simple text, it forces to enter only URL address either in http://www.example.com format or in http://example.com format. |
The placeholder attribute
Here is how to write the simple syntax for placeholder attribute:
<input type = "text" name = "search bar" placeholder = "This is a search bar"/>
The placeholder attribute is only supported by the newest versions of Mozilla, Safari and Chrome browsers only.
<!DOCTYPE HTML> <html> <body> <form action = "/cgi-bin/html5.cgi" method = "get"> Enter email : <input type = "email" name = "newinput" placeholder = "[email protected]"/> <input type = "submit" value = "submit" /> </form> </body> </html>
The autofocus attribute
HTML5 unveiled a new attribute called autofocus which can be used as follows:
<input type = "text" name = "search" autofocus/>
The autofocus attribute is only supported by the newest versions of Mozilla, Safari and Chrome browsers only.
<!DOCTYPE HTML> <html> <body> <form action = "/cgi-bin/html5.cgi" method = "get"> Enter email : <input type = "text" name = "newinput" autofocus/> <p>Try to submit using Submit button</p> <input type = "submit" value = "submit" /> </form> </body> </html>
The required attribute
You no longer need to use javascript for client-side input validation like empty text box would never be submitted because HTML5 was shippes with a new attribute called requred that would be used like below and would make a value required.
<input type = "text" name = "search" required/>
The required attribute is only supported by the newest versions of Mozilla, Safari and Chrome browsers only.
Jobs Vacancy
The Jobs portal provides you with real time Jobs Opening and Vacancy Updates curated globally. Start applying for your dream job with ease in any location you choose.
Learn More >>
CV Builder
The CV Builder provides you with comprehensive guide and proven steps to take in writing a professional CV including top CV templates to get you started quickly.
Learn More >>
