HTML <input> Tag
The <input> tag is used in HTML forms to define the field where the user can enter data. Tag description, attributes and using examples.
The <input> tag is used within the <form> element and defines fields for user input. The type of the field — a text box, checkbox, radio button, password field, file picker, and many more — is determined by the value of the type attribute. The element is empty: it has no text content and carries only attributes.
<input> belongs to the group of form elements, and it is one of the most-used tags on interactive pages. Almost every login box, search bar, and signup form is built from one or more <input> elements.
To label a field so users (and assistive technology) know what it is for, pair it with a <label> tag. To turn input into an action — submitting or resetting the form — use a submit/reset input or the <button> element.
This page covers the syntax, every type value with runnable examples, how name/value pairs are submitted, label association, and built-in HTML validation.
Syntax
The <input> tag is empty, which means that the closing tag isn’t required. But in XHTML, the (<input>) tag must be closed (<input/>).
Example of the HTML <input> tag:
Example of HTML <input> Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/form/submit" method="get">
<input type="email" name="user_email" placeholder="Enter your email" />
<input type="submit" value="Submit" />
</form>
</body>
</html>Example of the HTML <input> tag with the HTML <label> tag:
Example of HTML <input> Tag with the HTML <label> tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.form-group { margin-bottom: 10px; }
</style>
</head>
<body>
<form action="/form/submit" method="get">
<div class="form-group">
<label for="first_name">Your Name:</label>
<input type="text" id="first_name" name="first_name" />
</div>
<div class="form-group">
<label for="last_name">Your Surname:</label>
<input type="text" id="last_name" name="last_name" />
</div>
<div class="form-group">
<label for="user_email">Enter Your E-Mail:</label>
<input type="email" id="user_email" name="user_email" />
</div>
<input type="submit" value="Submit" />
</form>
</body>
</html>Associating a label with an input
A bare input box gives users no clue about what to type. The <label> tag fixes that, and it does more than show text:
- Screen readers announce the label when the input gains focus, so assistive-technology users know what the field expects.
- The click target grows. Clicking the label text focuses the input (and toggles a checkbox or radio). This is a big usability win on small checkboxes.
There are two ways to associate a label with an input:
1. Explicit — for matches id. The label's for attribute must equal the input's id:
<label for="username">Username:</label>
<input type="text" id="username" name="username" />2. Implicit — wrap the input inside the label. No id/for needed:
<label>
Username:
<input type="text" name="username" />
</label>Prefer the explicit form when your CSS layout separates the label and field. Either way, give every input a label — the placeholder attribute is not a substitute, because the hint disappears as soon as the user starts typing.
Attributes
The main attribute that determines the type of input field is type. If the attribute is missing, the default value is "text".
| Attribute | Value | Description |
|---|---|---|
| accept | audio/* video/* image/* MIME_type | Specifies the types of files you can send via the file upload field. (Used with the type="file"). |
| align | left right top middle bottom | Defines the alignment type of the image. (Used only with images). Not supported in HTML5. |
| alt | text | Defines the alternate text for the image. (Used only with images). |
| autocomplete | on off | Enables/disables autocomplete. New attribute in HTML5. |
| autofocus | autofocus | Indicates that the form field should receive focus after the page loads. New attribute in HTML5. |
| checked | checked | Indicates that the element should be preselected when the page loads. (Used only for <input type = "checkbox"> and <input type = "radio">). |
| disabled | disabled | Indicates that the element must be not available for user interaction. |
| form | form_id | Indicates the form (specified by the <form> element) of the control element. The value is the form identifier (id) in the same document. New attribute in HTML5. |
| formaction | URL | Specifies the address where the form data will be sent when clicking on the button. (Used only for <input type = "image"> and <input type = "submit">). |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain | Determines how form data is encoded before sending it to the server. (Used only with <input type="image"> and <input type="submit">). Values: application/x-www-form-urlencoded (default, encodes all characters), multipart/form-data (no encoding, used for file uploads), text/plain (spaces become +, other characters not encoded). |
| formmethod | get post | Indicates HTTP Request Method, which will be used when sending the form data. (Used only for <input type = "image"> and <input type = "submit">). get sends form data in the address bar. post sends data to the server for processing. |
| formnovalidate | formnovalidate | Indicates, that it is not necessary to check the data for correctness. (Used only for <input type = "submit">). |
| formtarget | _blank _self _parent _top | Specifies where to display the response after submitting the form. (Used only for <input type = "image"> and <input type = "submit">). |
| height | pixels | Defines the height of the element (Used only for <input type = "image">). |
| inputmode | none text decimal numeric tel search email url | Hints which virtual keyboard layout to show on touch devices (for example numeric shows a digits-only keypad). |
| list | datalist_id | Defines a list of options from which the user can choose. The value for the attribute is the id of the <datalist> element. |
| max | number date | Sets the upper value for entering a number or a date. |
| maxlength | number | Defines the maximal number of symbols, that the user can input. |
| min | number date | Sets the minimal value for entering a number or a date. |
| multiple | multiple | Indicates that the user can input more than one value in the element (only for <input type = "file"> and <input type = "email">). |
| name | text | Defines the name of the element. (Used for form identification). |
| pattern | regular expression | Specifies a regular expression, according to which you need to enter and verify data in the form field. (Only for control elements text, search, tel, url, email and password). |
| placeholder | text | Defines a short prompt that describes the expected value for the input field. The user sees a hint in the input field. It disappears when the user starts entering data or when the field receives focus. |
| readonly | readonly | Defines that the input field is enabled only for reading. The user cannot make changes. |
| required | required | Indicates that the input field must be completed before submitting the form. |
| size | number | Defines the visible width of the text field in characters. (Only for text, search, tel, url, email and password). Default is 20 characters. |
| src | URL | Indicates the path to the image that is used as the "send" button. (Only used for <input type = "image">). |
| step | number | Sets the increment step (increment value) for numeric fields. Used with the min and max attributes which define the minimal and maximal values. |
| type | button checkbox color date datetime (deprecated) datetime-local email file hidden image month number password radio range reset search submit tel text time url week | Defines the type of the input field. |
| value | text | Defines the value of the element. |
| width | width | Defines the width of the element (only for <input type = "image">). |
The <input> tag also supports the Global attributes and the Event Attributes.
Values of the type attribute
| Value | Description |
|---|---|
| button | Defines the active button. |
| checkbox | Check the boxes (the user can select more than one of the options). |
| color | Specifies a color palette (user can select color values in hexadecimal). |
| date | Defines the input field for calendar date. |
| datetime (deprecated) | Defines the input field for date and time. (Deprecated in HTML5, use datetime-local instead.) |
| datetime-local | Defines the input field for date and time without a time zone. |
| Defines the input field for e-mail. | |
| file | Sets the control with the Browse button, clicking on which you can select and load the file. |
| hidden | Defines a hidden input field. It is not visible to the user. |
| image | Indicates that an image is used instead of a button to send data to the server. The path to the image is indicated by the src attribute. The alt attribute can also be used to specify alternative text, the height and width attributes to specify the height and width of the image. |
| month | Defines the field of selecting a month, after which the data will be displayed as year-month (for example: 2018-07). |
| number | Defines the input field for numbers. |
| password | Defines a field for entering a password (the entered characters are displayed as asterisks, dots or other characters). |
| radio | Creates radio button (when choosing one radio button all others will be disabled). |
| range | Creates a slider to select numbers in the specified range. The default range is from 0 to 100. The range of numbers is specified by the min and max attributes. |
| reset | Defines a button for resetting information. |
| search | Creates a text field for search. |
| submit | Creates a button of submitting the form data (“submit” button). |
| text | Creates a single line text field. |
| time | Specifies a numeric field for entering time in a 24-hour format (for example, 13:45). |
| url | Creates an input field for URL. |
| week | Creates a field for selecting the week, after which the data will be displayed as year-week (for example: 2018-W25). |
Examples of the common input types
The type value changes how an input looks and how it behaves. Here are the ones you will reach for most often.
Checkboxes and grouping with name
A checkbox lets the user turn an option on or off. Use checked to pre-select it. When several checkboxes share the same name, they form a group, and each checked box is submitted separately as name=value:
<form>
<label><input type="checkbox" name="topping" value="cheese" checked /> Cheese</label>
<label><input type="checkbox" name="topping" value="bacon" /> Bacon</label>
<label><input type="checkbox" name="topping" value="onion" /> Onion</label>
</form>Submitting with Cheese and Onion checked sends topping=cheese&topping=onion.
Radio buttons (shared name)
Radio buttons that share the same name are mutually exclusive — selecting one clears the others. Always set a value on each so the server knows which option was picked:
<form>
<p>Choose a size:</p>
<label><input type="radio" name="size" value="s" /> Small</label>
<label><input type="radio" name="size" value="m" checked /> Medium</label>
<label><input type="radio" name="size" value="l" /> Large</label>
</form>File upload
type="file" adds a Browse button. Add accept to filter the file picker and multiple to allow selecting more than one file:
<form>
<label for="avatar">Profile picture:</label>
<input type="file" id="avatar" name="avatar" accept="image/*" />
</form>Number with min, max and step
type="number" shows a numeric field with spinner arrows. min/max bound the range and step sets the increment (use step="0.01" for currency, step="any" to allow any decimal):
<form>
<label for="qty">Quantity (1–10):</label>
<input type="number" id="qty" name="qty" min="1" max="10" step="1" value="1" />
</form>Range slider
type="range" is a slider for an approximate value the user does not need to see exactly. It uses the same min, max and step attributes:
<form>
<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume" min="0" max="100" step="5" value="50" />
</form>Password
type="password" masks the typed characters. The value is still sent in plain text, so the form should be submitted over HTTPS:
<form>
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd" minlength="8" required />
</form>How name and value are submitted
When a form is submitted, the browser builds a query string of name=value pairs from its controls. The role of value depends on the input type:
- Text-like fields (
text,email,url,password,number,search,tel):valueis the default text shown in the box; whatever the user types replaces it and is submitted. - Radio and checkbox:
valueis the data sent only when that control is checked. An unchecked box submits nothing at all. This is why each option needs its ownvalue. - Submit and button:
valueis the label printed on the button. A named submit button also sends itsname=valuepair, which lets the server tell which button was pressed.
An input with no name is never submitted — it can still be useful for client-side scripting, but the server never sees it.
Form validation
Browsers can validate inputs before the form is sent, with no JavaScript. If a field fails, the browser blocks submission and shows a message. The main tools are:
required— the field must not be empty.type="email"/type="url"— the value must be a syntactically valid email or URL.pattern— a regular expression the value must match (works on text, search, tel, url, email, password).min/max/step— numeric and date range limits.minlength/maxlength— string length limits.
This example combines them. Try submitting it empty, then with bad data:
<!DOCTYPE html>
<html>
<head>
<title>Form validation</title>
<style>
.form-group { margin-bottom: 10px; }
label { display: block; }
</style>
</head>
<body>
<form action="/form/submit" method="post">
<div class="form-group">
<label for="email">Email (required):</label>
<input type="email" id="email" name="email" required />
</div>
<div class="form-group">
<label for="site">Website (must start with https://):</label>
<input type="url" id="site" name="site" pattern="https://.*" placeholder="https://example.com" />
</div>
<div class="form-group">
<label for="zip">ZIP code (5 digits):</label>
<input type="text" id="zip" name="zip" pattern="[0-9]{5}" maxlength="5" required />
</div>
<div class="form-group">
<label for="age">Age (18–99):</label>
<input type="number" id="age" name="age" min="18" max="99" step="1" required />
</div>
<input type="submit" value="Submit" />
</form>
</body>
</html>To skip this built-in check for a particular submit button, add formnovalidate. To target a field with CSS, the :valid, :invalid, and :required pseudo-classes match validation state. For more about wiring up forms and their submission, see the <form> tag.