HTML: Input Tag

By Xah Lee. Date: . Last updated: .

What is html input tag

what is html input tag

(ai answer)

HTML <input> Tag Tutorial

The <input> tag is one of the most important and versatile elements in HTML forms. It creates interactive controls for users to enter data — text, numbers, dates, files, choices, and more.

Basic Syntax

<input type="text" name="username" id="username" placeholder="Enter your name">

The type Attribute (Most Important)

This determines what kind of input control is shown.

Type Purpose Example
text Single-line text Default
password Hidden characters Login forms
email Email validation Contact info
number Numeric input with spinner Quantity
tel Telephone number Phone
url Web address Website
search Search field (often with clear button) Search bars
date Date picker Birthdate
time Time picker Appointment
datetime-local Date + time Event scheduling
month / week Month or week picker Billing
color Color picker Design tools
checkbox Toggle (yes/no) Options
radio Select one from group Gender
file File upload Attachments
range Slider Volume, price
hidden Not visible to user CSRF (Cross-Site Request Forgery) tokens
submit Submit button Form submission
reset Reset form Clear all fields
button Generic clickable button Custom JS actions

Common Attributes

Attribute Description Example
name Name sent to server with form data name="email"
id Unique identifier for CSS/JS id="email"
value Pre-filled value value="John"
placeholder Hint text that disappears on focus placeholder="your@email.com"
required Makes field mandatory required
readonly User cannot edit readonly
disabled Grayed out and not submittable disabled
autofocus Automatically focused on page load autofocus
autocomplete Enable/disable browser suggestions autocomplete="off"
min / max For number, range, date min="18" max="100"
step Increment for number/range step="0.5"
pattern Regex validation pattern="[A-Za-z]{3,}"
maxlength Maximum characters maxlength="50"
size Visible width (characters) size="30"
multiple Allow multiple selections (file, email) multiple
accept File types allowed accept="image/*"

Practical Examples

1. Basic Login Form

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required><br><br>

  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required><br><br>

  <input type="submit" value="Login">
</form>

2. Registration Form with Various Types

<form>
  <label>Full Name: <input type="text" name="fullname" required></label><br>

  <label>Age: <input type="number" name="age" min="13" max="120"></label><br>

  <label>Birthday: <input type="date" name="birthdate"></label><br>

  <label>Website: <input type="url" name="website"></label><br>

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

  <fieldset>
    <legend>Gender</legend>
    <label><input type="radio" name="gender" value="male"> Male</label>
    <label><input type="radio" name="gender" value="female"> Female</label>
  </fieldset>

  <label>Profile Picture: <input type="file" name="photo" accept="image/*"></label><br>

  <input type="submit" value="Register">
</form>

3. Range Slider with Live Value

<label>Volume: <input type="range" id="volume" min="0" max="100" value="50"></label>
<output id="volumeValue">50</output>

<script>
  const slider = document.getElementById('volume');
  const output = document.getElementById('volumeValue');
  slider.addEventListener('input', () => output.value = slider.value);
</script>

Styling Tips

input {
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.2);
}

input[type="checkbox"], input[type="radio"] {
  width: auto;
}

Best Practices

  1. Always use labels — improves accessibility and click area.

    <label for="username">Username</label>
<input id="username" ...>

  2. Group related inputs with <fieldset> and <legend>.

  3. Provide clear validation messages using JavaScript or HTML 5 validation.

  4. Use autocomplete wisely for better UX on forms users fill often.

  5. Test on mobile — many input types (date, email, tel) trigger special keyboards.

  6. Accessibility: Add aria-describedby for extra help text.

HTML 5 Validation Example

<input type="email" required pattern=".+@.+\..+">