Lesson 5: Forms

Goal: Collect information from users.

html

<form action="submit.html" method="post">

    <label for="name">Name:</label>

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

    <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">

    <label for="course">Choose a course:</label>

    <select id="course" name="course">

        <option value="html">HTML</option>

        <option value="css">CSS</option>

    </select>

    <p>Gender:</p>

    <input type="radio" id="m" name="gender" value="male">

    <label for="m">Male</label>

    <input type="radio" id="f" name="gender" value="female">

    <label for="f">Female</label>

    <input type="checkbox" id="agree" name="agree">

    <label for="agree">I agree to the terms</label>

    <label for="msg">Message:</label>

    <textarea id="msg" name="msg" rows="4"></textarea>

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

</form>

Key points:

• Label's for must match the input's id
• required blocks empty fields; placeholder shows a hint
• HTML only builds the form; saving submitted data needs server-side code (a separate topic)

Practice: Build a "Course Registration" form.