Android Spinner (Drop down list) - Simple Example

Below is the simple example of Spinner element in Android:

There are three steps to generate Spinner control in Android:

• Define list of items in strings.xml file using "string-array".
• Assign string array to "entries" property of Spinner control.
• "getSelectedItem()" at code base will give selected item from the list.

Strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">Practicework</string>
    <string name="action_settings">Settings</string>
<string name="btn1">Check Status</string>

<string-array  name="countryname">
<item>Australia</item>
<item>New Zealand</item>
<item>England</item>
<item>Germany</item>
<item>France</item>    
        <item>India</item>
<item>Sri Lanka</item>
</string-array>
</resources>

activity_practice.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

android:orientation="vertical"

android:background="#d0d0d0"

    tools:context=".PracticeActivity" >

<Spinner 

   android:id="@+id/spnr1"

   android:layout_width="match_parent"

   android:layout_height="wrap_content"

   android:entries="@array/countryname"

   android:layout_margin="20dp"

   />

    <Button

        android:id="@+id/btn1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="@string/btn1"

        android:layout_margin="20dp"

        />

</LinearLayout>

PracticeActivity.java

package com.agilissystems.practicework;

import android.os.Bundle;

import android.app.Activity;

import android.view.Menu;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.Button;

import android.widget.Spinner;

import android.widget.Toast;

public class PracticeActivity extends Activity implements OnClickListener {

Button oBtn1;

Spinner oSpnr1;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_practice);

        

        oBtn1 = (Button) findViewById(R.id.btn1);

        oSpnr1 = (Spinner) findViewById(R.id.spnr1);

        oBtn1.setOnClickListener(this);

    }

    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

        // Inflate the menu; this adds items to the action bar if it is present.

        getMenuInflater().inflate(R.menu.practice, menu);

        return true;

    }

@Override

public void onClick(View arg0) {

// TODO Auto-generated method stub

if (arg0.getId() == R.id.btn1){

StringBuffer oStr1 = new StringBuffer();

oStr1.append(oSpnr1.getSelectedItem().toString());

Toast.makeText(this, "Country : " + oStr1.toString(), Toast.LENGTH_LONG).show();

}

}

}

First, select the country name from the spinner control and then click on Button "Check Status" will toast name of selected country.

ToggleButton in Android

ToggleButton allows to select either states of the action. See below code.

activity_practice.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
android:orientation="vertical"
android:background="#d0d0d0"
    tools:context=".PracticeActivity" >

    <ToggleButton 
        android:id="@+id/toggle1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        />

    <ToggleButton 
        android:id="@+id/toggle2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textOn="Turn On"
        android:textOff="Turn Off"
        android:layout_margin="20dp"
        />
    
    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/btn1"
        android:layout_margin="20dp"
        />
</LinearLayout>

PracticeActivity.java

package com.agilissystems.practicework;

import android.os.Bundle;

import android.app.Activity;

import android.view.Menu;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.Button;

import android.widget.Toast;

import android.widget.ToggleButton;

public class PracticeActivity extends Activity implements OnClickListener {

ToggleButton oToggleB1, oToggleB2 ;

Button oBtn1;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_practice);

        oToggleB1 = (ToggleButton) findViewById(R.id.toggle1);

        oToggleB2 = (ToggleButton) findViewById(R.id.toggle2);

        

        oBtn1 = (Button) findViewById(R.id.btn1);

        oBtn1.setOnClickListener(this);

    }

    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

        // Inflate the menu; this adds items to the action bar if it is present.

        getMenuInflater().inflate(R.menu.practice, menu);

        return true;

    }

@Override

public void onClick(View arg0) {

// TODO Auto-generated method stub

if (arg0.getId() == R.id.btn1){

StringBuffer oStr1 = new StringBuffer();

oStr1.append("\nToggle 1 : " + oToggleB1.getText().toString());

oStr1.append("\nToggle 2 : "+ oToggleB2.getText().toString());

Toast.makeText(this, "State : " + oStr1.toString(), Toast.LENGTH_LONG).show();

}

}

    

}

