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