HTML Forms

What are Forms?
HTML forms allow users to input data and send it to a server for processing. They are used for login pages, search boxes, feedback forms, and more.

Basic Form Structure

                    
<form action="submit.php" method="post">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username">

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

    <button type="submit">Login</button>
</form>

Common Form Elements

<input type="text"> → Single-line text field.
<input type="password"> → Hidden characters for passwords.
<textarea> → Multi-line text input.
<input type="radio"> → Choose one option.
<input type="checkbox"> → Select multiple options.
<select> → Dropdown menu.
<button> → Clickable button.

Example Registration Form

                    
<form action="register.php" method="post">
    <label for="name">Full 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" name="gender" value="male"> Male
    <input type="radio" name="gender" value="female"> Female

    <label for="skills">Skills:</label>
    <input type="checkbox" name="skills" value="html"> HTML
    <input type="checkbox" name="skills" value="css"> CSS
    <input type="checkbox" name="skills" value="js"> JavaScript

    <label for="country">Country:</label>
    <select id="country" name="country">
        <option value="pakistan">Pakistan</option>
        <option value="usa">USA</option>
        <option value="uk">UK</option>
    </select>

    <button type="submit">Register</button>
</form>
                    
                

Key Points to Remember

Always use the label tag with form inputs.
Use the name attribute to send data to the server.
method="post" is more secure than get for sensitive data.
Group related inputs using <fieldset> and <legend>.

Practice Exercise

👉 Create a file named forms.html. Add:

A form with name, email, and password fields.
At least 2 radio buttons (e.g., gender).
At least 2 checkboxes (e.g., skills).
A dropdown menu for country selection.
A submit button.

Pro Tip 💡

Always use proper label tags for accessibility. This helps screen readers and makes forms easier to use.