Copyright © tutorialspoint.com

# HTML5 - Web Forms 2.0

Web Forms 2.0 is an extension to the forms features found in HTML4. Form elements and attributes in HTML5 provide a greater degree of semantic mark-up than HTML4 and remove a great deal of the need for tedious scripting and styling that was required in HTML4.

# The <input> element in HTML4

HTML4 input elements use the type attribute to specify the data type.HTML4 provides following types:

Type | Description
--- | ---
text | A free-form text field, nominally free of line breaks.
password | A free-form text field for sensitive information, nominally free of line breaks.
checkbox | A set of zero or more values from a predefined list.
radio | An enumerated value.
submit | A free form of button initiates form submission.
file | An arbitrary file with a MIME type and optionally a file name.
image | A coordinate, relative to a particular image's size, with the extra semantic that it must be the last value selected and initiates form submission.
hidden | An arbitrary string that is not normally displayed to the user.
select | An enumerated value, much like the radio type.
textarea | A free-form text field, nominally with no line break restrictions.
button | A free form of button which can initiates any event related to button.

Following is the simple example of using labels, radio buttons, and submit buttons:

    ...
    <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 <input> element in HTML5

Apart from the above mentioned attributes, HTML5 input elements introduced sevral new values for the type attribute. These are listed below.

NOTE: Try all the following example using latest version of Opera browser.

Type | Description
--- | ---
datetime | A date and time (year, month, day, hour, minute, second, fractions of a second) encoded according to ISO 8601 with the time zone set to UTC.
datetime-local | A date and time (year, month, day, hour, minute, second, fractions of a second) encoded according to ISO 8601, with no time zone information.
date | A date (year, month, day) encoded according to ISO 8601.
month | A date consisting of a year and a month encoded according to ISO 8601.
week | A date consisting of a year and a week number encoded according to ISO 8601.
time | A time (hour, minute, seconds, fractional seconds) encoded according to ISO 8601.
number | This accepts only numerical value. The step attribute specifies the precision, defaulting to 1.
range | The range type is used for input fields that should contain a value from a range of numbers.
email | This accepts only email value. This type is used for input fields that should contain an e-mail address. If you try to submit a simple text, it forces to enter only email address in email@example.com format.
url | This accepts only email value. This type is used for input fields that should contain a URL address. If you try to submit a simple text, it forces to enter only URL address either in http://www.example.com format or in http://example.com format.

# The <output> element

HTML5 introduced a new element <output> which is used to represent the result of different types of output, such as output written by a script.

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

To learn this concept - Do Online Practice.

# The placeholder attribute

HTML5 introduced a new attribute called placeholder. This attribute on <input> and <textarea> elements provides a hint to the user of what can be entered in the field. The placeholder text must not contain carriage returns or line-feeds.

Here is the simple syntax for placeholder attribute:

    <input type="text" name="search" placeholder="search the web"/>

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

To learn this concept - Do Online Practice.

# The autofocus attribute

This is a simple one-step pattern, easily programmed in JavaScript at the time of document load, automatically focus one particular form field.

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

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

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

To learn this concept - Do Online Practice.

# The required attribute

Now you do not need to have javascript for client side validations like empty text box would never be submitted because HTML5 introduced a new attribute called required which would be used as follows and would insist to have a value:

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

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

To learn this concept - Do Online Practice.

Copyright © tutorialspoint.com