Strings.xml

<?xml version="1.0" encoding="utf-8"?>

<resources>

    <string name="app_name">Practicework</string>

    <string name="action_settings">Settings</string>

<string name="btn1">Check Status</string>

</resources>

When we add toggle button in the code, it will give ON of OFF state by default which you can see in the first toggle button. But in most of the cases, we need to display different text for ON or OFF state, which we can achieve through textOn and textOff attributes of ToggleButton which are highlighted in above code. getText() method will return the current state of ToggleButton.

Edit Text - its Features & Key Event handling

activity_practice.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

android:orientation="vertical"

android:background="#d0d0d0"

    tools:context=".PracticeActivity" >

<EditText 

   android:id="@+id/edittxt1"

   android:layout_width="match_parent"

   android:layout_height="wrap_content"

   android:layout_margin="20dp"

   />

</LinearLayout>

Practiceactivity.java

package com.agilissystems.practicework;

import android.os.Bundle;

import android.app.Activity;

import android.view.Menu;

public class PracticeActivity extends Activity {

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_practice);

        

    }

    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

        // Inflate the menu; this adds items to the action bar if it is present.

        getMenuInflater().inflate(R.menu.practice, menu);

        return true;

    }

  

}

Strings.xml

<?xml version="1.0" encoding="utf-8"?>

<resources>

    <string name="app_name">Practicework</string>

    <string name="action_settings">Settings</string>

</resources>

Above code will provide the simple edit box to enter the text. There is no heading for the text which might misguide the use. so Android provides a attributed called hint. Add below line in "Strings.xml" file.

<string name="txt1">Enter Value</string>

and below line to edittext element of activity_practice.xml file.

        android:hint="@string/txt1"

It will show you "Enter Value" text in the edit text field while it is run.

When user runs the application, it will show the default keyboard. although Android provides different types of keyboards to fulfill user's requirements like to enter numberic values, user should have numberic keyboard rather than text same as for phone number, email, web site URL etc. to achieve, Android provides a properties like inputType. Add below line to edittext element in activity_practice.xml file.

android:inputType="number"

It will show only number keyboard and android:inputType="phone" will show phone keyboard. 

Below source code explains about the handling of Key event. There are no changes in layout and string files only in the code base file. the updated code is given below.

PracticeActivity.java

package com.agilissystems.practicework;

import android.os.Bundle;

import android.app.Activity;

import android.util.Log;

import android.view.KeyEvent;

import android.view.Menu;

import android.view.View;

import android.view.View.OnKeyListener;

import android.widget.EditText;

import android.widget.Toast;

public class PracticeActivity extends Activity implements OnKeyListener {

EditText oET1;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_practice);

        oET1 = (EditText) findViewById(R.id.edittxt1);

        oET1.setOnKeyListener(this);

    }

    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

        // Inflate the menu; this adds items to the action bar if it is present.

        getMenuInflater().inflate(R.menu.practice, menu);

        return true;

    }

@Override

public boolean onKey(View v, int keyCode, KeyEvent event) {

// TODO Auto-generated method stub

if (v.getId() == R.id.edittxt1){

if (event.getAction() == KeyEvent.ACTION_DOWN && keyCode == KeyEvent.KEYCODE_ENTER)

Toast.makeText(this, oET1.getText().toString() , Toast.LENGTH_LONG).show();

return true;

}

else

return false;

}

   

}

Above code shows that whatever the text entered into the edit text field will be toasted while user taps on "Enter" button from key pad.

Difference Between Margin and Padding attributes

Let's start with example.

activity_practice.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
android:orientation="vertical"
android:background="#d0d0d0"
    tools:context=".PracticeActivity" >

<Button 
   android:id="@+id/btn1"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="@string/btn1"
   />


</LinearLayout>

PracticeActivity.java

package com.agilissystems.practicework;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.Toast;

