HTML tagForms

<input>

A form field: text, email, password, number, date, slider, checkbox, file and many more.

Display: inline-block
Closing tag: None, void element
Permitted content: None, the element is void

On this page

Example
Definition and usage
Syntax
Attributes
Attributes in practice
Browser support
Good practices
Related entries

Example

HTML

<style>
  .fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
  .fields label { display: grid; gap: 4px; }
  .fields .inline { display: flex; align-items: center; gap: 6px; }
  .fields fieldset { border: 0; margin: 0; padding: 0; }
  .fields legend { padding: 0; margin-bottom: 4px; }
</style>
<form class="fields">
  <label>First name <input type="text" name="name" placeholder="e.g. Ania"></label>
  <label>Email <input type="email" name="email" placeholder="ania@example.com"></label>
  <label>Password <input type="password" name="password"></label>
  <label>Age <input type="number" name="age" min="7" max="99" value="16"></label>
  <label>Study minutes per day <input type="range" name="minutes" min="10" max="120" step="10" value="30"></label>
  <label>Course start <input type="date" name="start"></label>
  <label>Theme color <input type="color" name="accent" value="#8b5cf6"></label>
  <label>Search courses <input type="search" name="q" placeholder="HTML, CSS…"></label>
  <label>Profile picture <input type="file" name="avatar" accept="image/*"></label>
  <label class="inline"><input type="checkbox" name="newsletter" checked> I want to receive the newsletter</label>
  <fieldset>
    <legend>Level</legend>
    <label class="inline"><input type="radio" name="level" value="beginner" checked> Beginner</label>
    <label class="inline"><input type="radio" name="level" value="advanced"> Advanced</label>
  </fieldset>
</form>

Preview

Definition and usage

The <input> element is the most versatile form element there is. Its appearance and behavior depend on the type attribute: the same <input> can be a text field, a password field, a slider, a color picker, a checkbox or a button for uploading files. It’s a void element, so it has no closing tag.

Picking the right type is a real convenience. On a phone, type="email" shows a keyboard with an @ key, type="tel" a numeric keypad, and type="date" a native calendar. The browser also checks the format on its own: an email field won’t let through an address without an @, and a number field will reject a value outside the min and max range.

Every field needs a <label>, because the text from the placeholder attribute disappears the moment you start typing and doesn’t replace a label. For a field’s value to reach the server, the field must have a name attribute.

Syntax

<input type="text" name="name">

Attributes

