Label & Text Elements
These elements are common
elements for any web page. Label is used to title the text field and Text
element provides input area to user.
Example:
<label
for="textinput">Normal input box :</label><input required
id="textinput" type="text" value="a 'normal' input
box" />
Attributes:
Required: used to popup message
when user clicks on submit button without entering text inside the text field.
Value:
sets/returns value of text field.
Checkbox Element
While feature is having more
than one value in that case, checkbox element is used on the web page.
<fieldset>
<legend>Interest</legend>
<ul>
<li>
<input
id="chksports" type="checkbox" checked/><label
for="chksports">Sports</label>
</li>
<li>
<input
id="chkentertainment" type="checkbox"/><label
for="chkentertainment">Entertainment</label>
</li>
<li>
<input
id="chkpolitics" type="checkbox"/><label
for="chkpolitics">Politics</label>
</li>
</ul>
</fieldset>
Attributes:
While using checkbox, it will
be in unchecked mode but if user want to mark checked then there are attributes
as checked / unchecked. In above
example, we can see the sports checkbox is marked as checked.
Radio Element
Radio element allows user to
select one of the options from option list. E.g. sex.
<fieldset>
<legend>Sex</legend>
<ul>
<li>
<input
name="sex" id="radiomale" type="radio" /><label
for="radio">Male</label>
</li>
<li>
<input
name="sex" id="radiofemale"
type="radio"/><label for="radio">Female</label>
</li>
</ul>
</fieldset>
While executing above code,
user can select either male or female from the available options. No element
will be selected first time, but if user wants to keep Male option selected
then user can apply checked attribute.
There is checked /unchecked attribute.
By default, it is unchecked.
File Upload element
It
is used while uploading file from client machine to server.
<fieldset>
<legend>Upload</legend>
<ul>
<li>
<label
for="file">Upload</label><input type="file"
id="file" />
</li>
</ul>
</fieldset>
Using above code, user will be
able to select a file from local machine to upload. By default, user is allowed
to upload single file. If user wants to upload more than one files then user
needs to use “multiple” attribute in input tag. It will automatically change
the caption of button from “Choose file” to “Choose files” and then user can
select more than one file by using control or shift keys from keyboard.
Password Element
It
is used when user wants to enter password. It replaces each character in black
dot. Even user can not copy the content of this element.
<fieldset>
<legend>Password</legend>
<ul>
<li><label
for="password">Password</label> <input
id="password"
type="password"
value="mypassword" /></li>
</ul>
</fieldset>
TextArea Element
Text
element is only used to enter single line text but if user wants to enter
multiple lines then you can use TextArea element.
<fieldset>
<legend>TextArea</legend>
<ul>
<li><label
for="address">Address</label><textarea
id="textarea" rows="4" cols="40">This is a
textarea</textarea></li>
</ul>
</fieldset>
Attributes:
“Rows” attribute used for textarea would be displayed in how many
rows and “Cols” attribute used for
characters in single row.
Select Element (Dropdownlist)
Select
element is used to select one item from the list.
<fieldset>
<legend>TextArea</legend>
<ul>
<li><label
for="select">Select</label>
<select
id="select" >
<option>Option
1</option>
<option>Option
2</option>
<option>Option
3</option>
<option>Option
4</option>
</select></li>
</ul>
</fieldset>
Select Element (ListBox)
If
user wants to display values in list format then the same select element is
used with “Multiple” attribute.
<fieldset>
<legend>ListBox</legend>
<ul>
<li><label
for="select">Select</label>
<select
id="select" multiple >
<option>Option
1</option>
<option>Option
2</option>
<option>Option
3</option>
<option>Option
4</option>
</select></li>
</ul>
</fieldset>
From above list, user can
select multiple values from the list by using shift key or control key.
Shift key is used to select range and control key is used to select random
values from the list.
Button Element
There
are three types of button, (1) normal button (2) submit button while clicking
on this button entered data will be posted and (3) reset button, to clear the
values of entered elements.
<fieldset>
<legend>Button</legend>
<ul>
<li><input
type="submit" value="Submit" /></li>
<li><input
type="reset" value="Reset" /></li>
<li><input
type="button" value="Ok" /></li>
</ul>
</fieldset>
Email Element
HTML5 introduces new element
for email address. Browser itself validates value of element. In old days, we
need to write script to mark element mandatory but HTML5 provides us “Required” attribute, it will check the
value of element when user submits data and provide appropriate message (refer
below image).
<fieldset>
<legend>Email</legend>
<ul>
<li>
<label
for="email">Email</label>
<input
required type="email" id="email" name="email"
/>
</li>
<li><input
type="submit" value="Submit" /></li>
</ul>
</fieldset>
Tel Element
To enter telephone number,
there is element called “tel”. It is actually a free text field like text
element. It allows entering sign, number and character in text field.
<fieldset>
<legend>Telephone
number</legend>
<ul>
<li>
<label
for="tel">Telephone number</label>
<input
required type="tel" id="tel" name="tel" />
</li>
<li><input
type="submit" value="Submit" /></li>
</ul>
</fieldset>
URL element
It allows user to enter only
URL of web site in the text field. “Required” attribute will validate entered
values against the pattern of URL as well.
<fieldset>
<legend>Website</legend>
<ul>
<li>
<label
for="url">Website</label>
<input
required type="url" id="url" name="url" />
</li>
<li><input
type="submit" value="Submit" /></li>
</ul>
</fieldset>
Search Element
It allow to user to provide
search interface. “Results” attribute will assist user to select items from the number
which was mentioned for results attribute.
<fieldset>
<legend>Search</legend>
<ul>
<label
for="search">Search term</label>
<input
required type="search" results="4" id="search"
name="search" />
<li><input
type="submit" value="Submit" /></li>
</ul>
</fieldset>
DateTime Element
Chrome
version 24.xx.xxx does not support this element. You can verify the
functionality of it by using latest version of Opera.
It
will provide the readymade calendar control and also request time in UTC format.
Time format will in 24 hours.
<fieldset>
<legend>DateTime</legend>
<ul>
<li>
<label
for="datetime">Select Date Time: </label><input
type="datetime" id="datetime" min=
"2013-01-01"
max="2014-01-01"/>
</li>
<li><input
type="submit" value="Submit" /></li>
</ul>
</fieldset>
Datetime-local Element
It you want date & time in
local format then you can use datetime-local element of HTML5.
In
which UTC will not be appear on right side of element.
<fieldset>
<legend>DateTime</legend>
<ul>
<li>
<label
for="datetime">Select Date Time: </label><input
type="datetime" id="datetime"
/>
</li>
<li><input
type="submit" value="Submit" /></li>
</ul>
</fieldset>
<fieldset>
<legend>DateTime-local</legend>
<ul>
<li>
<label
for="datetime">Select Date Time: </label><input
type="datetime-local" id="datetime"
/>
</li>
<li><input
type="submit" value="Submit" /></li>
</ul>
</fieldset>
Date Element
It
provides only date. This will work on latest version of chrome and Opera. User can
set min and max date range as well.
<fieldset>
<legend>Date</legend>
<ul>
<li>
<label
for="date">Select Date : </label><input
type="date" id="date" min=
"2013-01-01"
max="2014-01-01"/>
</li>
<li><input
type="submit" value="Submit" /></li>
</ul>
</fieldset>
Time Element
It
provides only time. This will work on latest version of chrome and Opera.
<fieldset>
<legend>Time</legend>
<ul>
<li>
<label
for="time">Select Time : </label><input
type="time" id="time"
/>
</li>
<li><input
type="submit" value="Submit" /></li>
</ul>
</fieldset>
Month Element
To select particular week of
year, HTML5 provides week element. This will not work on chrome 24.x.xxx
version. Please try below code with latest version of Opera. Value will be in
YYYY-MM format.
<fieldset>
<legend>Month</legend>
<ul>
<li>
<label
for="month">Select Month : </label><input
type="month" id="month"
/>
</li>
<li><input
type="submit" value="Submit" /></li>
</ul>
</fieldset>
Week Element
To select particular week of
year, HTML5 provides week element. This will not work on chrome 24.x.xxx
version. Please try below code with latest version of Opera. Value will be in
YYYY-W00 format.
<fieldset>
<legend>Week</legend>
<ul>
<li>
<label
for="week">Select Week : </label><input
type="week" id="week"
/>
</li>
<li><input
type="submit" value="Submit" /></li>
</ul>
</fieldset>
Number Element
The number input type is used
to enter a number. It accepts only numbers otherwise returns validation error. It
is having attribute of min, max and step. Step allows you to specify the
increment value. Chrome allows decimal incremental value in step whereas Opera
does not.
<fieldset>
<legend>Number
Picker</legend>
<ul>
<li>
<label
for="Number">Select Number : </label><input required
type="number" id="number" min="1"
max="10" step=".1"/>
</li>
<li><input
type="submit" value="Submit" /></li>
</ul>
</fieldset>
Range & Output Element
The range input type generates
slider control which can be used for volume control, it is having min, max and step attributes.
Output element will display the current value of slider.
<fieldset>
<legend>Slider</legend>
<ul>
<li>
<label
for="slider">Select value : </label><input required
type="range" id="range" min="1"
max="10" step=".5"/> <output
onforminput="value=range.value"/>
</li>
<li><input
type="submit" value="Submit" /></li>
</ul>
</fieldset>
Color Element
Excellent element provided by
HTML 5 is color. User does not need to write code for this, just user needs to
use color element in input tag. You can run below code in latest version of
chrome and opera. Both will display color picker differently.
<fieldset>
<legend>Color</legend>
<ul>
<li>
<label
for="color">Select color : </label><input required
type="color" id="color"
/>
</li>
<li><input
type="submit" value="Submit" /></li>
</ul>
</fieldset>
