Lesson 1: HTML Forms

Introduction to HTML Forms

Forms are an essential part of HTML and are used to collect user input. In this lesson, you'll learn how to create basic HTML forms and understand the different elements involved.

1. Basic Structure of an HTML Form

An HTML form is created using the <form> element. Inside this element, you place various input fields such as text boxes, checkboxes, radio buttons, and submit buttons.

<form action="/submit-form" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" />

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" />

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

2. Creating a More Complex Form

<form action="/submit-form" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" />

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" />

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

    <label for="newsletter">Subscribe to newsletter:</label>
    <input type="checkbox" id="newsletter" name="newsletter" value="yes" />

    <label for="country">Country:</label>
    <select id="country" name="country">
        <option value="us">United States</option>
        <option value="canada">Canada</option>
        <option value="uk">United Kingdom</option>
    </select>

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

3. Styling Your Form

form {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    background-color: #f9f9f9;
}

form label {
    display: block;
    margin-bottom: 10px;
}

form input[type="text"],
form input[type="email"],
form select {
    width: 100%;
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

form input[type="submit"] {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

form input[type="submit"]:hover {
    background-color: #0056b3;
}