Total Pageviews

Friday, March 27, 2015

html5 form controls , Seven HTML5 New Form Conrol you must know

html5 form controls Example, html5 new form elements, Html5 URL control, Html5 tel control, Html5 email control, Html5 search control, Html5 color control, Html5 Range control, Html5 Number control, Html5 date control, Html5 meter control, Html5 progress control,

_____________________________________________   

To execute this control use latest browser i suggest :chrome latest version

1.Html5 url Control:

For entering a URL. It must start with a valid URI scheme, (for example http://, ftp:// or mailto:).

 Example: url<input type="url">



2.Html5 Range Control:

For number input, but unlike the number input type, the value is less important. It is displayed to the user as a slider control. The Range type input has a few interesting attributes which you may want to learn. 
 
  Example: url<input type="range"> 

Attribute
Descriptions
value
Value is a common attribute of "Input" element. The value can be any valid floating point number, not neccessary must be an integer number. Default value is minimum value plus half of the maximum value.
min
Minimum value of the range. Default minimum value is 0.
max
Maximum value of the range. Default maximum value is 100.
step
This is Step scale factor of the slider, default value is 1 and only allowing integer number unless minimum value is non integer number.
list
List is the DataList in the past lesson. Datalist can be incorporated into Range type input, however, none of the browser has implemented this feature as of writing.

3.Html5 meter Control:

 to display percentage of task done or for rating purpose this control is used

   Example:  

   meter  <input type="meter" max=10 min=0 value=8> 8 of 1o </meter>  

Attributes
Descriptions
value
You need to specify a value in number in order to use "meter" element. This is an mandatory attribute, No excuse! The number can be integer or floating point number.
min
Minimum value of meter element. If unspecified, it will be Zero (0).
max
Maximum value of meter element. If unspecified, it will be One (1).
low
This is optional unless you wish to indicate the low value of the range.
high
This is optional unless you wish to define high value of the range.
optimum
This is completely optional. This attribute is for specifying an optimum point of a range.


4.Html5 search Control:

A text input field styled in a way that is consistent with the platform's search field.

 

   Example:  search<input type="search">

 

5.Html5 color Control: For choosing colors.


Example: Color<input type="color">

 

6.Html5 Number Control: For numeric input, can be any rational integer or float value.

 

Example: Number <input type="Number">

 

7.Html5 Date Control: 



For entering a date (only) with no time zone provided.
Example:<input type="date" value="2011-03-13"/>

    1.   Date (<input type="date"/>)-you can select single date 


     2.   Week (<input type="week"/>)-you can select entire week

     3.   Month (<input type="month"/>)-you can select entire month


       4.   Time (<input type="time"/>)-to enter a time 



      5.   Date and Time (<input type="datetime"/>)-to enter date with time
      6.   Local Date and Time (<input type="datetime-local"/>)-to enter local date time




Attributes
Descriptions
value
Value is the default value of the input box when a page is first loaded. This is a common attribute for <input> element regardless which type you are using.
min
Minimum Date or time
max
Maximum Date or time
step
Step scale factor. Different type of input has its own default "step" value.
·         Date - default is 1 day
·         Week - default is 1 week
·         Month - default is 1 month
·         Time - default is 1 minute
·         DateTime - default is 1 minute
·         Local DateTime - default is also 1 minute

7.Html5 progress Control: 

The new "progress" element appears to be very similar to the meter  element. It is created to indicate progress of a specific task.

Example:

<progress value="60" max="100">60%</progress> 


8.Html5 email Control:  

For entering email addresses. By default it will only take one, but if the multiple attribute is provided, a comma separated list of email addresses is valid.


Example:

email <input type="email">


_____________________________________________

html5 form controls Example, html5 new form elements, Html5 URL control, Html5 tel control, Html5 email control, Html5 search control, Html5 color control, Html5 Range control, Html5 Number control, Html5 date control, Html5 meter control, Html5 progress control,

Popular Posts

Follow by Email