Enroll Course

100% Online Study
Web & Video Lectures
Earn Diploma Certificate
Access to Job Openings
Access to CV Builder



Online Certification Courses

HTML5 - Web Forms 2.0

HTML5 Course. HTML5 Certification, HTML5 Training, HTML5 Tutorials. 
"
"

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.

Corporate Training for Business Growth and School