Learn 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:
|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.|
The <input> element in HTML5
Apart from the above mentioned attributes, HTML5 input elements introduced several new values for the type attribute. These are listed below.
|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.|
|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 firstname.lastname@example.org format.|
|url||This accepts only URL 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.
The required attribute
<input type="text" name="search" required/>
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"/>
The autofocus attribute
HTML5 introduced a new attribute called autofocus which would be used as follows:
<input type="text" name="search" autofocus/>