Description

The HTML <input> element is used to create interactive controls for web forms. It is one of the most versatile HTML elements, with many different types available including text, password, email, number, checkbox, radio, and more.

The <input> element is a void element (self-closing) and its behavior changes dramatically based on the type attribute.

CSS Display:inline-block

Syntax

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

Popular Attributes

AttributeDescription
typeRequiredSpecifies the type of the element. Behavior changes based on the type value.
nameThe name of the form control, used to identify the field when submitting form data.
valueThe initial or current value of the element.
placeholderA hint displayed in the input field before the user enters a value.
requiredWhen present, the user must fill in the field before submitting the form.
disabledDisables the element, preventing user interaction and excluding it from form submission.
readonlyMakes the field read-only — the user can see but not modify the value.
maxlengthSpecifies the maximum number of characters allowed in the input.

This element also supports global HTML attributes such as class, id, style, data-*, and more.

Examples

Text Input
<input type="text" placeholder="Enter your name">
A basic text input field with a placeholder.
Email Input
<input type="email" placeholder="you@example.com" required>
An email input with built-in validation. The browser will check for a valid email format.
Checkbox
<label> <input type="checkbox" checked> I agree to the terms </label>
A checkbox input wrapped in a label for better accessibility.

Notes

Always associate <input> elements with a <label> element for accessibility. You can do this by wrapping the input in a label or by using the for attribute on the label matching the input's id.

Use the appropriate type attribute for better mobile UX — for example, type="email" shows an optimized keyboard on mobile devices.

Related Tags

Last updated: 7th April 2026