Hoe format je een formulier?

Een formulier heeft niet alleen labels en inputs. Je zal er ook voor moeten zorgen dat alle velden als één geheel worden gezien. Dit doe je door er <form> tags omheen te zetten. De

action
is waar de gegevens naartoe worden gestuurd en de
method
is iets wat we later behandelen in een ander lesonderdeel. Dit mag je voorlopig op POST laten staan.

Voorbeeld:

<form action="/submit" method="post">

    <p>
        <label for="name">Full Name:</label><br>
        <input type="text" id="name" name="fullname" required>
    </p>

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

    <p>
        <label for="password">Password:</label><br>
        <input type="password" id="password" name="password" required>
    </p>

    <p>
        Gender:<br>
        <input type="radio" id="male" name="gender" value="male">
        <label for="male">Male</label><br>
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">Female</label>
    </p>

    <p>
        <input type="checkbox" id="terms" required>
        <label for="terms">I agree to the terms and conditions</label>
    </p>

    <p>
        <label for="country">Country:</label><br>
        <select id="country" name="country">
        <option>USA</option>
        <option>UK</option>
        <option>Canada</option>
        </select>
    </p>

    <p>
        <label for="message">Message:</label><br>
        <textarea id="message" name="message" rows="4" cols="40"></textarea>
    </p>

    <p>
        <input type="submit" value="Submit">
    </p>

</form>

Hoe het eruit ziet:

Gender