Lecture 7: HTML Forms & Form Elements

BMC201 - Web Technology

Mr. Prashant Kumar Nag

2026-02-04

Lecture 7

HTML Forms & Form Elements

Week 2 | Unit I: HTML Forms & CSS Introduction
BMC201 - Web Technology
Mr. Prashant Kumar Nag, Assistant Professor

Learning Objectives

  • Understand HTML forms and their purpose
  • Use various input types effectively
  • Create labels for accessibility
  • Implement form validation
  • Structure forms semantically

The Form Element

Forms collect user input:

<form action="/submit" method="POST">
    <!-- Form inputs here -->
    <input type="text" name="username">
    <button type="submit">Submit</button>
</form>

Key attributes: - action: Where to send form data - method: GET or POST - name: Identifies the form

HTTP Methods: GET vs POST

GET Method

  • Data in URL
  • Limited length
  • Less secure
  • Use for searches

POST Method

  • Data in request body
  • No size limit
  • More secure
  • Use for sensitive data

HTML5 Input Types - Part 1

<input type="text" placeholder="Enter name">        <!-- Text input -->
<input type="password" name="pwd">                 <!-- Hide as dots -->
<input type="email" name="email">                  <!-- Email validation -->
<input type="number" name="age" min="0" max="120"> <!-- Numbers only -->
<input type="date" name="birthday">                <!-- Date picker -->

Each type has built-in validation!

HTML5 Input Types - Part 2

<input type="url" name="website">          <!-- URL validation -->
<input type="tel" name="phone">            <!-- Telephone input -->
<input type="color" name="favorite">       <!-- Color picker -->
<input type="range" min="0" max="10">      <!-- Slider -->
<input type="search" name="query">         <!-- Search optimized -->

Checkboxes & Radio Buttons

Checkboxes (multiple selections):

<input type="checkbox" name="interests" value="sports"> Sports
<input type="checkbox" name="interests" value="music"> Music
<input type="checkbox" name="interests" value="coding"> Coding

Radio Buttons (one selection only):

<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<input type="radio" name="gender" value="other"> Other

Same name = grouped together

Dropdowns & Text Areas

Dropdown Select:

<select name="country">
    <option value="us">United States</option>
    <option value="uk">United Kingdom</option>
    <option value="in">India</option>
</select>

Text Area (Multi-line):

<textarea name="message" rows="4" cols="50">
Type your message here...
</textarea>

The Label Element

Labels associate text with inputs for accessibility:

<!-- Bad: User can't click text to focus -->
<input type="checkbox" id="agree"> I agree

<!-- Good: User can click "I agree" to focus -->
<label for="agree">
    <input type="checkbox" id="agree"> I agree
</label>

Or using for attribute:

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

Input Attributes for Validation

HTML5 provides built-in validation:

<input type="text" required>              <!-- Cannot be empty -->
<input type="email" required>             <!-- Must be valid email -->
<input type="text" minlength="3">         <!-- At least 3 chars -->
<input type="number" min="1" max="100">   <!-- Range limits -->
<input type="text" pattern="[A-Z]{3}">    <!-- Regex pattern -->
<input type="text" placeholder="hint..."> <!-- Helper text -->

Complete Contact Form

<form action="/contact" method="POST">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    
    <label for="message">Message:</label>
    <textarea id="message" name="message" required></textarea>
    
    <button type="submit">Send</button>
    <button type="reset">Clear</button>
</form>

HTML Form Best Practices

  1. Always use labels - Improves accessibility & UX
  2. Use semantic structure - <fieldset> and <legend>
  3. Validate on client - Catch errors before sending
  4. Provide feedback - Show which fields are required
  5. Use correct input types - email, number, date, etc.
  6. Name form elements - Essential for server processing
  7. Test on mobile - Forms often used on phones

Grouping Inputs with Fieldset

<form>
    <fieldset>
        <legend>Personal Information</legend>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name">
        
        <label for="email">Email:</label>
        <input type="email" id="email" name="email">
    </fieldset>
</form>

<fieldset> groups related fields, <legend> labels the group

Resources & References

Questions?

Next: Lecture 8 - Introduction to CSS