Login

Username:

Password: 

Join us Now |  Forgot Password? | Forgot UserName?

HTML

Learn step by step



HTML5 - Web Forms 2.0

Web Forms 2.0 is an extension HTML4 form features. As compared to HTML4, HTML5 Form elements and attributes provide a greater degree of semantic mark-up and eases styling and scripting work. Lets compare some of the elements in HTML5 and HTML4

The <input> element in HTML4

HTML4 input elements had the type attribute to specify the data type.HTML4 has following types:

Type Description
textA text field not having line breaks.
password A specialized password field free of line breaks.
checkbox A multiple value representation using list and checks.
radioAn single value representation like enumerated value.
submit A button which submits the form.
fileAn arbitrary file with a MIME type and with file name as optional.
image An element describing coordinates for an image.
hidden An arbitrary string that is not displayed.
select An enumerated value as in dropdown.
textarea A free-form text field, with no line break restrictions.
button A control that invokes click event.

Below is the simple example of using label, radio button, and submit button:


...
<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="sex" value="male"> Male<br>
<input type="radio" name="sex" value="female"> Female<br>
<input type="submit" value="send"> <input type="reset">
</p>
</form>
...
The HTML5 <input> element

In addition to above mentioned attributes, HTML5 input elements introduced several new values for the type attribute which are listed below.

Type Description
datetimeA date and time (year, month, day, hour, minute, second, milli second) encoded as per ISO 8601 with UTC time zone.
datetime-localA date and time (year, month, day, hour, minute, second, , milli second) encoded as per ISO 8601, without time zone information.
dateA date (year, month, day) encoded as per ISO 8601.
monthA date consisting of a year and a month encoded as per ISO 8601.
weekA date consisting of a year and a week number encoded as per ISO 8601.
timeA time (hour, minute, seconds, fractional seconds) encoded as per ISO 8601.
numberIt accepts only numerical value. The "step" attribute defines precision, defaulting to 1.
rangeThe range type is used to define a range of numbers.
emailThis accepts value in email format like xyz@gmail.com.
urlThis field accepts only url values like http://tuton.orianaitsolutions.com.
The <output> element

HTML5 introduced a new element <output> which represents output like output from a script.

You can use the for attribute to specify a relationship between the output element and other elements in the document(input element as parameters) that affected the calculation. The value of the "for" attribute is a space-separated list of IDs of other elements.

The placeholder attribute

HTML5 introduced a new attribute called placeholder. This attribute on <input> and <textarea> elements provides a default text for the elements. The placeholder text must not contain line feeds or carriage returns.

Here is the simple syntax for placeholder attribute:

<input type="text" name="name" placeholder="Enter Name"/>

This attribute is supported by latest versions of Mozilla, Safari and Chrome browsers only.

The autofocus attribute

This helps on setting default focus on a field on initial load.

HTML5 introduced a new attribute called autofocus which would be used as follows:

<input type="text" name="name" autofocus/>

This attribute is supported by latest versions of Mozilla, Safari and Chrome browsers only.

The required attribute

This attribute helps in validating for blank or null values for a field:

<input type="text" name="name" required/>


Related Videos