HTML5 Web Forms 2.0

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.
email 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 http://www.tutorials.freshersnow.com or http://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

WebForms 2.0

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>