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

The <input> tag creates an input control that accepts data from the user.

This element is an absolute powerhouse with its support for different input types, such as, text fields, radio buttons, checkboxes, password fields, dates, and more.



Four <input> elements of different types: a text field, radio buttons, checkbox, and a submit button -- all wrapped inside a <form>.

Student Information

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

    <input type="text" placeholder="First name" name="firstname"><br /><br />
    <input type="text" placeholder="Last name" name="lastname"><br /><br />
    <input type="text" placeholder="City" name="city"><br /><br />

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

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

Using <input>

The <input> tag creates different types of input controls.

The type attribute defines what type of input control will be rendered (see examples below).

More Examples

A <form> with different <input> controls.
Enter data and click submit to see the results.

    5 years

<form action="/tutorial/action.html">

  <input type="text" name="name" placeholder="Name"><br /><br />
  <input type="text" name="email" placeholder="Email"><br /><br />

  <label><input type="checkbox" name="html" value="html"> I know HTML</label><br />
  <label><input type="checkbox" name="css" value="css"> I know CSS</label><br />
  <label><input type="checkbox" name="js" value="js"> I know JavaScript</label><br /><br />

  <label for="experience">Years of experience:</label> &nbsp;
  <input type="range" min="0" max="25" value="5" id="experience" name="experience" oninput="updateYear(this)"> &nbsp;
  <span id="years">5</span> years <br /><br />

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


  let updateYear = element => {
    document.getElementById("years").innerText = element.value;

Attributes for <input>

This table lists the <input> tag attributes.

Attribute Value Description
type text
The type of input element to be created.
Click the type values for details: text, checkbox, etc.

The last 13 types (color to week) were added in HTML5 (Oct 2014).
name text Name of the input element.
value text Value of the input element.
id   identifier Defines a unique identifier for the input.
class   classnames Sets one or more CSS classes to be applied to the input.
style   CSS-styles Sets the style for the input.
data-*   value Defines additional data that can be used by JavaScript.
hidden   hidden Specifies whether the input is hidden.
title   text Sets a title that displays as a tooltip.
tabindex   index Sets a tab sequence relative to the other elements.
lang   language Sets the language for the input element.
checked checked For type="checkbox" or type="radio", makes the option checked or chosen.
placeholder text Short hint which describes expected value
maxlength number Maximum number of characters allowed
required no value Sets the input to required field
readonly readonly Make input read only
disabled disabled Disables input element
autofocus no value Sets the focus on the element after page loads
autocomplete on | off Presents the user with previously entered values
form form-id Refers to the id of the form the <input> element belongs to
formaction URL For type="submit" and type="image", URL or path of the file the submitted data will be processed
formtarget _blank
For type="submit" and type="image", indicates where the response should be displayed
For type="submit" and type="image", how the form data submitted shall be encoded to the server
formmethod get
For type="submit" and type="image", the HTTP method for sending form data
formnovalidate formnovalidate Avoids the form being validated after submission
accept file-extension
For type="file", indicates what file types user can pick to upload
min number
Minimum value
max number
Maximum value
step number
Interval between legal numbers
multiple multiple Allows users to choose more than one value from selection
pattern regexp Regular expression that an <input> element's value is checked against
size number Input control's width in number of characters
src URL For type="image", specifies the image URL or path to be used as submit button
alt text For type="image", specifies text to display when image cannot be loaded
width pixels Width of the input element in pixels. Used by img input types.
height pixels Height of element in pixels. Used by img input types
list datalist-id <datalist> element that contains pre-defined options for an <input> element
dirname inputname Text direction to be submitted

For addional global attributes see our global attributes list.

Obsolete Attributes

Do not use the attributes listed below.  They are not valid in HTML5.
Browser support for these attributes is spotty.

Attribute Description Alternative
autocorrect Specifies to use autocorrection while the user types. n/a
incremental Specifies to treat data entry as live search. n/a
mozactionhint Suggests what to do when enter or return keys are hit. n/a
results Sets maximum number of entries in search results. n/a
webkitdirectory Specifies file picker should only include directories. n/a

Additional Examples

Text Input

A single line <input> element of type text.
The placeholder adds a muted hint to the text input.

<input type="text" name="salary" placeholder="Enter your salary..">


Three <input> elements that are button types:

  • The button type is a normal clickable button.
  • The submit type submits user entered data.
  • The reset type resets all user entered data to its default state.
<input type="button" value="Button">
<input type="submit" value="Submit">
<input type="reset" value="Reset">


Four <input> elements of type checkbox.

Each element is wrapped by a <label> which binds the label text to the controls.
North and East are normal checkboxes, South is checked (selected), and West is disabled.

<label><input type="checkbox" name="north" value="north"> North </label><br />
<label><input type="checkbox" name="east" value="east"> East </label><br />
<label><input type="checkbox" name="south" value="south" checked> South </label><br />
<label><input type="checkbox" name="west" value="west" disabled> West </label>

Radio Buttons

Five <input> elements of type radio.

Each element is wrapped by a <label> which binds the label text to the controls.
The first three are normal checkboxes, Medium Low is checked (selected), and Low is disabled.

<label><input type="radio" name="score" value="high"> High </label><br />
<label><input type="radio" name="score" value="mediumhigh"> Medium High </label><br />
<label><input type="radio" name="score" value="medium"> Medium </label><br />
<label><input type="radio" name="score" value="mediumlow" checked> Medium Low </label><br />
<label><input type="radio" name="score" value="low" disabled> Low </label>

Password Input

An <input> element of type password.
When entering a password the characters are hidden.

<input type="password" name="password" placeholder="Enter password..">

File Upload

An <input> element of type file.
Click the button to select a file.

<input type="file">

Number Input

An <input> element of type number.
Click the up/down buttons to increment/decrement by 1.

<input type="number" value="3">

Date Picker

An <input> element of type date.
Click the control to select a date.

<input type="date">

Time Picker

An <input> element of type time.
Click the control to select a time.

<input type="time">

Range Input

An <input> element of type range.
Slide the thumb to change the value (value is not visible).

<input type="range">

Color Picker

An <input> element of type color.
Click the control to select a color.

Color Picker
<input type="color" value="#F45D48"> Color Picker

Form Tags

The <input> tag is part of a group of tags that are used to create data entry forms. This group is referred to as the Form tag group. Together, they allow you to create comprehensive data input solutions.

Here is a list of form tags

Element Description
<form> Defines a data entry area that contains input elements
<input> Creates an input field in which data can be entered
<label> Creates a label or brief description before input elements
<textarea> Creates a multi-line text input control
<select> Creates a dropdown control
<button> Creates a clickable button that can contain text or an image
<datalist> Specifies a list of options for a textfield (<input>) element
<fieldset> Groups related form elements and displays a box with a legend around these
<legend> Defines a caption for a fieldset

Browser support

This table shows when <input> support started for each browser:

1.0 Sep 2008
1.0 Sep 2002
1.0 Aug 1995
1.0 Jan 2006
1.0 Jan 2003

Note: The HTML5 input types (time, email, color, search, tel, etc.) were released in Oct 2014.

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.