HTML Input Types

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

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

HTML supports these input types:

More recently, HTML5 added these types.

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.

A text field in which users can enter a title.

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

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

The second control is a password field.

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

For details on password input see our HTM input="password" attribute reference.

Click to Submit button to see the values submitted.

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

Enter some values and then click Reset.

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

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

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

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

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.

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

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

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

To recap: HTML5 added these new input types:

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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 details on telephone input see our HTML input="tel" attribute reference.

A url input field. It requires a valid 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 details on url input see our HTML input="url" attribute reference.

<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 are rules that are set as attributes on an <input> element.
Here is a list of these attributes.

For details on these input attributes, see our HTML input attributes reference.

• Our HTML input Tag Reference
• Our HTML Input Attributes Tutorial
• Our CSS Tutorial