New Form elements and attributes in HTML5

The new features added in HTML5 are not fully supported by all major browser, the browsers with the most support for HTML5 are: Opera, Chrome and Mozill Firefox.

HTML5 new Input types

HTML5 adds a number of new input types for form (datetime, datetime-local, date, month, week, time, number, range, email, url, search, and color), which are listed below:

    type="date" - Creates a date input control, such as a pop-up calendar, for specifying a date (year, month, day). The initial value must be provided in ISO date format.
<input type="date" name="set_date" value="2011-10-15" />
Date

    type="datetime" - Creates a combined date/time input field. The value is an ISO formatted date and time that is defined and submitted as UTC time.
<input type="datetime" name="dt" value="2011-06-14T01:26:32:00Z" />
Datetime

    type="datetime-local" - Creates a date/time input control, the same as "datetime", but assuming the time is in the local time zone. Initial values must be provided in ISO date/time format.
<input type="datetime-local" name="dtl" value="2012-05-23T13:44:16:00">

    type="month" - Creates a date input control (such as a pop-up calendar), for specifying a particular month in a year.
<input type="month" value="2012-09" name="mnt" />
Month

    type="week" - Creates a date input control (such as a pop-up calendar), for specifying a particular week in a year. Values are provided in ISO week numbering format.
<input type="week" name="weeks" value="2011-W34" />
Week

    type="time" - Creates a date input control for specifying a time (hour, minute, seconds, fractional_seconds).
<input type="time" name="currenttime" value="18:12:00" />
Time

    type="tel" - Creates an input field for entering and editing a telephone number.
<input type="tel" name="hometel" value="123-888-2012" />

    type="url" - is used for input fields that should contain a URL address. The value of the url field is automatically validated when the form is submitted (if it is not in proper URL format, return an error message).
<input type="url" name="site" size="25" value="http://coursesweb.net" />

    type="number" - is used to create input fields that should contain a numeric value. You can also set restrictions on what numbers are accepted, with the "min", "max" and "step" attributes.
<input type="number" name="points" min="5" max="80" />
Number

    type="range" - Creates a slider control that should contain a value from a range of numbers. The range starts at the value provided by the "min" attribute (0 by default) and ends at the value provided by the "max" attribute (100 by default).
<input type="range" name="val" min="1" max="10" />
Range

    type="email" - is used for input fields that should contain an e-mail address. The value of the email field is automatically validated when the form is submitted.
<input type="email" name="email" />

    type="search" - Creates a one-line text input box for entering a search query, like a site search.
<input type="search" name="srch" size="25" value="Search term" />

    type="color" - Creates a color well control for selecting a color value.
<input type="color" name="get_color" />
Color

New attributes for <form> added in HTML5


New input attributes

    autofocus - (autofocus="autofocus" in XHTML) - specifies that a field should automatically get focus when a page is loaded. It workks in all <input> fields.
Name: <input type="text" name="name1"  autofocus="autofocus" />

    form="form_id" - Explicitly associates the input control with the form which has id="form_id". With this method, the input control does not need to be a child of a form element. It works in all <input> fields.
<form action="script.php" method="post" id="idf">
 Name:<input type="text" name="fname" />
 <input type="submit" value="Send" />
</form>
E-mail: <input type="email" name="email" form="idf" />

    formaction="url" - Overrides the form "action" attribute, sending form-data to the specified "url".
    formenctype="content_type" - Overrides the form "enctype" attribute.
    formmethod="get | post | put | delete" - Overrides the form "method" attribute. The "put" and "delete" values are new in HTML5.
    formnovalidate - (formnovalidate="formnovalidate" in XHTML) - Overrides the form "novalidate" attribute.
    formtarget="target" - Overrides the form "target" attribute.
    - These Form override attributes are used only with a submit button (type "submit" or "image").
