Day 6: Form Basics

What You'll Learn Today

Basic form structure
Common input types
Labels and accessibility
Select boxes and text areas

What Are Forms?

Forms let you collect input from users—login screens, search boxes, contact forms, and more.

flowchart LR
    User["👤 User"] -->|"Input"| Form["📝 Form"]
    Form -->|"Submit"| Server["🖥️ Server"]
    Server -->|"Response"| User
    style User fill:#3b82f6,color:#fff
    style Form fill:#22c55e,color:#fff
    style Server fill:#8b5cf6,color:#fff

The `<form>` Element

<form action="/submit" method="post">
    <!-- Form elements here -->
</form>

Attribute	Description	Example
`action`	Where to send data	`"/submit"`
`method`	HTTP method	`"get"` or `"post"`
`autocomplete`	Auto-completion	`"on"` or `"off"`

GET vs. POST

Aspect	GET	POST
Data location	In the URL	In request body
Use case	Search, filtering	Login, registration
Security	Visible in URL	Not visible in URL
Data size	Limited	Large data supported

Text Inputs

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

The Importance of `<label>`

Two ways to associate labels:

<!-- Method 1: for/id pairing -->
<label for="email">Email:</label>
<input type="email" id="email" name="email">

<!-- Method 2: Wrapping -->
<label>
    Email:
    <input type="email" name="email">
</label>

Important: Clicking a <label> focuses its associated input. Always use labels for accessibility.

Common Input Types

Text-Based

<input type="text" name="name" placeholder="Full name">
<input type="email" name="email" placeholder="mail@example.com">
<input type="password" name="password" placeholder="Password">
<input type="tel" name="phone" placeholder="555-123-4567">
<input type="url" name="website" placeholder="https://example.com">
<input type="search" name="query" placeholder="Search...">

Type	Purpose	Mobile Keyboard
`text`	General text	Standard
`email`	Email address	@ key visible
`password`	Password	Input hidden
`tel`	Phone number	Numeric keypad
`url`	URL	.com key visible
`search`	Search	Search key

Numeric

<input type="number" name="age" min="0" max="120" step="1">
<input type="range" name="volume" min="0" max="100" value="50">

Date and Time

<input type="date" name="birthday">
<input type="time" name="meeting-time">
<input type="datetime-local" name="appointment">

Common Input Attributes

Attribute	Description	Example
`name`	Key name for submission	`name="email"`
`value`	Default value	`value="Tokyo"`
`placeholder`	Hint text	`placeholder="Enter..."`
`required`	Required field	`required`
`disabled`	Disabled	`disabled`
`readonly`	Read-only	`readonly`
`autofocus`	Auto-focus	`autofocus`
`maxlength`	Maximum characters	`maxlength="100"`

Checkboxes and Radio Buttons

Checkboxes (Multiple Selection)

<fieldset>
    <legend>Interests (select all that apply)</legend>
    <label>
        <input type="checkbox" name="interest" value="html"> HTML
    </label>
    <label>
        <input type="checkbox" name="interest" value="css"> CSS
    </label>
    <label>
        <input type="checkbox" name="interest" value="js" checked> JavaScript
    </label>
</fieldset>

Radio Buttons (Single Selection)

<fieldset>
    <legend>Experience Level</legend>
    <label>
        <input type="radio" name="level" value="beginner" checked> Beginner
    </label>
    <label>
        <input type="radio" name="level" value="intermediate"> Intermediate
    </label>
    <label>
        <input type="radio" name="level" value="advanced"> Advanced
    </label>
</fieldset>

Select Boxes

<label for="country">Country:</label>
<select id="country" name="country">
    <option value="">Please select</option>
    <option value="us" selected>United States</option>
    <option value="uk">United Kingdom</option>
    <option value="jp">Japan</option>
</select>

Option Groups

<select name="language">
    <optgroup label="Asian">
        <option value="ja">Japanese</option>
        <option value="ko">Korean</option>
        <option value="zh">Chinese</option>
    </optgroup>
    <optgroup label="European">
        <option value="en">English</option>
        <option value="fr">French</option>
        <option value="de">German</option>
    </optgroup>
</select>

Text Area

<label for="message">Message:</label>
<textarea id="message" name="message" rows="5" cols="40"
          placeholder="Enter your message..."></textarea>

Buttons

<button type="submit">Submit</button>
<button type="reset">Reset</button>
<button type="button">Click Me</button>

Type	Behavior
`submit`	Submits the form
`reset`	Resets the form
`button`	No default action (for JS)

Practice: Contact Form

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Us</title>
</head>
<body>
    <h1>Contact Form</h1>

    <form action="/contact" method="post">
        <p>
            <label for="name">Name <strong>*</strong></label><br>
            <input type="text" id="name" name="name" required>
        </p>

        <p>
            <label for="email">Email <strong>*</strong></label><br>
            <input type="email" id="email" name="email" required>
        </p>

        <fieldset>
            <legend>Inquiry Type</legend>
            <label>
                <input type="radio" name="type" value="general" checked> General Question
            </label><br>
            <label>
                <input type="radio" name="type" value="support"> Support
            </label><br>
            <label>
                <input type="radio" name="type" value="feedback"> Feedback
            </label>
        </fieldset>

        <p>
            <label for="message">Message <strong>*</strong></label><br>
            <textarea id="message" name="message" rows="5" cols="50" required></textarea>
        </p>

        <p>
            <label>
                <input type="checkbox" name="agree" required>
                I agree to the Privacy Policy
            </label>
        </p>

        <p>
            <button type="submit">Send</button>
            <button type="reset">Reset</button>
        </p>
    </form>
</body>
</html>

Summary

Concept	Description
`<form>`	Wraps the entire form
`<input>`	Various input fields
`<label>`	Input description (required)
`<select>`	Dropdown selection
`<textarea>`	Multi-line text input
`<fieldset>` / `<legend>`	Group form elements
`<button>`	Submit, reset, or generic button

Key Takeaways

Always provide a <label> for every input
Choose the right input type (affects mobile experience)
Use <fieldset> to group related inputs
The name attribute is required for form submission

Exercises

Exercise 1: Basic

Create a login form with name, email, password fields, and a submit button.

Exercise 2: Intermediate

Build a survey form using radio buttons, checkboxes, select boxes, and a textarea.

Challenge

Create an order form with product selection (checkboxes), quantity (number), delivery date (date), and shipping address (text).

References

Next up: In Day 7, you'll learn "Advanced Forms"—validation, datalist, and more.