Chapter 2.3☕ 15 min read

Forms

Chai order karo — form se order ho jayega.

01What are Forms in HTML?

Walk into Nimrah Cafe. You tell the waiter your order — "Ek cutting chai, bun maskka, Osmania biscuit." The waiter writes it down. That's a form.

HTML forms do exactly that for web pages. They collect user input — text, choices, selections — and send it somewhere for processing. Login forms, signup forms, order forms, search bars — all are HTML forms.

📝

Order Analogy: The <form> tag is like the waiter's notepad. Each <input> is a question the waiter asks. The submit button is "Customer gives the notepad back."

02The Form Tag & Input Types

The <form> tag wraps all input fields. Here are the most common input types:

<input type="text"> — Single line text. Name, address.
<input type="number"> — Numbers only. Quantity, price.
<input type="email"> — Email with @ validation.
<input type="radio"> — Pick one option.
<input type="checkbox"> — Pick multiple options.
<textarea> — Multi-line text. Description, comments.
<select> — Dropdown menu.
<button type="submit"> — Sends the form data.

<form action="/order" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" placeholder="Aapka naam" required>

  <label for="chai">Choose your chai:</label>
  <select id="chai" name="chai">
    <option>Cutting Chai</option>
    <option>Irani Chai</option>
    <option>Masala Chai</option>
  </select>

  <fieldset>
    <legend>Extras:</legend>
    <input type="checkbox" id="bun" name="extras" value="bun">
    <label for="bun">Bun Maskka</label>
    <input type="checkbox" id="biscuit" name="extras" value="biscuit">
    <label for="biscuit">Osmania Biscuit</label>
  </fieldset>

  <button type="submit">Place Order ☕</button>
</form>

03Types of Form Concepts

Forms have many variations — just like chai orders at Nimrah come in different styles (cutting, full, special).

ConceptWhat it does

⌨️ Text Inputtype="text", type="email", type="number"Learn →🔘 Radio & CheckboxPick one vs pick manyLearn →📋 Select & Dropdown<select> with <option> tagsLearn →✓ Form Validationrequired, pattern, min, maxLearn →🎨 Form StylingCSS for labels, inputs, focus statesLearn →

04How Forms Work — Flow

User fills formTypes text, picks options, selects from dropdown

→

Browser validatesChecks required fields, email format, number range

→

Data sendsSubmits to server for processing

Pro tip: Always use <label> with for="id" connecting to input id. Screen readers need labels to announce input fields. And it makes the label clickable — click on "Name" and the input focuses!

05Exercise — Chai Order Form

Build a chai order form for Nimrah Cafe with different input types.

Open VS Code. Create file chai-order.html

Use the starter code:

<!-- form: order form -->
<!-- label + input: name (text) -->
<!-- select: chai options -->
<!-- radio: chai size -->
<!-- checkbox: extras -->
<!-- textarea: instructions -->
<!-- button: submit -->

Done — Key Points:

✅ <form> collects user input and sends it somewhere
✅ <label for="id"> connects to <input id="id">
✅ Different input types for different data (text, email, number)
✅ required attribute for validation
✅ Always use labels — accessibility and clickable area

Previous2.2 — Tables 📋 All Chapters Next Chapter2.4 — Semantic HTML →

Forms

Complete these:

Done — Key Points: