Search within TutorialsPark

HTML5 Forms Input


Form Input

Form Input Types

HTML5 forms Inputs allow the user to insert inputs of various new types .

Types of Input .

URL.

email.

number

date

datetime

datetime-local

time

week

month

color

range

search

telephone


URL : < input type="url">

Enter you website URL :

URL type configures the input element to accept values only what is proper URL address.

Url input Example

Give it a TRY! »




EMAIL : < input type="email">

What's your email :

EMAIL is form element used to recieve a valid e-mail address from the user.

The input is verified automatically(no javascript) by analysing the input syntax.

Email input Example

Give it a TRY! »


NUMBER : < input type="number">

Select your Number :

Creates a number input accepting numeric values.

Spinner controls appear by default allowing you to increment and decrement the numeric values.

Number input Example

Give it a TRY! »




DATE : < input type="date">

Date :

Accepts local date(time and time zone not required). Eg : 15-08-2012

Date input Example

Give it a TRY! »




DATETIME : < input type="datetime">

Date and Time :

Accepts a Global date and time,with time zone.

The Date and time values are seperated by letter T followed by the Time Zone andZ represents UTC.

Eg: 2012-07-24T07:15:00Z for 24th july 2012 ,time 7:15 am and Pacific Standard Time(UTC).

Datetime input Example

Give it a TRY! »




DATETIME-LOCAL: < input type="datetime-local">

Local Date and Time :

Obtains values which represents local date and time(no timezone).

The Input format is yyyy-mm-ddThh:mm:ss.Eg:2012-08-15T17:30:47.

Datetime-local input Example

Give it a TRY! »




TIME: < input type="time">

Time :

Obtains time input in the 24 hour time format. Say : 21.05.

TIME input Example

Give it a TRY! »




WEEK : < input type="week">

Week :

Allows users to input weeks within a year. The format for week input is 2013-W21 i.e 21st week of the year 2013.

Week input Example

Give it a TRY! »




MONTH : < input type="month">

Month :

Obtains inputs as a year and month. Eg : for month of July it is 2012-07

Month input Example

Give it a TRY! »




COLOR : < input type="color">

Select your favorite color:

This input obtains color from the color picker, color value is in Hexadecimal form.

Color input Example

Give it a TRY! »




RANGE: < input type="range">

Select Range :

The range input allows a user to adjust input values within a finite range with the slider interface.

Attributes of range input:

  • max: Maximum value of the input.(floating-point).
  • min:Minimum value of the input.(floating-point).
  • step:Contains the increment of decrement element.(floating-point)
  • value:The current value

Range input Example

Give it a TRY! »




SEARCH: < input type="search">

Search :

Search Input works in the same manner as standard text input.Can be used to pass values to search engines like Google,Yahoo,Bing.

Search input Example

Give it a TRY! »




TELEPHONE: < input type="tel">

Telephone:

The Tel input obtains a telephone number as an input.(no alphabets).

Tel input Example

Give it a TRY! »






Related Examples

Related Tags