HTML <input> Tag

What You’ll Learn

By the end of this tutorial, you’ll create interactive form controls with the <input> element — text fields, passwords, checkboxes, radio buttons, and submit buttons.

The <input> tag is a versatile HTML element for user interaction in forms. This guide covers syntax, input types, attributes, accessibility, and best practices for beginners and web developers alike.

What Is the <input> Tag?

The input element (<input>) creates form controls that let users enter data or make selections on a web page. It is a void element — it has no closing tag and does not wrap child content.

Inputs usually live inside a <form> element so their values can be submitted to a server. Pair every input with a <label> (or accessible name) so users and assistive technologies understand each field.

📝 Syntax

Specify the type attribute to define the kind of form control:

<input type="text" placeholder="Enter your text here">

Syntax Rules

• input is a void element — no </input> closing tag in HTML.
• The type attribute determines control behavior (defaults to text if omitted).
• Use name so the field value is included when the form is submitted.
• Connect label for to input id for accessible field names.
• Wrap related inputs in a form with action and method for submission.

⚖️ <input> vs <textarea>

Both collect text, but serve different needs:

⚖️ input type="submit" vs <button>

Both can submit forms, but buttons are more flexible:

Examples Gallery

Attributes, text fields, passwords, checkboxes, radio buttons, and submit inputs with copy-ready code and live previews.

<input type="text" name="fullname" id="fullname" placeholder="Your full name" required>

<label for="username">Username:</label>
<input type="text" id="username" name="username">

<label for="password">Password:</label>
<input type="password" id="password" name="password" autocomplete="current-password">

<input type="checkbox" id="agree" name="agree" value="yes">
<label for="agree">I agree to the terms and conditions</label>

<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>

<form action="/submit" method="post">
  <input type="submit" value="Submit">
</form>

♿ Accessibility

Form inputs must be usable for keyboard and screen reader users:

• Always use labels — connect label for to input id.
• Don’t rely on placeholder alone — placeholders disappear when typing and are not a substitute for labels.
• Group related radios — use fieldset and legend for radio and checkbox groups when helpful.
• Visible focus — ensure keyboard users can see which field is active.
• Error messages — link validation errors to fields with aria-describedby when using custom validation.

💡 Best Practices