Next ❯

HTML Forms

  • This lesson explains how to create and use HTML forms to collect user input using form tags, input fields, labels, and buttons.

  • 🌍 Why Forms Are the Heart of the Web

    Imagine the web without forms ❌— No login, no signup, no search box, no shopping cart, no payments… nothing interactive.

    Forms make websites come alive. They enable:

     ✨ 🔐 Authentication (login / signup)
     ✨ 🔍 Search & filters (YouTube search, Amazon filters)
     ✨ 🛍️ Add to cart + checkout (shopping websites)
     ✨ 💳 Online payments (UPI, card, wallets)
     ✨ 📩 Communication (contact forms, feedback)

    📌 Every dynamic web application depends on forms.
     Forms are the bridge between users → browsers → servers.
Lesson image

  • 💡 Imagine you are logging into Instagram

    You type:

    • Username

    • Password
       → Hit Login

    This HTML runs in the background:

    <form action="/login" method="POST">

        <label for="user">Username</label>

        <input type="text" id="user" name="username" required>

        <label for="pass">Password</label>

        <input type="password" id="pass" name="password" minlength="8">

        <button type="submit">Login</button>

    </form>

  • Behind the scenes:

    Input Key Sent to Server Value
    Usernameusernameyour typed username
    Passwordpasswordyour password


  • Server checks:

    • Is user registered ?

    • Does the password match ?

    • Is the account secure ?

    Then shows:
     ✔ Login success → Take user to dashboard
     ❌ Login failed → Show error message

    How a Form Works

      👤 User types data

                  ↓

      🧱 <form> collects everything

                  ↓

      🔑 Converts to name=value pairs

                  ↓

     🚀 Sends to server (GET/POST)

                  ↓

     🖥️ Server processes request

                  ↓

     🎉 Sends result back to user

Lesson image

  • 🎯 Analogy

    Think of a pizza order form 🍕:

    • You choose size → input

    • You choose toppings → checkbox

    • You write address → textarea

    • You click Order → submit button

    Then:

    • Order goes to kitchen → server

    • Pizza gets prepared → processing

    • Delivered to your home → response

    HTML forms = your online order form for anything (login, search, buying).

  • 🧱 Full Form Anatomy 

    Below is a complete login form. This is the heart of every web application:

    <form action="/login" method="POST">  

      <label for="user">Username</label>

      <input type="text" id="user" name="username" required>

      <label for="pass">Password</label>

      <input type="password" id="pass" name="password" minlength="8">

      <button type="submit">Login</button>

    </form>

  • 🔍 Understanding the <form> Tag

    ✅ Role of a Form

    A form is like a container that holds all user inputs.

     ✔ Collects data
     ✔ Groups inputs together
     ✔ Defines what happens when user clicks Submit
     ✔ Connects the browser to the backend

    You can imagine it like a delivery box 📦

    • Inputs = items inside box

    • Submit button = sends box

    • action = where box is delivered

    • method = how delivery is done

Lesson image

  • 🎛️ Important Form Attributes

                                                Attribute Meaning
    actionWhere data is sent (URL)
    methodHow data is sent (GET/POST)
    targetOpens response in new tab or same tab
    autocompleteEnables/Disables autofill
    novalidateTurns off browser validation

  • 🔹 method="GET"

               <form method="GET">

    🧠 How GET Works

    • Data is added in URL as a query string
       Example:

    /search?q=html&page=1

    ⭐ Best For:

     ✔ Search
     ✔ Filters
     ✔ Bookmarkable pages

    ❌ Problems:

     ✘ Data is visible
     ✘ Limited length
     ✘ Not secure

  • 🔹 method="POST"

              <form method="POST">

    🧠 How POST Works

    • Sends data in the request body

    • Hidden from URL

    • No size limits

     ⭐ Best For:

     ✔ Login / Signup
     ✔ Passwords
     ✔ Payments
     ✔ File uploads

    🔥 Always use POST when sending sensitive data.
  • 🏷️ <label>

Email Input Field with Label

This code creates an email input field with a label, allowing users to enter their email address in a clear and accessible way. 

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

  •  💡 Why <label> is Important:

     ✔ Clicking the label focuses the input
     ✔ Helps blind users (screen readers)
     ✔ Required for proper accessibility

    ❌ Bad

    <label>Email</label><input>

    ✅ Good

    <label for="e">Email</label>

    🧾 <input>

