HTML Input Types

An <input> tag offers a variety of input types, such as, text fields, radio buttons, checkboxes, submit buttons, date pickers, ranges, and more. These input elements are often refered to as controls.

HTML Tutorial

Example

A form with four input types: text, email, checkbox, and submit.

Student Registration





<form action="/tutorial/action.html">
  <fieldset style="border: 2px solid #4238ca; background: #f6f8ff; ">
    <legend>Student Registration</legend>

    <input type="text" placeholder="First name" name="firstname"><br /><br />
    <input type="text" placeholder="Last name" name="lastname"><br /><br />
    <input type="email" placeholder="Email" name="email"><br /><br />

    <div>
      <input type="checkbox" id="bachelors" name="bachelors" value="bachelors">
      <label for="bachelors">Bachelors degree</label>
    </div>

    <input type="submit" value="Submit" />
  </fieldset>
</form>

Input Types

#

HTML supports these input types:

Input Type Tag
text <input type="text">
radio <input type="radio">
checkbox <input type="checkbox">
password <input type="password">
file <input type="file">
hidden <input type="hidden">
button <input type="button">
submit <input type="submit">
reset <input type="reset">

More recently, HTML5 added these types.

Input Type Tag
color <input type="color">
date <input type="date">
datetime-local <input type="datetime-local">
month <input type="month">
week <input type="week">
time <input type="time">
email <input type="email">
image <input type="image">
number <input type="number">
range <input type="range">
search <input type="search">
url <input type="url">
tel <input type="tel">

Note:  Several of the newer HTML5 input types look different in different browsers. Even their behavior can be different. Unfortunately, this has limited their usage.

To highlight these differences, below are three HTML5 input elements in Chrome and in Edge. The input types are date, range, and file respectively.

If a consistent look-and-feel across browsers is important for your website, then you'll need to customize their appearance and behavior with CSS and JavaScript. Alternatively, you may forgo the newer HTML5 input controls altogether and create custom controls instead -- many developer chose to do just that.

For more information about input elements, see our HTML input Tag Reference.


Input type="text"

The <input type="text"> tag creates a text field.

Text fields accept data values that can be entered as text.

Text fields are among the most frequently used input controls.

A text field in which users can enter a title.

Title  
<form>
  Title &nbsp;
  <input type="text" name="title">
</form>

For more information about text input see our HTML text HTML input Tag Reference.


Input type="password"

To create a password field use <input type="password">.

Password fields don't show what the user types. Each character appears as a dot or asterisk.

The second control is a password field.

Username


Password
<form>
  Username <br />
  <input type="text" name="username"> <br /><br />
  Password <br />
  <input type="password" name="password">
</form>

For more information about password input see our HTML password HTML input Tag Reference.


Input type="submit"

To create a submit button use <input type="submit">.

When clicked it submits the form data to a form-handler, usually code on the server.

Click to Submit button to see the values submitted.

First name


Last name


<form action="/tutorial/action.html">
   First name <br />
   <input type="text" name="firstname" value="Thomas"> <br /> <br />
   
   Last name <br />
   <input type="text" name="lastname" value="Anderson"> <br /> <br /> 

   <input type="submit" value="Submit">  
</form>

For more information about input submit see our HTML input submit Reference Guide.


Input type="reset"

To create a Reset button that resets all form fields use <input type="reset">.

When clicked it clears all data entered by the user.

Enter some values and then click Reset.

First name

Last name


<form action="/tutorial/action.html">
   First name <br />
   <input type="text" name="firstname"> <br />
   
   Last name <br />
   <input type="text" name="lastname"> <br /><br /> 

   <input type="reset"> 
   <input type="submit" value="Submit"> 
</form>

For more information about input reset see our HTML input reset Reference Guide.


Input type="radio"

Radio buttons allow users to select a single choice from a number of options.

The <input type="radio"> tag creates a single radio button option.

Two radio button options.

Male
Female

<form action="/tutorial/action.html">
  <input type="radio" name="gender" value="Male" checked> Male <br />
  <input type="radio" name="gender" value="Female"> Female <br /><br />

  <input type="submit">
</form> 

Note:  To group two or more radio buttons they must have the same name attribute. This allows users to select only one option from the group.

For more information about radio buttons see our HTML radio HTML button Tag Reference.


Input type="checkbox"

