X
HOME HTML CSS JAVASCRIPT SQL PHP JQUERY ANGULAR BOOTSTRAP XML ASP.NET MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

HTML <input> type Attribute

HTML input Tag Reference HTML <input> tag

Example

An HTML form with two different input types; text and submit:

<form action="demo_form.asp">
  Username: <input type="text" name="usrname"><br>
  <input type="submit" value="Submit">
</form>

Try it yourself »

More "Try it Yourself" examples below.


Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The type attribute works in all major browsers. However, not all the different input types works in all major browsers.

Look below to see browser-support for each input type.


Definition and Usage

The type attribute specifies the type of <input> element to display.

The default type is: text.

Tip: This is not a required attribute, but we think you should always include it.


Differences Between HTML 4.01 and HTML5

HTML5 has the following new input types: color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel, and url.


Syntax

<input type="value">

Attribute Values

Value Description
button Defines a clickable button (mostly used with a JavaScript to activate a script)
checkbox Defines a checkbox
color Defines a color picker
date Defines a date control (year, month and day (no time))
datetime Defines a date and time control (year, month, day, hour, minute, second, and fraction of a second, based on UTC time zone)
datetime-local Defines a date and time control (year, month, day, hour, minute, second, and fraction of a second (no time zone)
email Defines a field for an e-mail address
file Defines a file-select field and a "Browse..." button (for file uploads)
hidden Defines a hidden input field
image Defines an image as the submit button
month Defines a month and year control (no time zone)
number Defines a field for entering a number
password Defines a password field (characters are masked)
radio Defines a radio button
range Defines a control for entering a number whose exact value is not important (like a slider control)
reset Defines a reset button (resets all form values to default values)
search Defines a text field for entering a search string
submit Defines a submit button
tel Defines a field for entering a telephone number
text Default. Defines a single-line text field (default width is 20 characters)
time Defines a control for entering a time (no time zone)
url Defines a field for entering a URL
week Defines a week and year control (no time zone)


Examples

Input type: button

Opera Safari Chrome Firefox Internet Explorer

Example

A clickable button, that activates a JavaScript when it is clicked:

<input type="button" value="Click me" onclick="msg()">

Try it yourself »


Input type: checkbox

Opera Safari Chrome Firefox Internet Explorer

Example

Checkboxes let a user select one or more options of a limited number of choices:

<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car"> I have a car

Try it yourself »


Input type: color

Opera Safari Chrome Firefox Internet Explorer

Example

Select a color from a color picker:

Select your favorite color: <input type="color" name="favcolor">

Try it yourself »


Input type: date

Opera Safari Chrome Firefox Internet Explorer

Example

Define a date control:

Birthday: <input type="date" name="bday">

Try it yourself »


Input type: datetime

Opera Safari Chrome Firefox Internet Explorer

Example

Define a date and time control (with time zone):

Birthday (date and time): <input type="datetime" name="bdaytime">

Try it yourself »


Input type: datetime-local

Opera Safari Chrome Firefox Internet Explorer

Example

Define a date and time control (no time zone):

Birthday (date and time): <input type="datetime-local" name="bdaytime">

Try it yourself »


Input type: email

Opera Safari Chrome Firefox Internet Explorer

Example

Define a field for an e-mail address (will be automatically validated when submitted):

E-mail: <input type="email" name="usremail">

Try it yourself »

Tip: Safari on iPhone recognizes the email type, and changes the on-screen keyboard to match it (adds @ and .com options).


Input type: file

Opera Safari Chrome Firefox Internet Explorer

Example

Define a file-select field and a "Browse..." button (for file uploads):

Select a file: <input type="file" name="img">

Try it yourself »


Input type: hidden

Opera Safari Chrome Firefox Internet Explorer

Example

Define a hidden field (not visible to a user).

A hidden field often stores a default value, or can have its value changed by a JavaScript:

<input type="hidden" name="country" value="Norway">

Try it yourself »


Input type: image

Opera Safari Chrome Firefox Internet Explorer

Example

Define an image as a submit button:

<input type="image" src="img_submit.gif" alt="Submit">

Try it yourself »


Input type: month

Opera Safari Chrome Firefox Internet Explorer

Example

Define a month and year control (no time zone):

Birthday (month and year): <input type="month" name="bdaymonth">

Try it yourself »


Input type: number

Opera Safari Chrome Firefox Internet Explorer

Example

Define a field for entering a number (You can also set restrictions on what numbers are accepted):

Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5">

Try it yourself »

Use the following attributes to specify restrictions:

  • max - specifies the maximum value allowed
  • min - specifies the minimum value allowed
  • step - specifies the legal number intervals
  • value - Specifies the default value

Input type: password

Opera Safari Chrome Firefox Internet Explorer

Example

Define a password field (characters are masked)

<input type="password" name="pwd">

Try it yourself »


Input type: radio

Opera Safari Chrome Firefox Internet Explorer

Example

Radio buttons let a user select only one of a limited number of choices:

<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female

Try it yourself »


Input type: range

Opera Safari Chrome Firefox Internet Explorer

Example

Define a control for entering a number whose exact value is not important (like a slider control). You can also set restrictions on what numbers are accepted:

<input type="range" name="points" min="0" max="10">

Try it yourself »

Use the following attributes to specify restrictions:

  • max - specifies the maximum value allowed
  • min - specifies the minimum value allowed
  • step - specifies the legal number intervals
  • value - Specifies the default value

Input type: reset

Opera Safari Chrome Firefox Internet Explorer

Example

Define a reset button (resets all form values to default values):

<input type="reset">

Try it yourself »

Tip: Use the reset button carefully! It can be annoying for users who accidentally activate the reset button.


Input type: search

Opera Safari Chrome Firefox Internet Explorer

Example

Define a search field (like a site search, or Google search):

Search Google: <input type="search" name="googlesearch">

Try it yourself »


Input type: submit

Opera Safari Chrome Firefox Internet Explorer

Example

Define a submit button:

<input type="submit">

Try it yourself »


Input type: tel

Opera Safari Chrome Firefox Internet Explorer

Example

Define a field for entering a telephone number:

Telephone: <input type="tel" name="usrtel">

Try it yourself »


Input type: text

Opera Safari Chrome Firefox Internet Explorer

Example

Define two single-line text fields that a user can enter text into:

First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>

Try it yourself »


Input type: time

Opera Safari Chrome Firefox Internet Explorer

Example

Define a control for entering a time (no time zone):

Select a time: <input type="time" name="usr_time">

Try it yourself »


Input type: url

Opera Safari Chrome Firefox Internet Explorer

Example

Define a field for entering a URL:

Add your homepage: <input type="url" name="homepage">

Try it yourself »

Tip: Safari on iPhone recognizes the url input type, and changes the on-screen keyboard to match it (adds .com option).


Input type: week

Opera Safari Chrome Firefox Internet Explorer

Example

Define a week and year control (no time zone):

Select a week: <input type="week" name="week_year">

Try it yourself »


HTML input Tag Reference HTML <input> tag

Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB HOSTING

UK Reseller Hosting

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates

SHARE THIS PAGE

facebook