7/30/2019 1_html Input Types

1/12

Html Input Types

-------------------------------------------------------------------------

HTML5 has several new input types for forms.

These new features allow better input control and validation

The new input types in HTML 5

color

date

datetime

datetime-local

email

number

range

search

tel

time

url

1.Color-------------------------------------------------------------------------------------

Description

This input type lets you collect a color of the form #rrggbb.

If a browser supports this input type, the intention is that clicking in thetextfield will result in a color chooser popping up.

Syntax:

7/30/2019 1_html Input Types

2/12

Attribute:

Value: The initial value. The intention is that if a browser pops up a color

chooser, the initial selection will match the current value.

Browser Support:

7/30/2019 1_html Input Types

3/12

Demo:

-------------------------------------------------------------------------------------

Input type-range

This input type lets you collect a number (either integer or floating

point).

All known browsers that support this use a slider.

Syntax:

Attributes

value: The initial value.

step: How much to change the value when you click on the up or down

arrows of the control. The default is 1.

min, max: The smallest and largest values that can be selected. The

default for min is 0, and the the default for max is 100.

Browser Support

7/30/2019 1_html Input Types

4/12

Demo:

****************************************************************************************************

Input type-url

The url type is used for input fields that should contain a URL address.

The value of the url field is automatically validated when the form is submitted.

Brower Support

7/30/2019 1_html Input Types

5/12

Demo:

*************************************************************************************

Input type- number

This input type collects a number (either integer or floating point)

Syntax:

Attributes:

max - specifies the maximum value allowed

7/30/2019 1_html Input Types

6/12

min - specifies the minimum value allowed

step - specifies the legal number intervals

value - Specifies the default value

Broswer Support

Demo

*************************************************************

Input type-Search

The search type is used for search fields (a search field behaves like a

regular text field).

Browser Support:

7/30/2019 1_html Input Types

7/12

Demo:

Search Google:

*************************************************************

Input type-tel

Define a field for entering a telephone number

Browser Support:

Demo:

Telephone:

*************************************************************

7/30/2019 1_html Input Types

8/12

Input type-time

Define a control for entering time

Demo:

Select a time:

*************************************************************

Input type-email

collect an email address.

Syntax:

...

Attributes

value: The initial value (a legal email address).

list: The id of a separate "datalist" element that defines a list of email

addresses for the user to choose among.

Browser Support:

7/30/2019 1_html Input Types

9/12

Demo:

*************************************************************

Input type-date

The date type allows the user to select a date.

Demo

Birthday:

*************************************************************

Input Type: datetime

The datetime type allows the user to select a date and time (with

time zone).

Demo:

Birthday (date and time):

*************************************************************

Input Type: datetime-local

The datetime-local type allows the user to select a date and time (no time

zone).

Demo

Birthday (date and time):

7/30/2019 1_html Input Types

10/12

*************************************************************

Program in Detail for Input Types

Input Type

Result

Telephone

Search

URL

Email

Datetime

http://searchdaily.net/http://searchdaily.net/

7/30/2019 1_html Input Types

11/12

Datetime-Local

Date

Time

Month

Week

Number

Range

Color

7/30/2019 1_html Input Types

12/12

************************************************************