HTML5 Web Forms 2.0: The extension of HTML 4 features is also called as Web Forms 2.0. In HTML5 the form elements & attributes describe a degree of semantic markup. In HTML 4 the slow scripting and styling are removed.
HTML5 Web Forms 2.0
The <input> elements in HTML5.
| 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 | 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, the day is encoded according to ISO 8601. |
| month | A date consists of a year and a month encoded according to ISO 8601. |
| week | A date consists 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 form at https://tutorials.freshersnow.com or https://tutorials.freshersnow.com |
HTML5 <output> Element
The new element which is introduced in HTML 5 <output> element is used to specify the multiple types of outputs like written by the script. It is also used for attributes to represent the relationship between the output element and other elements in the document which affect a calculation. The space-separated list of ID’s of other element is the value for this attribute.
The <output> Element Example
<!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>
The <output> Element Output
Web Form 2.0 Attributes
Placeholder Attribute
The place holder attribute is the new attribute which is introduced in HTML 5. The user can enter the entry field with the help of the place holder attribute in <input> and <textarea> tags. The text in place holder attribute cant hold carriage returns and line- feeds.
Placeholder Attribute Syntax
<input type=“text” name=“search” placeholder=“search the web”/>
Autofocus Attribute
The focus attribute is a simple and easy pattern programmed in javascript which is used while loading a document. It just only focuses on a particular form field.
Autofocus Attribute Syntax
<input type=“text” name=“search” autofocus/>
Required Attribute
The javascript validation can be done by the required attribute. The client-side validations are performed by java scripts only when an empty text box cant be submitted because of this required attribute.
Required Attribute Syntax
<input type=“text” name=“search” required>