Day 6: Forms & Inputs

Forms are the primary way users interact with your website.

The Form Container (form)

Wraps all input elements.

• action: Where to send data (URL).
• method: How to send it (GET or POST).

<form action="/submit-login" method="POST">
    <!-- inputs go here -->
</form>

The Input Tag (input)

The swiss-army knife of HTML. It changes behavior based on type.

<!-- Text -->
<input type="text" placeholder="Enter username">

<!-- Password (masked) -->
<input type="password" placeholder="Secret">

<!-- Email (validation) -->
<input type="email" placeholder="user@example.com">

<!-- Checkbox -->
<input type="checkbox" id="terms">

<!-- Radio (Select one of many) -->
<input type="radio" name="gender" value="male">

Labels (label)

Always label your inputs. It’s vital for accessibility. Link a label to an input using for="id_of_input".

<!-- Explicit linking -->
<label for="username">Username:</label>
<input type="text" id="username" name="username">

<!-- Implicit wrapping (Newer style) -->
<label>
    Password:
    <input type="password" name="password">
</label>

Other Controls

• <textarea>: Multi-line text.
• <select> & <option>: Dropdown menu.
• <button>: Clickable button.

<select name="country">
    <option value="usa">USA</option>
    <option value="uk">UK</option>
</select>

<button type="submit">Log In</button>

Homework for Day 6:

1. Build a “Contact Us” form.
2. Include Name (text), Email (email), and Message (textarea).
3. Add a “Send Message” button.
4. Ensure clicking the text “Name” focuses the name input box (use labels!).

Day 7: We learn to build like a pro with Semantic Layouts!