Monday, May 14, 2012

HTML5 Range Control


This is the another input type introduced in HTML5 control is range. Its acting like volume or percentage. Your can drag the point and set the value.

0<input type="range" name="percentage" value="0" oninput="x.value=parseInt(percentage.value)" /><output name="x">0</output>

HTML5 Input Controls: Advanced Controls

Date list option in HTML5. Its used for auto complete text field. Your values given in datalist tag. These values are linked with list="browsers"

Browser: <input name="browsers" list="browsers" required="required" />

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

HTML5 Input Controls


<form method="post">

Email: <input type="email" name="email" value="" required="required">
URL: <input type="url" name="url" value="" required="required">
Telephone: <input type="tel" name="tel" value="" required="required">


<input type="submit" value="Submit" />
</form>


The above controls are introduced in HTML5 input controls. If we omit required attributes, it may be empty. Validation also will happen while submit a form.