A checkbox is a toggle, it's either on or off.

To create a single checkbox use <input type="checkbox">.

A group of checkboxes allow users to select zero or more choices.

Four checkbox choices.

HTML
CSS
Javascript
JQuery

<form action="/tutorial/action.html">
  <input type="checkbox" name="technology1" value="HTML"> HTML<br />
  <input type="checkbox" name="technology2" value="CSS"> CSS<br />
  <input type="checkbox" name="technology3" value="Javascript"> Javascript<br />
  <input type="checkbox" name="technology4" value="JQuery"> JQuery <br /><br />

  <input type="submit">
</form>

For more information about checkbox input see our HTML checkbox Reference Guide.


Input type="button"

Not all buttons submit form data.

To create a regular clickable button use <input type="button">.

This button can be used for any purpose that is relevant to your solution.

Clicking the button opens an alert box.

<input type="button" onclick="alert('Hello there!')" value="Hello">

For more information about input buttons see our HTML input HTML button Tag Reference.


Did you know?

Did you know?

Hidden input types

A hidden field stores form data that is not visible to the user, but when the form is submitted its value gets submitted with the rest of the fields. Hidden fields are often used to store record ids for form processing.

A hidden input field with a record id:

<input type="hidden" name="Id" value="829117" />

Tip:  Although hidden fields aren't visible, they can be found when viewing the page source. Therefore, never include critical or important data in these fields.


Input type="file"

The <input type="file"> tag is designed for file-upload scenarios.

It creates a 'Choose File' or 'Browse' button that when clicked opens a file-selection dialog.

Once a file is selected, its name usually displays next to the button.

Selecting a file.

Select a file  
<form>
  Select a file &nbsp;
  <input type="file" name="file">
</form>

Note:  Selecting a file does not submit it to the server. The form still needs to be submitted with a submit button -- or programmatically with JavaScript.

For more information about file input see our HTML file HTML input Tag Reference.


Did you know?

Did you know?

Limiting accepted file types in a file input control

By default, all files are accepted by the <input type="file"> input control.

You can limit the accepted file types with the accept attribute.

This attribute restricts the file types you can select in the file-selection dialog.

In this example, the first button allows Excel files only -- i.e., .xls,.xlsx.
The second button allows image files only -- i.e., .png,.jpg,.jpeg.

Select an Excel file  

Select an image file  
<form>
  <!-- This will only accept excel files -->
  Select an Excel file &nbsp; <input type="file" name="file" accept=".xls,.xlsx">
  <br /><br />
  <!-- This one will accept png and jpg only -->
  Select an image file &nbsp; <input type="file" name="file" accept=".png,.jpg,.jpeg">
</form>

HTML5 Input types

To recap: HTML5 added these new input types:

Input Type
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="month">
<input type="week">
<input type="time">
<input type="email">
<input type="image">
<input type="number">
<input type="range">
<input type="search">
<input type="url">
<input type="tel">

Tip:  Not all browsers support these newer input types. Also, be aware that each browser renders the UI for these controls differently. For this reason, many developers create custom controls with HTML, CSS, and JavaScript for these types.


Input type="color"

To create a color selection control use <input type="color">.

Clicking on the control opens a graphic color selection tool.

Select color  
<form>
  Select color &nbsp;
  <input type="color" name="color">
</form>

For more information about color input see our HTML color HTML input Tag Reference.


Input type="date"

To create a field to accept a date use <input type="date">.

Clicking on the control (or icon in certain browsers) opens a graphical date picker tool.

Date of Birth  
<form>
  Date of Birth &nbsp;
  <input type="date" name="birthday">
</form>

For more information about date input see our HTML date HTML input Tag Reference.


Input type="time"

To create a field to accept a time use <input type="time">.

Clicking on the control (or icon in certain browsers) opens a time picker tool.

Select Time

<form action="/tutorial/action.html">
  <fieldset>
    <legend>Select Time</legend>

    <input type="time" name="time"><br /><br />

    <input type="submit" value="Submit">
  </fieldset>
</form>

For more information about time input see our HTML time HTML input Tag Reference.


Input type"month"

To create a month/year input control use <input type="month">.

Clicking on the control (or icon in certain browsers) opens a month/year picker tool.

Graduation month  
<form>
  Graduation month &nbsp;
  <input type="month" name="graduationmonth">
</form>

