HTML Input Types

This chapter describes the input types of the <input> element.

Input type: text

<input type="text"> Define forText inputSingle-line input field for

Example

<form>
 First name:<br>
<input type="text" name="firstname">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form>

Try It Yourself

The above HTML code will look like this in the browser:

First name:


Last name:

Input type: password

<input type="password"> DefinePassword field:

Example

<form>
 User name:<br>
<input type="text" name="username">
<br>
 User password:<br>
<input type="password" name="psw">
</form>

Try It Yourself

The above HTML code will look like this in the browser:

User name:


User password:

Note:Characters in the password field will be masked (displayed as asterisks or solid circles).

Input type: submit

<input type="submit"> DefineSubmitForm data toForm handlerbutton.

The form handler (form-handler) is typically a server page that contains scripts for processing input data.

Specify the form handler (form-handler) in the action attribute of the form:

Example

<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

Try It Yourself

The above HTML code will look like this in the browser:

First name:


Last name:


If you omit the value attribute of the submit button, the button will get the default text:

Example

<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit">
</form>

Try It Yourself

Input Type: radio

<input type="radio"> Defines a radio button.

Radio buttons let a user select ONLY ONE of a limited number of choices:

Example

<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>

Try It Yourself

The above HTML code will look like this in the browser:

Male

Female

Input Type: checkbox

<input type="checkbox"> Defines a checkbox.

Checkboxes allow users to select zero or more options from a limited number of choices.

Example

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

Try It Yourself

The above HTML code will look like this in the browser:

I have a bike

I have a car

Input Type: button

<input type="button"> DefineButton。

Example

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

Try It Yourself

The above HTML code will look like this in the browser:

HTML5 Input Types

HTML5 has added multiple new input types:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

Note:Old web browsers do not support input types and are treated as input type text.

Input type: number

<input type="number"> Used for input fields that should include a numeric value.

You can limit numbers.

Restrictions can be applied to input fields depending on browser support.

Example

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

Try It Yourself

Input Restrictions

Here is a list of some commonly used input restrictions (some of which are new in HTML5):

Attribute Description
disabled Specify whether the input field should be disabled.
max Specify the maximum value for the input field.
maxlength Specify the maximum number of characters for the input field.
min Specify the minimum value for the input field.
pattern Specify the regular expression that checks the input value.
readonly Specify the input field as read-only (cannot be modified).
required Specify whether the input field is required (must be filled in).
size Specify the width of the input field (in characters).
step Specify the valid numeric interval for the input field.
value Specify the default value for the input field.

You will learn more about input restrictions in the next chapter.

Example

<form>
  Quantity:
  <input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

Try It Yourself

Input type: date

<input type="date"> Used for input fields that should include a date.

According to browser support, the date picker will appear in the input field.

Example

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

Try It Yourself

You can add restrictions to the input:

Example

<form>
  Enter a date before 1980-01-01:
  <input type="date" name="bday" max="1979-12-31"><br>
  Enter a date after 2000-01-01:
  Enter a date after 2000-01-01:<br>
</form>

Try It Yourself

Input type: color

<input type="color"> Used for input fields that should contain colors.

According to browser support, the color picker will appear in the input field.

Example

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

Try It Yourself

Input type: range

<input type="range"> Used for input fields that should contain values within a certain range.

According to browser support, the input field can be displayed as a slider control.

Example

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

Try It Yourself

You can use the following attributes to specify restrictions: min, max, step, value.

Input type: month

<input type="month"> Allow users to select month and year.

According to browser support, the date picker will appear in the input field.

Example

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

Try It Yourself

Input type: week

<input type="week"> Allow users to select week and year.

According to browser support, the date picker will appear in the input field.

Example

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

Try It Yourself

Input type: time

<input type="time"> Allow users to select time (without timezone).

According to browser support, the time picker will appear in the input field.

Example

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

Try It Yourself

Input type: datetime

<input type="datetime"> Allow users to select date and time (with timezone).

According to browser support, the date picker will appear in the input field.

Example

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

Try It Yourself

Input type: datetime-local

<input type="datetime-local"> Allow users to select date and time (without timezone).

According to browser support, the date picker will appear in the input field.

Example

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

Try It Yourself

Input Type: email

<input type="email"> Used for input fields that should contain email addresses.

According to browser support, email addresses can be automatically verified when submitted.

Some smartphones will recognize email type and add ".com" to the keyboard to match email input.

Example

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

Try It Yourself

Input Type: search

<input type="search"> Used for search fields (search fields behave like regular text fields).

Example

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

Try It Yourself

Input Type: tel

<input type="tel"> Used for input fields that should contain phone numbers.

Currently only Safari 8 supports the tel type.

Example

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

Try It Yourself

Input Type: url

<input type="url"> Used for input fields that should contain URL addresses.

According to browser support, the url field can be automatically verified when submitted.

Some smartphones recognize url type and add ".com" to the keyboard to match url input.

Example

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

Try It Yourself