<input>

<input> creates a form control whose behavior depends on type. Its default type is text. It is a void element: it has no child content or closing tag.

Start with a labeled control

<form action="#">
  <label for="email">Email address</label>
  <input id="email" name="email" type="email" autocomplete="email" required />
  <button type="submit">Check address</button>
</form>

/* Optional presentation */
label {
  display: block;
  margin: 0.75rem 0 0.25rem;
}
input,
select,
textarea,
button {
  font: inherit;
  max-width: 100%;
}

Try an empty value and then a value without an email address structure. The browser gives constraint-validation feedback. The sandbox blocks a final submission; use an invented address.

Choose a type for the data

email and url provide format validation and may change the mobile keyboard. tel suggests a telephone keyboard but does not impose a universal phone-number format. number is for a numeric quantity, not an identifier such as a ZIP code. Use text with inputmode="numeric" when digits are an identifier and leading zeros matter.

Date and time controls have browser- and platform-specific interfaces. A visible picker is not guaranteed by basic support for the input element. Test the individual type and keep an understandable label.

Attributes that change behavior

name identifies the submitted field; id associates its label. required, minlength, maxlength, min, max, step, and pattern apply only to relevant types. A pattern is matched against the whole nonempty value; it does not make an optional empty field required.

disabled prevents editing, ordinary focus, and submission. readonly prevents editing for types that support it but generally allows focus and submission. A hidden input is not a place to store a secret: it remains visible in source and developer tools.

Checkbox and radio controls

<fieldset>
  <legend>Delivery frequency</legend>
  <label
    ><input type="radio" name="frequency" value="weekly" checked />
    Weekly</label
  >
  <label><input type="radio" name="frequency" value="monthly" /> Monthly</label>
</fieldset>

/* Optional presentation */
label {
  display: block;
  margin: 0.75rem 0 0.25rem;
}
input,
select,
textarea,
button {
  font: inherit;
  max-width: 100%;
}

The shared name makes the radios a group. Tab reaches the group and arrow keys usually move between choices. A checkbox represents an independent checked state; unchecked controls do not submit a name/value pair.

Common mistakes

A placeholder is not a persistent label. Do not use an overly narrow email pattern that rejects valid addresses. File accept is a selection hint, not a guarantee of content type. Validate submitted data on the server regardless of browser checks.

Sources and browser support

MDN: input describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.