Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

HTML Input Types

An <input> tag can create different input types.

Examples include text fields, radio buttons, checkboxes, and more.

These input elements are often refered to as controls.



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 />

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

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

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 details on 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 &nbsp;
  <input type="text" name="title">

For details on text input see our HTML input="text" attribute 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 <br />
  <input type="text" name="username"> <br /><br />
  Password <br />
  <input type="password" name="password">

For details on password input see our HTM input="password" attribute 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">  

For details on input submit see our HTML input="submit" attribute reference.

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

For details on input reset see our HTML input="reset" attribute reference.

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.


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

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 details on radio buttons see our HTML input="radio" attribute 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.


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

For details on checkbox input see our HTML input="checkbox" attribute reference.

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 details on input buttons see our HTML input="button" attribute 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.

For details on hidden input see our HTML input="hidden" attribute reference.

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  
  Select a file &nbsp;
  <input type="file" name="file">

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 details on file input see our HTML input="file" attribute 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  
  <!-- 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">

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  
  Select color &nbsp;
  <input type="color" name="color">

For details on color input see our HTML input="color" attribute 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  
  Date of Birth &nbsp;
  <input type="date" name="birthday">

For details on date input see our HTML input="date" attribute 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">
    <legend>Select Time</legend>

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

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

For details on time input see our HTML input="time" attribute 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  
  Graduation month &nbsp;
  <input type="month" name="graduationmonth">

For details on month input see our HTML input="month" attribute 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">
    <legend>Select Week/Year</legend>

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

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

For details on week input see our HTML input="week" attribute 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 '' email address.

  E-mail &nbsp;
  <input type="email" name="email" pattern="">

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

For details on email input see our HTML input="email" attribute 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)
  Quantity &nbsp;
  <input type="number" name="quantity" min="1" max="10"> &nbsp;
  (min is 1 and max is 10)

For details on number input see our HTML input="number" attribute 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">

For details on range input see our HTML input="range" attribute 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 &nbsp;
  <input type="search" name="search">

For details on search input see our HTML input="search" attribute 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 variety of formats world-wide.

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

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

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

For details on telephone input see our HTML input="tel" attribute 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">
    Enter login url &nbsp;
    <input type="url" name="login">

    <input type="submit">

For details on url input see our HTML input="url" attribute 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.



<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" />

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 details on these input attributes, see our HTML input attributes reference.

You may also like

Last updated on Sep 30, 2023

Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.