Lesson 2: Processing HTML Forms with PHP

Objective:

The primary objective of this lesson is to teach learners how to process HTML forms using PHP. By the end of this lesson, participants should be able to:

Understand the basics of HTML forms.
Use PHP to handle form submissions.
Implement sanitization and validation techniques for user input.

Description:

2.1 Understanding HTML Forms

2.1.1 Introduction to HTML Forms

Explore the basics of HTML forms and their role in user interaction on web pages.

2.1.2 Form Elements

Understand common form elements such as text fields, checkboxes, radio buttons, and submit buttons.

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

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

    <input type="checkbox" name="subscribe" id="subscribe">
    <label for="subscribe">Subscribe to newsletter</label>

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

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

2.2 Handling Form Submissions with PHP

2.2.1 Using the POST Method

Learn how to use the POST method to securely send form data to the server

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Process form data
    $username = $_POST["username"];
    $password = $_POST["password"];
    $subscribe = isset($_POST["subscribe"]) ? "Yes" : "No";
    $gender = isset($_POST["gender"]) ? $_POST["gender"] : "Not specified";

    // Further processing...
}
?>

2.3 Sanitizing and Validating User Input

2.3.1 Sanitizing User Input

Understand the importance of sanitizing user input to prevent security vulnerabilities.

<?php
// Function to sanitize user input
function sanitizeInput($input) {
    return htmlspecialchars(trim($input));
}

// Usage example
$cleanUsername = sanitizeInput($_POST["username"]);
?>

2.3.2 Validating User Input

Explore basic validation techniques to ensure that user input meets specific criteria

2.4 Practice Exercise

Apply your knowledge by creating a PHP script that processes a form, sanitizes and validates user input, and displays a confirmation message

Let’s create a simple practice exercise where we’ll build a PHP script to process a form, sanitize user input, and validate an email address. Copy and paste the following code into two separate files: index.html and process_form.php.

index.html (HTML form)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Processing</title>
</head>
<body>

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

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

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

</body>
</html>

process_form.php (PHP script for form processing)

<?php
// Function to sanitize user input
function sanitizeInput($input) {
    return htmlspecialchars(trim($input));
}

// Function to validate email format
function validateEmail($email) {
    return filter_var($email, FILTER_VALIDATE_EMAIL) !== false;
}

// Check if the form is submitted using the POST method
if ($_SERVER["REQUEST_METHOD"] === "POST") {
    // Sanitize and validate username
    $username = sanitizeInput($_POST["username"]);

    // Sanitize and validate email
    $email = sanitizeInput($_POST["email"]);
    if (validateEmail($email)) {
        // Email is valid, proceed with processing
        $confirmationMessage = "Thank you, $username! Your email ($email) has been submitted.";
    } else {
        // Invalid email, handle accordingly
        $confirmationMessage = "Invalid email address. Please enter a valid email.";
    }
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Processing Confirmation</title>
</head>
<body>

    <h2>Form Processing Confirmation</h2>
    
    <?php
    // Display confirmation message
    if (isset($confirmationMessage)) {
        echo "<p>$confirmationMessage</p>";
    } else {
        echo "<p>No form submission detected.</p>";
    }
    ?>

</body>
</html>

In this exercise:

index.html contains a simple form with fields for the username and email.
process_form.php processes the form submission, sanitizes the input, validates the email, and displays a confirmation message.

Copy these codes into two separate files, run index.html, submit the form, and observe the confirmation message. Try entering a valid email, an invalid email, or submitting the form without entering any data to see how the script responds.