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:| Type | Description |
|---|---|
| datetime | Date 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-local | Date 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. |
| date | Date i.e. year, month, day is encoded according to ISO 8601. |
| month | A date consist of a year and a month encoded according to ISO 8601. |
| week | A date consist of a year and a week number is encoded according to ISO 8601. |
| time | It is time i.e. hour, minute, seconds, fractional seconds encoded according to ISO 8601. |
| number | It accepts only a numerical value. By default the step attribute specifies the precision to 1. |
| range | It is used for input fields that contain a value from a range of numbers. |
| It 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 | |
| url | It 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:
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.
<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.
<input type=“text” name=“search” required>
