After completing this lesson, you will be able to confidently do the following 3 things.

• ▸✅ Understand the differences between input types (text/email/password/number)
• ▸✅ Understand the accessibility meaning of label + for
• ▸✅ Apply basic client-side validation (required · pattern · minLength)

Keep the learning objectives as a checklist, and close the lesson once you can answer all of them.

Why Do We Need Forms?

The web is not just for reading. Login, search, payments, comments — all of these require user input. The standard tool for accepting that input is <form>.

Basic Structure

<form action="/api/login" method="POST">
    <label for="email">Email</label>
    <input type="email" id="email" name="email" required>

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

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

• ▸action — Where to send the data (URL)
• ▸method — GET (search/filter) / POST (create/update/login)
• ▸name — The key the server receives (req.body.email)
• ▸for ↔ id — Links a label to an input (accessibility)

Input Types — Let the Browser Handle It

<input type="text">       <!-- General text -->
<input type="email">      <!-- Email validation + mobile keyboard -->
<input type="password">   <!-- Masking -->
<input type="number">     <!-- Number keyboard + arrows -->
<input type="tel">        <!-- Phone number keyboard -->
<input type="date">       <!-- Date picker -->
<input type="file">       <!-- File selection -->
<input type="checkbox">   <!-- Checkbox -->
<input type="radio">      <!-- Radio -->
<textarea></textarea>     <!-- Multiple lines -->
<select><option></option></select>  <!-- Dropdown -->

Just change the type and the browser automatically provides the appropriate UI, validation, and keyboard. Using the correct type is the first step toward accessibility and great UX.

HTML5 Validation

<input type="email" required pattern="[^@]+@[^@]+\.[^@]+">
<input type="number" min="1" max="100" step="1">
<input type="text" required minlength="2" maxlength="20">

Even without JavaScript, basic validation happens automatically. On submit, if something is wrong, the browser blocks submission and displays a message.

> ⚠️ However, server-side validation is always necessary too. Client-side validation is for UX, server-side validation is for security.

Accessibility — The Importance of Labels

<!-- ❌ Not good -->
<input type="text" placeholder="Name">

<!-- ✅ Good -->
<label for="name">Name</label>
<input type="text" id="name" name="name">

The label is the text read aloud by screen readers for visually impaired users. A placeholder alone is not enough (it disappears once the user starts typing).

Quick Summary

<form> + <input type="..."> + <button type="submit"> is all it takes to build a basic form. Use the type precisely, and the browser will take care of most of the rest.

Once you understand the concepts in this lesson, you can give AI specific instructions. Instead of a vague 'fix this,' you can make vocabulary-driven requests — and that is where token savings begin.

• ▸'Add client-side validation (required, pattern, minLength) to this form'
• ▸'Explicitly link these inputs to their labels'
• ▸'Create a pattern that resets the input values and shows an error message after this form is submitted'

Why Does This Save Tokens?

Without understanding the concepts, even after receiving an AI response you have to ask 'What does that mean?' again. That follow-up question eats up tokens. Learn the concept once, and the conversation ends in a single round.