New Form elements and attributes in HTML5

Html Course

• New attributes for <form> added in HTML5
• New input attributes
• Other new Form elements 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.
    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.
    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.
    type='month' - Creates a date input control (such as a pop-up calendar), for specifying a particular month in a year.
    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.
    type='time' - Creates a date input control for specifying a time (hour, minute, seconds, fractional_seconds).
    type='tel' - Creates an input field for entering and editing a telephone number.
    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).
    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.
    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).
    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.
    type='search' - Creates a one-line text input box for entering a search query, like a site search.
    type='color' - Creates a color well control for selecting a color value.

New attributes for <form> added in HTML5

• autocomplete='on | off' - Allows the browser to fill in a field automatically (on) or requires the user to enter the information every time (off).
  - It works with <form>, and the following <input> types: text, search, url, tel, email, password, date-pickers, range, color.

  <form action='script.php' method='post' autocomplete='on' id='idf'>
   Name:<input type='text' name='fname' />
   <input type='submit' value='Send' />
  </form>

  
  
• novalidate - Indicates that the form or input field should not be validated when submitted.
  - It works with: <form> and the following <input> types: text, search, url, tel, email, password, date-pickers, range, color.

  <form action='script.php' id='idf' novalidate='novalidate'>
   E-mail: <input type='email' name='email' />
   <input type='submit' value='Send'/>
  </form>

New input attributes

    autofocus - specifies that a field should automatically get focus when a page is loaded. It workks in all <input> fields.
    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 - 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:
    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.     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):
    multiple - Indicates the user is allowed to specify more than one value.
- It works with the following <input> types: email, file.
    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):
    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.
    required - 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.

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:

<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:

<output> </output> tag

Represents the result of a calculation, most likely the output of a script. - Here, the calc() function can be part of a JavaScript script.

<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>

.some_class {
  display: list-item;
}

var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}

$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net