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