Input Types

HTML Input Types

---

Input Type Text

<input type="text"> defines a one-line text input field:

Example

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

Yourself Try

This is the manner by which the HTML code above will be displayed in a browser:

First name:

Last name:

Input Type Password

<input type="password"> defines a password field:

Example

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

Yourself Try

This is the manner by which the HTML code above will be displayed in a browser:

User name:

User password:

Input Type Submit

<input type="submit"> defines a button for submitting

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>

Yourself Try

This is the manner by which the HTML code above will be displayed in a browser:

First name:

Last name:

Input Type Reset

<input type="reset"> defines a reset button that will reset all form values to their default values:

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">
  <input type="reset">
</form>

Yourself Try

This is the manner by which the HTML code above will be displayed in a browser:

First name:

Last name:

Input Type Radio

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

Example

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

Yourself Try

This is the manner by which the HTML code above will be displayed in a browser:

Male
Female
Other

Input Type Checkbox

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

Example

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

Yourself Try

This is the manner by which the HTML code above will be displayed in a browser:

I have a bike
I have a car

Input Type Button

<input type="button"> defines a button:

 Example

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

Yourself Try

This is the manner by which the HTML code above will be displayed in a browser:

HTML5 Input Types

HTML5 added several new input types:

1. color
2. date
3. datetime-local
4. email
5. month
6. number
7. range
8. search
9. tel
10. time
11. url
12. week

Input Type Color

The <input type="color"> is used for input fields that should contain a color.

Example

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

Yourself Try

This is the manner by which the HTML code above will be displayed in a browser:

Select your favorite color:

Input Type Date

The <input type="date"> is used for input fields that should contain a date.

 Example

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

Yourself Try

This is the manner by which the HTML code above will be displayed in a browser:

Birthday:

You can also add restrictions to dates:

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:
  <input type="date" name="bday" min="2000-01-02"><br>
</form>

Yourself Try

This is the manner by which the HTML code above will be displayed in a browser:

Enter a date before 1980-01-01:
Enter a date after 2000-01-01:

Input Type Datetime-local

The <input type="datetime-local"> specifies a date and time input field, with no time zone.

Example

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

Yourself Try

This is the manner by which the HTML code above will be displayed in a browser:

Birthday (date and time):

Input Type Email

The <input type="email"> is used for input fields that should contain an e-mail address.

Example

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

Yourself Try

This is the manner by which the HTML code above will be displayed in a browser:

E-mail:

Input Type Month

The <input type="month"> allows the user to select a month and year.

Example

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

Yourself Try

This is the manner by which the HTML code above will be displayed in a browser:

Birthday (month and year):

Input Type Number

The <input type="number"> defines a numeric input field.

Example

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

Yourself Try

This is the manner by which the HTML code above will be displayed in a browser:

Input Type Range

Example

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

Yourself Try

This is the manner by which the HTML code above will be displayed in a browser:

Input Type Search

The <input type="search"> is used for search fields (a search field behaves like a regular text field).

Example

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

Yourself Try

This is the manner by which the HTML code above will be displayed in a browser:

Search Google:

Input Type Tel

The <input type="tel"> is used for input fields that should contain a telephone number.

Example

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

Yourself Try

This is the manner by which the HTML code above will be displayed in a browser:

Telephone:

Input Type Time

The <input type="time"> allows the user to select a time (no time zone).

Example

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

Yourself Try

This is the manner by which the HTML code above will be displayed in a browser:

Select a time:

Input Type Url

The <input type="url"> is used for input fields that should contain a URL address.

Example

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

Yourself Try

This is the manner by which the HTML code above will be displayed in a browser:

Add your homepage:

Input Type Week

The <input type="week"> allows the user to select a week and year.

Example

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

Yourself Try

This is the manner by which the HTML code above will be displayed in a browser:

Select a week: