QuerySquish.com

In the previous lesson, we learned about HTML attributes. Now, let's dive deeper into HTML forms and how to use them to collect user input.

Creating a Form

HTML forms are used to collect user input. Here is a basic example of a form:

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

Form Elements

Here are some common form elements that you will use frequently:

• <input>: Defines an input control
• <textarea>: Defines a multiline input control (text area)
• <button>: Defines a clickable button
• <select>: Defines a drop-down list
• <option>: Defines an option in a drop-down list
• <label>: Defines a label for an input element

Example Usage

Let's see how to use some of these form elements in an HTML document:

    <form action="/submit-form" method="post">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username"><br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password"><br>
        <label for="bio">Bio:</label>
        <textarea id="bio" name="bio"></textarea><br>
        <label for="gender">Gender:</label>
        <select id="gender" name="gender">
            <option value="male">Male</option>
            <option value="female">Female</option>
            <option value="other">Other</option>
        </select><br>
        <input type="submit" value="Submit">
    </form>
    

Processing Form Data

When a user submits a form, the data is sent to a server for processing. You can use server-side languages like PHP, Python, or Node.js to handle form submissions. We are currently working on a PHP course, but more courses for other languages will be available soon!