public class PracticeActivity extends Activity implements OnClickListener {

private Button oBtn1;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_practice);
        
        oBtn1 = (Button) findViewById(R.id.btn1);

        oBtn1.setOnClickListener(this);

    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.practice, menu);
        return true;
    }


@Override
public void onClick(View v) {
// TODO Auto-generated method stub

switch (v.getId())
{
case R.id.btn1:
Toast.makeText(this, "You clicked on Button 1 !!!", Toast.LENGTH_LONG).show();
break;


}
}
    

}

Strings.xml

<?xml version="1.0" encoding="utf-8"?>

<resources>

    <string name="app_name">Practicework</string>

    <string name="action_settings">Settings</string>

<string name="btn1">Button 1</string>

</resources>

When you run the above application will place the button element at left top corner of the screen. Margin attribute allows spacing surrounding the element. Add below line to button element of activity_practice.xml file.

android:layout_margin="20dp"

will add 20dp spacing surrounding the button element. but if you want to apply the spacing to specific side(s) then there are attributes called layout_margintop, layout_marginbottom, layout_marginleft and layout_marginright.

Now, we need to apply spacing surrounding the text of the button then there is attribute called "padding", add below line to button element.

android:padding="40dp"

It will add 40dp spacing to all side of text inside the button. there are other attributes like paddingLeft, paddingRight, paddingTop, paddingBottom, paddingStart, paddingEnd which will add spacing to specif side of the text.

Hope, now you are clear about the difference between margin and padding attributes.

 

Difference between Gravity and Layout_Gravity

Many android developers are asking me the difference between the properties like Gravity and Layout_Gravity. Below example will explain the differences.

In simple term, Gravity is related to position of the content of the view whereas Layout_gravity is related to the position of the view in its parent element.

You can easily observe that if you want to check the usage of Layout_gravity then you need to make sure that respective view width should be smaller than width of parent element. (check Btn1 attributes).

As i mentioned, Gravity is applied to content of the view. check the attributes of Btn2. Gravity attribute allows to align the text of the button within the button area. But ensure that the width of the view should be wider than text.

activity_practice.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
android:orientation="vertical"

    tools:context=".PracticeActivity" >

<Button 
   android:id="@+id/btn1"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="@string/btn1"
   android:layout_margin="40dp"
   android:layout_gravity="right"
   android:padding="20dp"
   />

<Button 
   android:id="@+id/btn2"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:text="@string/btn2"
   android:layout_margin="40dp"
   android:gravity="right"
   android:padding="20dp"
   />
</LinearLayout>

PracticeActivity.java

package com.agilissystems.practicework;

import android.os.Bundle;

import android.app.Activity;

import android.view.Menu;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.Button;

import android.widget.Toast;

public class PracticeActivity extends Activity implements OnClickListener {

private Button oBtn1, oBtn2;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_practice);

        

        oBtn1 = (Button) findViewById(R.id.btn1);

        oBtn2 = (Button) findViewById(R.id.btn2);

        oBtn1.setOnClickListener(this);

        oBtn2.setOnClickListener(this);

    }

    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

        // Inflate the menu; this adds items to the action bar if it is present.

        getMenuInflater().inflate(R.menu.practice, menu);

        return true;

    }

@Override

public void onClick(View v) {

// TODO Auto-generated method stub

switch (v.getId())

{

case R.id.btn1:

Toast.makeText(this, "You clicked on Button 1 !!!", Toast.LENGTH_LONG).show();

break;

case R.id.btn2:

Toast.makeText(this, "You clicked on Button 2 !!!", Toast.LENGTH_LONG).show();

break;

}

}

    

}

Strings.xml

<?xml version="1.0" encoding="utf-8"?>

<resources>

    <string name="app_name">Practicework</string>

    <string name="action_settings">Settings</string>

<string name="btn1">Button 1</string>

<string name="btn2">Button 2</string>

</resources>

Canvas | Text API

