Codectionary / Developer documentation / HTML

<input>

The <input> element creates interactive form controls for collecting user data. Its behavior changes dramatically based on the type attribute — a single element can become a text field, checkbox, radio button, date picker, file uploader, and more. It is a void (self-closing) element with no closing tag or child content.

Syntax

<input type="text" name="fieldname" placeholder="Enter value">

Examples

Common Input Types

A few of the most frequently used input types.

<input type="text" placeholder="Name">
<input type="email" placeholder="Email">
<input type="password" placeholder="Password">
<input type="number" placeholder="Age">
<input type="date">

Checkbox and Radio Buttons

Using inputs for multiple-choice selections.

<label><input type="checkbox" name="subscribe" checked> Subscribe to newsletter</label>

<label><input type="radio" name="plan" value="free"> Free</label>
<label><input type="radio" name="plan" value="pro"> Pro</label>

Input Validation Attributes

Using built-in HTML validation without JavaScript.

<input type="email" required placeholder="you@example.com">
<input type="text" minlength="3" maxlength="20" pattern="[A-Za-z]+" placeholder="Letters only">
<input type="number" min="1" max="100" step="1">

Attributes

  • type (string): Determines the input's behavior: text, email, password, number, checkbox, radio, date, file, etc.
  • name (string): Identifies the field when the form data is submitted
  • value (string): The input's current or default value
  • placeholder (string): Hint text shown when the field is empty
  • required (boolean): Marks the field as mandatory for form submission
  • disabled (boolean): Disables the input and excludes it from form submission

Best practices

  • Always pair an <input> with a <label> using matching for and id attributes
  • Use the most specific type available (email, tel, date, number) to get built-in validation and the right mobile keyboard
  • Use the name attribute consistently — it is what actually gets sent to the server, not the id
  • Rely on built-in validation attributes (required, pattern, min, max) before reaching for JavaScript
  • Never use placeholder text as a replacement for a proper label — it disappears once the user starts typing

At a glance

Purpose
Structure and meaning for web content
File extension
.html · .htm
Runs in
Web browsers
Usually used with
CSS and JavaScript

Specifications & further reading

Related HTML documentation

<button>
The <button> element creates a clickable button that can trigger actions like submitting a form, resetting a form, or running custom JavaScript. Unlike <input type="button">, <button> can contain other HTML content such as icons or styled text, not just plain text. Its type attribute determines its default behavior within a form.<label>
The <label> element defines a caption for a form control, improving both usability and accessibility. Clicking a label activates or focuses its associated input — useful for small targets like checkboxes and radio buttons. Labels can be associated with an input either by wrapping it, or by using a for attribute that matches the input's id.<textarea>
The <textarea> element creates a multi-line plain-text input control, ideal for comments, messages, and any content longer than a single line. Unlike <input>, its default value is placed between the opening and closing tags rather than in a value attribute, and users can typically resize it by dragging its corner.<select>
The <select> element creates a dropdown list of options, letting users pick one or more predefined values. Each choice is defined with an <option> element inside it. Related options can be grouped visually using <optgroup>. It is a compact way to offer a constrained set of choices without the space a list of radio buttons would need.