THE WORLD'S LARGEST WEB DEVELOPER SITE

HTML <input> type Attribute

❮ HTML <input> tag

Example

An HTML form with two input fields; one text field and one submit button:

<form action="/action_page.php">
  <label for="username">Username: </label>
  <input type="text" id="username" name="username"><br>
  <input type="submit" value="Submit">
</form>
Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

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

If the type attribute is not specified, the default type is "text".


Browser Support

Attribute
type Yes Yes Yes Yes Yes

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, day (no time))
datetime-local Defines a date and time control (year, month, day, time (no timezone)
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 timezone)
number Defines a field for entering a number
password Defines a password field
radio Defines a radio button
range Defines a range control (like a slider control)
reset Defines a reset button
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
time Defines a control for entering a time (no timezone)
url Defines a field for entering a URL
week Defines a week and year control (no timezone)


More Examples

Input type: button

A push button that activates a JavaScript when it is clicked:

<input type="button" value="Click me" onclick="msg()">
Try it Yourself »

Input type: checkbox

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

<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br>
Try it Yourself »

Input type: color

Select a color from a color picker:

<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor">
Try it Yourself »

Input type: date

Define a date control:

<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
Try it Yourself »

Input type: datetime-local

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

<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
Try it Yourself »

Input type: email

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

<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
Try it Yourself »

Input type: file

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

<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
Try it Yourself »

Input type: hidden

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

A hidden field often stores what database record that needs to be updated when the form is submitted:

<input type="hidden" id="custId" name="custId" value="3487">
Try it Yourself »

Input type: image

Define an image as a submit button:

<input type="image" src="img_submit.gif" alt="Submit">
Try it Yourself »

Input type: month

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

<label for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
Try it Yourself »

Input type: number

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

<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" 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

Define a password field (characters are masked):

<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd">
Try it Yourself »

Input type: radio

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

<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
Try it Yourself »

Input type: range

Define a control for entering a number whose exact value is not important (like a slider control). Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the min, max, and step attributes:

<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
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

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

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

<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
Try it Yourself »

Input type: submit

Define a submit button:

<input type="submit">
Try it Yourself »

Input type: tel

Define a field for entering a telephone number:

<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
Try it Yourself »

Input type: text

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

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br>
Try it Yourself »

Input type: time

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

<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
Try it Yourself »

Input type: url

Define a field for entering a URL:

<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" 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

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

<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
Try it Yourself »

❮ HTML <input> tag