Introduction to Forms

What is a Form?

Forms are an essential part of web development. They allow users to submit data to a server for processing. Forms can be used for a variety of purposes, such as user registration, login, and data entry.

Basic Structure of a Form

A basic HTML form consists of the <form> element, which contains various form controls like input fields, checkboxes, radio buttons, and submit buttons.

<form action="submit.php" 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>
                

Understanding Form Attributes

The <form> element has several attributes that control its behavior:

• action: Specifies the URL where the form data should be sent.
• method: Specifies the HTTP method to be used when sending the form data. Common values are GET and POST.

Form Controls

Form controls are the interactive elements within a form, such as text fields, radio buttons, checkboxes, and submit buttons. Below are some of the commonly used form controls:

Text Input

Used to create a single-line text input field.

<input type="text" name="username">
                

Password Input

Used to create a password input field. The characters typed by the user are masked.

<input type="password" name="password">
                

Radio Buttons

Used to create a group of options from which the user can select only one.

<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
                

Checkboxes

Used to create a group of options from which the user can select multiple.

<input type="checkbox" name="vehicle" value="bike"> Bike
<input type="checkbox" name="vehicle" value="car"> Car
                

Submit Button

Used to create a button that submits the form data to the server.

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

Form Validation

Form validation is crucial to ensure that the data submitted by the user is correct and complete. Validation can be done on the client side using HTML5 attributes or JavaScript, and on the server side using server-side languages like PHP.

Client-Side Validation

HTML5 provides several attributes for client-side validation:

• required: Specifies that the input field must be filled out before submitting the form.
• pattern: Specifies a regular expression that the input field’s value must match.
• minlength: Specifies the minimum number of characters for the input field.
• maxlength: Specifies the maximum number of characters for the input field.

<form action="submit.php" method="POST">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required>
    <br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    <br>
    <input type="submit" value="Submit">
</form>
                

Server-Side Validation

Server-side validation is performed after the form data has been submitted. This ensures that even if the client-side validation is bypassed, the data will still be validated on the server.

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $username = $_POST['username'];
    $email = $_POST['email'];

    if (empty($username) || empty($email)) {
        echo "All fields are required.";
    } else {
        // Process the data
        echo "Form submitted successfully.";
    }
}
?>