Courses / HTML · Advanced

HTML Input Types

Self-paced 40 sections 36 people viewed this
html html5 html tutorial learn html web development semantic html html forms html accessibility html seo html interview questions html projects beginner to advanced html

Section 17: Input Types and Attributes

Learning Objectives

  • Identify common HTML input types.
  • Understand how type changes a control's behavior.
  • Use required, placeholder, value, min, max, step and maxlength.
  • Choose appropriate inputs for different kinds of data.

1. What Is the input Element?

The input element creates an interactive form control. It is a void element, so it has no closing tag.

<input type="text" name="username">

2. Common Input Types

<form action="/profile" method="post">
  <label for="name">Name</label>
  <input type="text" id="name" name="name">

  <label for="email">Email</label>
  <input type="email" id="email" name="email">

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

  <label for="age">Age</label>
  <input type="number" id="age" name="age" min="1" max="120">

  <label for="birth-date">Date of Birth</label>
  <input type="date" id="birth-date" name="birth_date">

  <label for="website">Website</label>
  <input type="url" id="website" name="website">

  <label for="phone">Phone</label>
  <input type="tel" id="phone" name="phone">

  <label for="search">Search</label>
  <input type="search" id="search" name="search">

  <label for="color">Favorite Color</label>
  <input type="color" id="color" name="color">

  <label for="meeting-time">Meeting Time</label>
  <input type="time" id="meeting-time" name="meeting_time">

  <label for="resume">Resume</label>
  <input type="file" id="resume" name="resume">

  <button type="submit">Submit</button>
</form>

3. Other Useful Types

  • checkbox: select one or more independent options.
  • radio: choose one option from a group sharing the same name.
  • range: choose a value within a range.
  • month: choose a month and year.
  • week: choose a week and year.
  • datetime-local: choose a local date and time.
  • hidden: submit a value that is not displayed as a visible control.
  • submit: submit the form.
  • reset: restore form controls to their initial values.
  • button: a generic button with no automatic form submission.

4. Important Attributes

<input
  type="text"
  name="username"
  id="username"
  value="bikram"
  placeholder="Enter username"
  required
  minlength="3"
  maxlength="30"
  autocomplete="username">
  • type: determines the control's behavior.
  • name: identifies submitted data.
  • id: uniquely identifies an element in the document.
  • value: sets the initial or submitted value, depending on the control.
  • placeholder: provides a short hint, not a replacement for a label.
  • required: requires a value before a normal submission can proceed.
  • readonly: prevents editing but usually allows the value to be submitted.
  • disabled: makes a control unavailable and excludes it from normal form submission.
  • min and max: define numeric or date limits where supported.
  • step: defines allowed increments for supported numeric/date controls.
  • minlength and maxlength: constrain text length.
  • pattern: defines a regular-expression constraint for supported text-like inputs.
  • multiple: allows multiple values for supported types, such as email and file.

5. Number vs Text for Phone Numbers

Use type="tel" for telephone numbers. Phone numbers are identifiers, not quantities, and may contain a leading zero, plus sign or spaces. Number inputs are better suited to numeric quantities.

<label for="phone-number">Phone Number</label>
<input type="tel" id="phone-number" name="phone" autocomplete="tel">

6. File Input

<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="photos">Choose photos</label>
  <input type="file" id="photos" name="photos" accept="image/*" multiple>
  <button type="submit">Upload</button>
</form>

The accept attribute is a file-picker hint, not a security check. The server must validate file types, sizes and content.

7. Hidden Inputs Are Not Secure Storage

<input type="hidden" name="order_id" value="123">

Users can inspect or change hidden input values. Never trust them for prices, permissions, roles or other sensitive decisions.

Practice Exercises

  1. Create a login form with email and password inputs.
  2. Create a date-of-birth field with a label.
  3. Create a number input with a minimum of 1 and maximum of 100.
  4. Create a file input that accepts multiple images.
  5. Explain why a phone number should not normally use type="number".

Revision Quiz

  1. Which input type is appropriate for an email address?
  2. Which type hides characters visually when entering a password?
  3. Which type is suitable for telephone numbers?
  4. What does required do?
  5. What is the difference between disabled and readonly?
  6. Is the accept attribute a security guarantee?

Answer Key and Explanations

  1. email — It enables email-oriented browser behavior and basic format validation.
  2. password — It visually masks entered characters.
  3. tel — Telephone numbers are identifiers, not quantities.
  4. Requires a value — The browser normally blocks submission when the required control is empty.
  5. disabled controls are unavailable and excluded from normal submission; readonly controls cannot be edited but their values are generally submitted.
  6. No. The server must independently validate uploaded files.