HTML Reference

HTML <input> type Attribute

HTML <input> tag

Browser Support

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

Attribute Values

Examples

Input type: button

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

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

Example

Select a color from a color picker:

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

Try it yourself »

Input type: date

Example

Define a date control:

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

Try it yourself »

Input type: datetime

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

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

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

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

Example

Define a hidden field (not visible to a user). A hidden field often store 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

Example

Define an image as a submit button:

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

Try it yourself »

Input type: month

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

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

Example

Define a password field (characters are masked)

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

Try it yourself »

Input type: radio

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

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="1" 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

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

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

Example

Define a submit button:

<input type="submit">

Try it yourself »

Input type: tel

Example

Define a field for entering a telephone number:

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

Try it yourself »

Input type: text

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

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

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

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