How to Use the input Element

The HTML input element is a form control for entering or choosing data such as text, dates, and numbers.

The answer first

Minimal example

<label for="user-name">Name</label>
<input id="user-name" name="name" type="text">

When the for on the label and the id on the input have the same value, the label is associated with that control. The name becomes the data name when a form is submitted.

Submitting this example sends a GET request to this page, so the entered name appears in the URL query. A real form also needs a destination and server-side handling.

Choose a role with type

type	Use it for	Example
text	Ordinary one-line text	Name, search term
email	An email address	Contact details
password	Text hidden on screen	Password
checkbox	Independently selectable items	Agree to terms
radio	One choice from a group	Payment method
number	A numerical value	Quantity
date	A date	Booking date
file	Selecting files	Image upload

If type is missing or has an unknown value, the input uses the ordinary text state. Explicitly choosing the purpose makes the markup easier to understand and helps the browser provide an appropriate control.

Check boxes and radio buttons

Check boxes can be selected independently. To make radio buttons a one-choice group, give the inputs in that group the same name.

<fieldset>
  <legend>Contact method</legend>
  <label><input type="radio" name="contact" value="email"> Email</label>
  <label><input type="radio" name="contact" value="phone"> Phone</label>
</fieldset>

Wrapping each control in a label also makes the label text part of the clickable area.

Set input conditions

Attributes such as required, min, max, minlength, maxlength, and pattern let the browser check conditions for an input.

<label for="age">Age</label>
<input id="age" name="age" type="number" min="0" max="130" required>

This is client-side assistance and validation. When important data is received, the server must check the conditions again.

Common mistakes

• Writing <input>...</input>. An input is a void element and has no end tag.
• Using only a placeholder to explain the field. Use a persistent label instead.
• Using type="text" for a password. Use password when the value should be hidden on screen.
• Using number for a postal code or member ID. An identifier such as 007 is usually text, not a quantity to calculate.
• Relying only on browser validation as a security measure. Validate submitted data on the server too.

Going further

The input element is one element, but its allowed value, displayed control, applicable attributes, and validation behavior depend on its type state. Choosing the state that matches the form's purpose helps reduce mistakes and supports keyboard and assistive-technology users.

Check it in Atlas

For how each type selects a state and changes applicable attributes and DOM APIs, see the input element in Yugien Atlas. For label association and accessible names, also see the label element in Atlas.