type
text | email | password | number | range | date | time | datetime-local | month | week | color | checkbox | radio | file | search | tel | url | hidden | submit | reset | button | image
The kind of field, text by default. The type determines the appearance, the keyboard shown on a phone, and the validation rules. A hidden field is invisible and stores a value sent along with the form. A type the browser doesn’t support falls back to a plain text field. That’s the case for month and week, for example, which don’t work in every browser.
name
text
The name the field’s value is sent to the server under, for example email=ania@example.com. Fields with no name aren’t sent. Radio buttons with the same name form a group in which only one option can be selected.
value
text
The field’s initial value. In text fields it’s the text filled in at the start, in checkboxes and radio buttons the value sent once checked, and in submit and button buttons the caption on the button.
placeholder
text
A hint visible in an empty field, ideally a sample data format. It disappears once the user starts typing, so it never replaces a <label>.
required
boolean attribute
The field must be filled in (or checked) before the form submits. If you try to submit an empty field, the browser shows a message and places the cursor in it. A field that meets the rules matches the :valid selector, and an invalid one matches :invalid.
disabled
boolean attribute
Disables the field: you can’t click it, tab to it or edit it, and its value won’t be sent with the form. The browser usually grays out a field like this.
readonly
boolean attribute
A read-only field: you can select it, copy text out of it and tab to it, but you can’t change its value. Unlike disabled, the value will be sent. It works on text, number and date fields, but not on checkboxes, radio buttons, sliders or color fields.
checked
boolean attribute
Checks a checkbox or selects a radio button from the start. In a group of radio buttons with the same name, at most one should have checked.
min / max / step
number, date or time
Set the range and the step of values in number, range, date, time and related fields. step="50" allows only values in increments of 50 (0, 50, 100 and so on), and step="any" removes the step restriction. The arrows and the slider stick to these limits, and a value outside the range fails validation.
minlength / maxlength
number of characters
The smallest and largest number of characters allowed in a text field. maxlength simply won’t let you type more, while minlength is checked when the form is submitted. An empty field with no required passes this validation.
pattern
regular expression
A pattern the field’s entire value must match, for example a postal code in the 00-000 format. The browser matches the pattern against the whole text, so you don’t need to add ^ and $. Put a description of the required format next to the field or in the title attribute, which some browsers add to the error message.
multiple
boolean attribute
Allows several values at once: in a file field, pick several files, and in an email field, enter several addresses separated by commas.
accept
MIME types or file extensions
Hints to the file picker what to show, for example image/* (any images), .pdf or image/png, image/jpeg. It’s only a filter in the dialog that the user can bypass, so check the file type on the server anyway.
list
id of a `<datalist>` element
Connects the field to a <datalist> of suggestions. The user sees proposals while typing, but can still type their own value.
autocomplete
on | off | the name of the data, e.g. email, username, current-password, new-password, one-time-code
Tells the browser and the password manager what kind of data fits the field. With current-password, the manager suggests the saved password; with new-password, it offers to generate a strong one; and one-time-code lets you paste a code from a text message with one tap. In a login form, mark the field with the login as username, even if what you type into it is an email.
autofocus
boolean attribute
Places the cursor in the field right after the page loads. Use it sparingly, at most once per page, and only where the field is the main reason for the visit, like a search box. A sudden jump in focus disorients screen reader users.

Attribute	Values	Description
type	text \| email \| password \| number \| range \| date \| time \| datetime-local \| month \| week \| color \| checkbox \| radio \| file \| search \| tel \| url \| hidden \| submit \| reset \| button \| image	The kind of field, `text` by default. The type determines the appearance, the keyboard shown on a phone, and the validation rules. A `hidden` field is invisible and stores a value sent along with the form. A type the browser doesn’t support falls back to a plain text field. That’s the case for `month` and `week`, for example, which don’t work in every browser.
name	text	The name the field’s value is sent to the server under, for example `email=ania@example.com`. Fields with no `name` aren’t sent. Radio buttons with the same name form a group in which only one option can be selected.
value	text	The field’s initial value. In text fields it’s the text filled in at the start, in checkboxes and radio buttons the value sent once checked, and in `submit` and `button` buttons the caption on the button.
placeholder	text	A hint visible in an empty field, ideally a sample data format. It disappears once the user starts typing, so it never replaces a `<label>`.
required	boolean attribute	The field must be filled in (or checked) before the form submits. If you try to submit an empty field, the browser shows a message and places the cursor in it. A field that meets the rules matches the `:valid` selector, and an invalid one matches `:invalid`.
disabled	boolean attribute	Disables the field: you can’t click it, tab to it or edit it, and its value won’t be sent with the form. The browser usually grays out a field like this.
readonly	boolean attribute	A read-only field: you can select it, copy text out of it and tab to it, but you can’t change its value. Unlike `disabled`, the value will be sent. It works on text, number and date fields, but not on checkboxes, radio buttons, sliders or color fields.
checked	boolean attribute	Checks a checkbox or selects a radio button from the start. In a group of radio buttons with the same name, at most one should have `checked`.
min / max / step	number, date or time	Set the range and the step of values in `number`, `range`, `date`, `time` and related fields. `step="50"` allows only values in increments of 50 (0, 50, 100 and so on), and `step="any"` removes the step restriction. The arrows and the slider stick to these limits, and a value outside the range fails validation.
minlength / maxlength	number of characters	The smallest and largest number of characters allowed in a text field. `maxlength` simply won’t let you type more, while `minlength` is checked when the form is submitted. An empty field with no `required` passes this validation.
pattern	regular expression	A pattern the field’s entire value must match, for example a postal code in the `00-000` format. The browser matches the pattern against the whole text, so you don’t need to add `^` and `$`. Put a description of the required format next to the field or in the `title` attribute, which some browsers add to the error message.
multiple	boolean attribute	Allows several values at once: in a `file` field, pick several files, and in an `email` field, enter several addresses separated by commas.
accept	MIME types or file extensions	Hints to the file picker what to show, for example `image/*` (any images), `.pdf` or `image/png, image/jpeg`. It’s only a filter in the dialog that the user can bypass, so check the file type on the server anyway.
list	id of a `<datalist>` element	Connects the field to a `<datalist>` of suggestions. The user sees proposals while typing, but can still type their own value.
autocomplete	on \| off \| the name of the data, e.g. email, username, current-password, new-password, one-time-code	Tells the browser and the password manager what kind of data fits the field. With `current-password`, the manager suggests the saved password; with `new-password`, it offers to generate a strong one; and `one-time-code` lets you paste a code from a text message with one tap. In a login form, mark the field with the login as `username`, even if what you type into it is an email.
autofocus	boolean attribute	Places the cursor in the field right after the page loads. Use it sparingly, at most once per page, and only where the field is the main reason for the visit, like a search box. A sudden jump in focus disorients screen reader users.

The element also supports all global attributes, such as class, id, style and hidden.

Attributes in practice

type

The kind of field, text by default. The type determines the appearance, the keyboard shown on a phone, and the validation rules. A hidden field is invisible and stores a value sent along with the form. A type the browser doesn’t support falls back to a plain text field. That’s the case for month and week, for example, which don’t work in every browser.

HTML

<form>
  <p><label>Phone <input type="tel" name="phone" placeholder="600 100 200"></label></p>
  <p><label>Website <input type="url" name="website" placeholder="https://"></label></p>
  <p><label>Lesson time <input type="time" name="time" value="18:30"></label></p>
  <p><label>Deadline <input type="datetime-local" name="deadline"></label></p>
  <p><label>Starting month <input type="month" name="month"></label></p>
  <input type="hidden" name="course" value="html-101">
  <p>
    <input type="submit" value="Send">
    <input type="reset" value="Clear">
    <input type="button" value="Preview">
  </p>
</form>

Preview

name

text

The name the field’s value is sent to the server under, for example email=ania@example.com. Fields with no name aren’t sent. Radio buttons with the same name form a group in which only one option can be selected.

HTML

<p>How do you want to learn?</p>
<label><input type="radio" name="mode" value="video"> Video</label>
<label><input type="radio" name="mode" value="text"> Text</label>
<label><input type="radio" name="mode" value="practice"> Exercises</label>

Preview

value

text

The field’s initial value. In text fields it’s the text filled in at the start, in checkboxes and radio buttons the value sent once checked, and in submit and button buttons the caption on the button.

HTML

<p><label>Username <input type="text" name="username" value="ania_codes"></label></p>
<p><label><input type="checkbox" name="topics" value="css" checked> CSS</label></p>
<input type="submit" value="Save changes">

Preview

placeholder

text

A hint visible in an empty field, ideally a sample data format. It disappears once the user starts typing, so it never replaces a <label>.

HTML

<label for="phone">Phone</label>
<input type="tel" id="phone" name="phone" placeholder="e.g. 600 100 200">

Preview

required

boolean attribute

The field must be filled in (or checked) before the form submits. If you try to submit an empty field, the browser shows a message and places the cursor in it. A field that meets the rules matches the :valid selector, and an invalid one matches :invalid.

HTML

<form>
  <label>Email <input type="email" name="email" required></label>
  <button>Send</button>
</form>

Preview

disabled

boolean attribute

Disables the field: you can’t click it, tab to it or edit it, and its value won’t be sent with the form. The browser usually grays out a field like this.

HTML

<p><label>Promo code <input type="text" name="promo" value="FALL2026" disabled></label></p>
<p><label><input type="checkbox" name="certificate" disabled> Certificate (after finishing the course)</label></p>

Preview

readonly

boolean attribute

A read-only field: you can select it, copy text out of it and tab to it, but you can’t change its value. Unlike disabled, the value will be sent. It works on text, number and date fields, but not on checkboxes, radio buttons, sliders or color fields.

HTML

<label>Your referral link
  <input type="url" name="referral" value="https://www.codeworlds.com/?ref=ania" size="34" readonly>
</label>

Preview

checked

boolean attribute

Checks a checkbox or selects a radio button from the start. In a group of radio buttons with the same name, at most one should have checked.

HTML

<p><label><input type="checkbox" name="reminders" checked> Study reminders</label></p>
<p>
  <label><input type="radio" name="plan" value="monthly"> Monthly</label>
  <label><input type="radio" name="plan" value="yearly" checked> Yearly</label>
</p>

Preview

min / max / step

number, date or time

Set the range and the step of values in number, range, date, time and related fields. step="50" allows only values in increments of 50 (0, 50, 100 and so on), and step="any" removes the step restriction. The arrows and the slider stick to these limits, and a value outside the range fails validation.

HTML

<p><label>Number of participants <input type="number" name="seats" min="1" max="10" value="1"></label></p>
<p><label>Budget in USD <input type="range" name="budget" min="0" max="500" step="50" value="150"></label></p>
<p><label>Deadline <input type="date" name="date" min="2026-10-01" max="2026-12-31"></label></p>

Preview

minlength / maxlength

number of characters

The smallest and largest number of characters allowed in a text field. maxlength simply won’t let you type more, while minlength is checked when the form is submitted. An empty field with no required passes this validation.

HTML

<form>
  <label>Username
    <input type="text" name="username" minlength="3" maxlength="16" required>
  </label>
  <button>Create account</button>
</form>

Preview

pattern

regular expression

A pattern the field’s entire value must match, for example a postal code in the 00-000 format. The browser matches the pattern against the whole text, so you don’t need to add ^ and $. Put a description of the required format next to the field or in the title attribute, which some browsers add to the error message.

HTML

<form>
  <label>Postal code
    <input type="text" name="postal" pattern="[0-9]{2}-[0-9]{3}" placeholder="00-000" title="Two digits, a dash and three digits">
  </label>
  <button>Check</button>
</form>

Preview

multiple

boolean attribute

Allows several values at once: in a file field, pick several files, and in an email field, enter several addresses separated by commas.

HTML

<p><label>Project screenshots <input type="file" name="screens" accept="image/*" multiple></label></p>
<p><label>Invite friends <input type="email" name="friends" size="34" placeholder="ola@example.com, kuba@example.com" multiple></label></p>

Preview

accept

MIME types or file extensions

Hints to the file picker what to show, for example image/* (any images), .pdf or image/png, image/jpeg. It’s only a filter in the dialog that the user can bypass, so check the file type on the server anyway.

HTML

<p><label>Avatar (PNG or JPG) <input type="file" name="avatar" accept="image/png, image/jpeg"></label></p>
<p><label>Resume in PDF <input type="file" name="cv" accept=".pdf,application/pdf"></label></p>

Preview

list

id of a `<datalist>` element

Connects the field to a <datalist> of suggestions. The user sees proposals while typing, but can still type their own value.

HTML

<label>Favorite language
  <input type="text" name="language" list="languages">
</label>
<datalist id="languages">
  <option value="JavaScript">
  <option value="Python">
  <option value="TypeScript">
  <option value="Go">
</datalist>

Preview

autocomplete

on | off | the name of the data, e.g. email, username, current-password, new-password, one-time-code

Tells the browser and the password manager what kind of data fits the field. With current-password, the manager suggests the saved password; with new-password, it offers to generate a strong one; and one-time-code lets you paste a code from a text message with one tap. In a login form, mark the field with the login as username, even if what you type into it is an email.

HTML

<form>
  <p><label>Email <input type="email" name="email" autocomplete="username"></label></p>
  <p><label>Password <input type="password" name="password" autocomplete="current-password"></label></p>
  <p><label>Code from text message <input type="text" name="code" inputmode="numeric" autocomplete="one-time-code"></label></p>
</form>

Preview

autofocus

boolean attribute

Places the cursor in the field right after the page loads. Use it sparingly, at most once per page, and only where the field is the main reason for the visit, like a search box. A sudden jump in focus disorients screen reader users.

HTML

<label>Search lessons <input type="search" name="q" autofocus></label>

Preview

In a preview embedded in a frame, the browser may ignore autofocus.

Browser support

Widely available

Works in all modern browsers, phones included. You can use it without worry.

Chrome
Edge
Firefox
Safari

Good practices

Connect every field to a label: wrap it in <label>, or give the field an id and point to it in <label for="…">. Clicking the label will then place the cursor in the field.
Don’t use type="number" for phone numbers, postal codes or card numbers. This type adds arrows for increasing the value and is meant for numbers you do arithmetic with, not for strings of digits. Choose type="tel" or type="text" with inputmode="numeric".
Browser validation (required, pattern, min) helps the user, but doesn’t protect the server. Always validate data on the server too.

Related entries

Spotted a mistake or missing an example? Write to us.

Free lessonsPractice HTML in the HTML and CSS courseExercises with hints, a code editor and progress saved as you go.See the course