<form action="script.php" method="post" id="idf">
 E-mail: <input type="email" name="email" /><br />
 <input type="submit" value="Submit" /><br />
 <input type="submit" formaction="script_2.php" value="Submit to script_2" /><br />
 <input type="submit" formnovalidate="formnovalidate" value="Submit without validation" />
</form>

    height="pixels" - Specifies the height of the button image when the input type is set to "image".
    width="pixels" - Specifies the width of the button image when the input type is set to "image".
    - These attributes are used with input="image" only:
<input type="image" src="img_submit.gif" width="80" height="23" />

    list="id_datalist" - Indicates that the control has a list of predefined options for the user, which are provided by a datalist element. The value of the list attribute ("id_datalist") is the id of the associated <datalist>.
- It works with the following <input> types: text, search, url, tel, email, datepickers, number, range, color.
Website: <input type="url" list="sites" name="link" />
<datalist id="sites">
 <option label="CoursesWeb" value="http://coursesweb.net" />
 <option label="MarPlo" value="http://www.marplo.net" />
 <option label="W3Schools" value="http://www.w3schools.com" />
</datalist>

    max="number" - specifies the maximum value allowed for the input field. The "max" value must not be less than the "min" value.
    min="number" - specifies the minimum value allowed for the input field.
    step="any/number" - specifies the number intervals for the input field (if step="3", legal numbers could be -3,0,3,6, etc).
    - The "min", "max", and "step" attributes works with the following <input> types: date-pickers, number, range.
This code shows a field that accepts values between 1 and 10, with a step of 3 (legal numbers are 3, 6 and 9):
<input type="number" name="num" min="1" max="10" step="3" />

    multiple - (multiple="multiple" in XHTML) - Indicates the user is allowed to specify more than one value.
- It works with the following <input> types: email, file.
<input type="file" name="img" multiple="multiple" />

    pattern="regexp" - specifies a pattern (a regular expression) used to validate an input field. The "title" attribute can be used with pattern to provide a description of the expected format of the input.
- It works with the following <input> types: text, search, url, tel, email, password.
The code below shows a text field that can only contain five characters (letters and numbers only):
<input type="text" name="pass" pattern="[A-z0-9]{5}" title="Five characters: letters and numbers" />

    placeholder="text" - Provides a short hint or example to help the user enter the correct data. (for a longer description, use the "title" attribute).
The hint is displayed in the input field when it is empty, and disappears when the field gets focus.
- It works with the following <input> types: text, search, url, tel, email, password.
<input type="search" name="src"  placeholder="Search CoursesWeb" />

    required - (required="required" in XHTML) - indicates that an input field must be filled out before submitting.
- works with the following <input> types: text, search, url, tel, email, password, date-pickers, number, checkbox, radio, file.
<input type="text" name="name1" required="required" />

Other new Form elements in HTML5

<datalist> ... </datalist> tag

The datalist element should contain an "id" attribute and <option> ... </option> tag(s).
Creates a drop-down menu of suggestions (via the "option" element), providing an "auto-complete" function as the user types in the input field which use the "list" attribute to refer to the "id" of the datalist.
The <option> tag must have a "value" attribute.
Example:
Website: <input type="url" list="sites" name="link" />
<datalist id="sites">
 <option label="CoursesWeb" value="http://coursesweb.net" />
 <option label="MarPlo" value="http://www.marplo.net" />
 <option label="W3Schools" value="http://www.w3schools.com" />
</datalist>

<keygen /> tag

The keygen element is used to generate key pairs (one private and one public) to provide a secure way to authenticate users.
The private key is stored on the client, and the public key is sent to the server.
The browser support for this element is not good enough to be a useful security standard.
Example:
<form action="script.php" id="idf" method="post">
 Username: <input type="text" name="user" />
 Encryption: <keygen name="security" />
 <input type="submit" value="Submit" />
</form>

<output> </output> tag

Represents the result of a calculation, most likely the output of a script.
Total: <output name="total" onformchange="calc()">0</output>
- Here, the "calc()" function can be part of a JavaScript script.