Form with Text Input

This code shows a simple HTML form containing a text input field, used to collect basic user input. 

<form> 
    <input type="text"> 
</form>

  • Inputs can collect:

    • names

    • emails

    • passwords

    • numbers

    • dates

    • files

    • colors

    • ranges

    • Buttons

    🔢 Common Input Types Explained

    🔤 text

    Single-line input
    Example: Username, Full Name

    📧 email

    <input type="email">

    ✔ Validates email format
    ✔ Shows correct keyboard on mobile

    🔐 password

    ✔ Hides characters
     Does NOT encrypt — needs HTTPS

    🔢 number

    <input type="number">

    ✔ Only allows numbers
    ✔ Adds up/down arrows

    📅 date

    <input type="date">

    ✔ Shows calendar picker

    📁 file

    <input type="file">

    Used for uploading:

    • images

    • pdf

    • videos

    ⚠️ Must include:

    enctype="multipart/form-data"

  • 🧩 Input Attributes

    Attribute Meaning
    nameKey used by server
    valueDefault value
    placeholderHint inside input
    requiredMust be filled
    readonlyCannot edit but visible
    disabledCan't edit & not submitted
    patternRegex validation
    min / maxRange control
    📌 If there is NO name, the data is NOT sent to the server.

    📝 <textarea> (For Long Messages)

Textarea Input Field in HTML Form

This code creates a textarea inside a form, allowing users to enter multi-line text such as comments or messages. 

<form> 
    <textarea rows="4" cols="40"> </textarea> 
</form>

  • Best for:

    • feedback

    • reviews

    • comments

    • messages

    Supports:

    • maxlength

    • readonly

    • required

      🔽 <select> Dropdown — Smart Input

    Dropdown Menu Using Select Tag

    This code creates a dropdown list inside a form that allows users to choose a course such as HTML or CSS. 

    <form> 
    <select name="course"> 
        <option value="html">HTML</option> 
        <option value="css">CSS</option> 
    </select> 
</form>

    • ✔ Only one value is sent
      ✔ selected makes it default

      🔘 Radio Buttons — Choose Only One

    Radio Button Group Example

    This form uses radio buttons to let users select one option Male or Female from a single choice group. 

    <form> 
    <input type="radio" name="gender" value="m"> Male 
    <input type="radio" name="gender" value="f"> Female 
</form>

    • 💡 Same name = only one can be selected

      ☑️ Checkboxes — Choose Many

    Checkbox Input Field in HTML Form

    This code shows a checkbox inside an HTML form, commonly used to accept terms and conditions, with the checkbox pre-selected by default. 

    <form> 
    <input type="checkbox" name="terms" checked> 
</form>

    • ✔ Can check multiple
      ✔ Each sends its value

      🚀 Submit Buttons

    Submit Button in HTML Form

    This code creates a submit button inside a form, which sends the form data when clicked. 

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

    • Triggers form submission.

      Multiple buttons = different actions.


    Multiple Form Actions Using Buttons

    This example shows how different buttons in a form can submit data to different URLs using the formaction attribute. 

    <form> 
    <button formaction="/save">Save</button> 
    <button formaction="/publish">Publish</button> 
</form>

    • 🔐 HTML5 Validation

      Browser provides built-in validation:

      • required

      • pattern

      • minlength

      • type="email"

      ❌ Not enough for security
       ✔ Server must validate again

      ♿ Accessibility & UX 

      Always use:
       ✔ <label>
       ✔ Descriptive placeholders
       ✔ Helpful error messages

      Screen readers rely on:
       ✔ Labels
       ✔ aria-* attributes 

      ❌ Critical Security Warnings

      NEVER:
       🚫 Trust form data
       🚫 Store raw passwords
       🚫 Use GET for login
       🚫 Skip HTTPS

      ALWAYS:
       ✔ Validate on server
       ✔ Hash passwords
       ✔ Use HTTPS

       Forms are the center of all interactive websites.
       They:

       ✔ Collect data
       ✔ Validate it
       ✔ Send it to server
       ✔ Power login, signup, search, payments, uploads

    Next ❯