HTML5 Web Forms 2.0

Introduction to HTML5 Web Forms 2.0

  • The web forms 2.0 are an extension to the features of the forms found in HTML4.
  • The form elements and attributes in HTML5 provide a greater degree of semantic mark-up.
  • A great deal of the tedious scripting and styling required by HTML4 is removed.

<input> elements in HTML5

Some new type attributes that are added to the  <input> element are as follows:

TypeDescription
datetimeDate and time i.e. year, month, day, hour, minute, second, fractions of a second are all encoded according to the ISO 8601 with the timezone set to UTC.
datetime-localDate and time i.e. year, month, day, hour, minute, second, fractions of a second are all encoded according to the ISO 8601 without timezone information.
dateDate i.e. year, month, day is encoded according to ISO 8601.
monthA date consist of a year and a month encoded according to ISO 8601.
weekA date consist of a year and a week number is encoded according to ISO 8601.
timeIt is time i.e. hour, minute, seconds, fractional seconds encoded according to ISO 8601.
numberIt accepts only a numerical value. By default the step attribute specifies the precision to 1.
rangeIt is used for input fields that contain a value from a range of numbers.
emailIt accepts only the email value. It is used for input fields that contain an e-mail address.
Example: if anyone tries to enter simple text it will not accept it and force to enter only the email address in the format admin@tutorialride.com
urlIt accepts only the URL value. It is used for input fields that contain a URL address.
Example: if anyone tries to enter simple text it will not accept it and force to enter only the URL address in the format http://www.tutorialride.com or http://tutorialride.com

<output> element

  • The  <output> element is a new element introduced in HTML5 which is used for representing the result of the different types of outputs such as the ones written by a script.
  • For attribute is used for specifying a relationship between the output element and other elements in the document that affect the calculation.
  • Value of this for attribute is a space-separated list of IDs of other elements.

Example : Demonstrating the  <output> element

<!DOCTYPE HTML>
<html>
<head>
     <script type="text/javascript">
          function answer()
          {
               a = document.forms["myform"]["newinput"].value;
               document.forms["myform"]["result"].value=a;
          }
     </script>
</head>
     <body>
          <form action="/cgi-bin/html5.cgi" method="get" name="myform">
                 Enter any value :  <input type="text" name="newinput" />
                 <input type="button" value="Result"  onclick="answer();" />
                 <output name="result"> </output>
          </form>
     </body>
</html>


Output:
output element

Web Form2.0 Attributes

1. placeholder attribute
  • It is a new attribute introduced in HTML5.
  • The placeholder attribute on  <input> and the  <textarea> elements help the user as to what can be entered in the field.
  • The text of placeholder cannot contain carriage returns or line-feeds.
Syntax:
<input type=“text” name=“search” placeholder=“search the web”/>

2. autofocus attribute
It is a simple one-step pattern which is easily programmed in JavaScript when the document loads. It automatically focuses only on one particular form field.

Syntax:
<input type=“text” name=“search” autofocus/>

3. required attribute
  • The required attribute is used in place of the Javascript validations.
  • Javascript is now required for client side validations only where an empty text box can never be submitted because of this attribute.
Syntax:
<input type=“text” name=“search” required>