For more information about month input see our HTML month HTML input Tag Reference.


Input type="week"

To create a week/year input control use <input type="week">.

Clicking on the control (or icon in certain browsers) opens a week/year picker tool.

Select Week/Year

<form action="/tutorial/action.html">
  <fieldset>
    <legend>Select Week/Year</legend>

    <input type="week" name="week"><br /><br />

    <input type="submit" value="Submit">
  </fieldset>
</form>

For more information about week input see our HTML week HTML input Tag Reference.


Input Type="email"

To create a field that accepts an email use the <input type="email"> tag.

Specifying a regular expression with a pattern attribute forces the email to follow a given pattern.

An email input box that requires a '@gmail.com' email address.

E-mail  
<form>
  E-mail &nbsp;
  <input type="email" name="email" pattern=".+@gmail.com">
</form>

Tip:  To validate the email value check the CSS :valid or :invalid psuedo classes.

For more information about email input see our HTML email HTML input Tag Reference.


Input type="number"

To create a field that accepts numbers only use the <input type="number"> tag.

The up-down arrows automatically increment/decrement the value by a step value.

A min, max, and step interval can be specified with min, max and step attributes respectively.

A number field that allows values between 1 and 10 in increments of 1.

Quantity     (min is 1 and max is 10)
<form>
  Quantity &nbsp;
  <input type="number" name="quantity" min="1" max="10"> &nbsp;
  (min is 1 and max is 10)
</form>

For more information about number input see our HTML number HTML input Tag Reference.


Input type="range"

To create a control that accepts a number between a range use the <input type="range"> tag.

Restrictions can be set using min, max, and step attributes.

A range control that allows a value between 0 and 100 in increments of 10.
By default the actual value is not visible.



<form action="/tutorial/action.html">
  <input type="range" name="range" min="0" max="100" step="10" value="60">
  <br /> <br />
  <input type="submit">
</form>

For more information about range input see our HTML range HTML input Tag Reference.


Input type="search"

The <input type="search"> tag creates a search control.

Search fields are text fields, but some browsers style these a little different.

Search  
<form>
  Search &nbsp;
  <input type="search" name="search">
</form>

For more information about search input see our HTML search HTML input Tag Reference.


Input type ="tel"

To create a field to enter a telephone number use the <input type="tel"> tag.

By default, telephone numbers are not validated because of the wide variety of formats world-wide.

Add a pattern attribute to validate the number with a custom regular expression.

Telephone  
<form>
  Telephone &nbsp;
  <input type="tel" name="telephone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>

Tip:  To validate the telephone number check the CSS :valid or :invalid psuedo classes.

For more information about telephone input see our HTML tel HTML input Tag Reference.


Input type="url"

To create a field to enter a url use the <input type="url"> tag.

The url is automatically validated which can be checked with the :valid and :invalid psuedo classes.

A url input field. It requires a valid url.

Url Enter login url  
<form action="/tutorial/action.html">
  <fieldset>
    <legend>Url</legend>
     
    Enter login url &nbsp;
    <input type="url" name="login">

    <input type="submit">
  </fieldset>
</form>

For more information about url input see our HTML url HTML input Tag Reference.


Did you know?

Did you know?

Validation for input elements

HTML can validate user input and provide immediate feedback with warnings or errors without JavaScript or server-side validation. These validations are enforced with attributes like required, pattern, min, max, maxlength, and so on.

In this example, the city and country input fields are required.
When the form is submitted and validation fails, a warning message displays which halts the submission.

City

Country


<form action="/tutorial/action.html">
  City <br />
  <input type="text" name="city" required> <br />
  Country <br />
  <input type="text" name="country" required> <br /><br />

  <input type="submit" value="Submit" />
</form>

Input Restrictions

Input restrictions are rules that are set as attributes on an <input> element.
Here is a list of these attributes.

Attribute Description
required Specifies that an input field is required (must be filled out)
value Set the default value for an input field
disabled Specifies that an input field is disabled
readonly Specifies that an input field is read-only (cannot be changed)
maxlength Sets the maximum number of character for an input field
size Sets the width (in characters) of an input field
max Sets the maximum value for an input field
min Sets the minimum value for an input field
step Sets the stepping intervals for an input field
pattern Sets a regular expression to check the input value against

For more information about these input attributes, see our HTML input attributes Reference.


You may also like

Guides