Canvas API is providing feature of displaying text on Canvas. There are two methods (1) fillText and strokeText. fillText method will fill up the text with specified color while StrokeText will only apply outline to text. by using both methods, we can display text with filled color and outline with different color.

Below example will demonstrate you that whatever text you will enter will be displayed in canvas with Red color. here i have applied shadow as well.

Enter the title you want to display on canvas in text field and then click on "Click me" button will draw text on canvas.

Code:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Canvas | Text  Example</title>
</head>
<body>
<label for="txtTitle" id="lblTitle">Enter Title</label>
<input type="text" id="txtTitle" width="50"/>
<input type="button" id="btnOk" value="&nbsp;Click Me&nbsp;" onclick="fnClick()" />
</br>
<canvas id="canvas" width="500px" height="500px"></canvas>
</body>

<script>


function fnClick()
{
var oCanvas = document.getElementById("canvas"); //retrieved element of Canvas
var oContext = oCanvas.getContext("2d"); //get context of canvas to apply drawings.

var oTitle = document.getElementById("txtTitle").value; //get value of title entered by user
oContext.clearRect(0,0,500,500); //remove the content of canvas before drawing new text
oContext.font = "bold 60px tahoma"; //set font family, size and weight
oContext.fillStyle = "rgba(255,0,0,1)"; //set color to be filled
oContext.lineWidth = 2 ; //set border of the text
oContext.strokeStyle="rgba(0,0,0,1)"; //text outline color
oContext.shadowOffsetX = 10; //set shadowOffsetX
oContext.shadowOffsetY = 10; //set shadowOffsetY
oContext.ShadowBlur = 7; //blurness of shadow
oContext.shadowColor = "rgba(255,0,0,.5)"; //shadow color.
oContext.fillText(oTitle,100,100); //draw text at x-100 and y-100 location.
oContext.strokeText(oTitle,100,100); //draw outline text.
}
</script>
</html>

Canvas | Square or Rectangle Example

In HTML5, there are tools using them we can draw different shapes like square, rectangle, triangle and circles. I would first start with Square and rectangle shapes. below example will show you how to draw square and rectangle on Canvas and apply color to shape border.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Canvas Example</title>
</head>
<body>
<canvas id="canvas" width="500px" height="500px"></canvas>
</body>

<script>
var oCanvas = document.getElementById("canvas"); //retrieved element of Canvas
var oContext = oCanvas.getContext("2d"); //get context of canvas to apply drawings.


oContext.strokeStyle = "#ff0000";  //color of border, applied Red color
oContext.lineWidth = 1; // width of the border
oContext.strokeRect (100,100,100,100); // strokeRect function draws square without filling color. parameters are x,y, width, height
oContext.strokeStyle = "#00ff00";  //color of border, applied Green color
oContext.strokeRect (100,250, 200,100); //will draw horizontal rectangle
oContext.strokeStyle = "#0000ff";  //color of border, applied Blue color
oContext.strokeRect (350,100, 100,200); //will draw horizontal rectangle


</script>
</html>

Above example shows square and rectangle shapes. now i will show you how to apply shadow to shapes.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Canvas Example</title>
</head>
<body>
<canvas id="canvas" width="500px" height="500px"></canvas>
</body>

<script>
var oCanvas = document.getElementById("canvas"); //retrieved element of Canvas
var oContext = oCanvas.getContext("2d"); //get context of canvas to apply drawings.


oContext.strokeStyle = "#ff0000";  //color of border, applied Red color
oContext.lineWidth = 1; // width of the border
oContext.shadowOffsetX = 10; // X offset
oContext.shadowOffsetY = 10; // Y offset
oContext.shadowColor = "rgba(255,0,0,.4)"; // parameters of rgba function are Red, Green, blue and level of Opacity
oContext.shadowBlur = 10; // at what level, shadow to be blurred.
oContext.strokeRect (100,100,100,100); // strokeRect function draws square without filling color. parameters are x,y, width, height
</script>
</html>

HTML 5 FORM ELEMENTS

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>