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

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

HTML Input Types