HTML Form Types

last modified March 3, 2025

HTML Form Types tutorial shows how to create different structural forms in HTML with simple PHP backend processing using filter_input for sanitization, including basic, multi-input, file upload, and more.

HTML Forms

HTML Forms are used to collect user input and send it to a server for processing. Combined with PHP, forms enable dynamic web applications.

Forms can be structured in various ways depending on the data being collected. This tutorial covers different form types with PHP scripts using filter_input to handle submissions.

HTML Form Types Examples

In the following examples, we explore different form structures with sample PHP backends. Basic CSS is included in the head for consistent styling. Save each PHP script in a file (e.g., process.php) in your server directory to test.

1. Basic Text Form

A simple form with a single text input, processed via POST.

<form action="process_basic.php" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <button type="submit">Submit</button>
</form>

This HTML code defines a basic form with a single text input for a name. The form uses the POST method to send data to process_basic.php when the submit button is clicked.

<?php
if ($_SERVER["REQUEST_METHOD"] === "POST") {
    $name = filter_input(INPUT_POST, 'name', FILTER_SANITIZE_SPECIAL_CHARS);
    if ($name) {
        echo "Hello, $name!";
    } else {
        echo "Invalid input!";
    }
}

This PHP script checks for a POST request, sanitizes the "name" input using filter_input with FILTER_SANITIZE_SPECIAL_CHARS, and echoes a greeting if valid, or an error if not.

2. Multi-Input Form

A form with multiple input types (text, email, number).

<form action="process_multi.php" 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="age">Age:</label>
    <input type="number" id="age" name="age">
    <button type="submit">Submit</button>
</form>

This HTML form collects three pieces of data—name, email, and age—using different input types. It sends the data to process_multi.php for processing upon submission.

<?php
if ($_SERVER["REQUEST_METHOD"] === "POST") {
    $name = filter_input(INPUT_POST, 'name', FILTER_SANITIZE_SPECIAL_CHARS);
    $email = filter_input(INPUT_POST, 'email', FILTER_SANITIZE_SPECIAL_CHARS);
    $age = filter_input(INPUT_POST, 'age', FILTER_SANITIZE_SPECIAL_CHARS);
    if ($name && $email && $age) {
        echo "Name: $name, Email: $email, Age: $age";
    } else {
        echo "Invalid input!";
    }
}

This PHP script sanitizes the name, email, and age inputs using filter_input, checks if all are present, and displays them if valid, otherwise shows an error message.

3. Form with Select Dropdown

A form with a dropdown menu using <select>.

<form action="process_select.php" method="post">
    <label for="fruit">Favorite Fruit:</label>
    <select id="fruit" name="fruit">
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
        <option value="orange">Orange</option>
        <option value="grape">Grape</option>
    </select>
    <button type="submit">Submit</button>
</form>

This HTML form uses a <select> element to offer a dropdown list of fruits. The selected value is sent to process_select.php when submitted.

<?php
if ($_SERVER["REQUEST_METHOD"] === "POST") {
    $fruit = filter_input(INPUT_POST, 'fruit', FILTER_SANITIZE_SPECIAL_CHARS);
    if ($fruit) {
        echo "You chose: $fruit";
    } else {
        echo "Invalid input!";
    }
}

This PHP script sanitizes the selected fruit using filter_input, verifies it's present, and echoes the choice if valid, or an error if not.

4. Form with Radio Buttons

A form with radio buttons for single-choice selection.

<form action="process_radio.php" method="post">
    <label>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>
    <input type="radio" id="other" name="gender" value="other">
    <label for="other">Other</label>
    <button type="submit">Submit</button>
</form>

This HTML form uses radio buttons to let users select one gender option. The shared name="gender" ensures only one choice is submitted to process_radio.php.

<?php
if ($_SERVER["REQUEST_METHOD"] === "POST") {
    $gender = filter_input(INPUT_POST, 'gender', FILTER_SANITIZE_SPECIAL_CHARS);
    if ($gender) {
        echo "Gender selected: $gender";
    } else {
        echo "Invalid input!";
    }
}

This PHP script sanitizes the gender selection with filter_input, checks its presence, and displays it if valid, or an error if no option is selected.

5. Form with Checkboxes

A form with checkboxes for multiple-choice selection.

<form action="process_checkbox.php" method="post">
    <label>Hobbies:</label>
    <input type="checkbox" id="reading" name="hobbies[]" value="reading">
    <label for="reading">Reading</label>
    <input type="checkbox" id="gaming" name="hobbies[]" value="gaming">
    <label for="gaming">Gaming</label>
    <input type="checkbox" id="sports" name="hobbies[]" value="sports">
    <label for="sports">Sports</label>
    <button type="submit">Submit</button>
</form>

This HTML form uses checkboxes with name="hobbies[]" to allow multiple selections, sent as an array to process_checkbox.php for processing.

<?php
if ($_SERVER["REQUEST_METHOD"] === "POST") {
    $hobbies = filter_input_array(INPUT_POST, ['hobbies' => FILTER_SANITIZE_SPECIAL_CHARS])['hobbies'] ?? [];
    if ($hobbies) {
        echo "Selected hobbies: " . implode(", ", $hobbies);
    } else {
        echo "No hobbies selected!";
    }
}

This PHP script uses filter_input_array to sanitize the hobbies array, checks if any are selected, and joins them into a string if present, or shows a message if none are chosen.

6. Textarea Form

A form with a <textarea> for longer text input.

<form action="process_textarea.php" method="post">
    <label for="message">Message:</label>
    <textarea id="message" name="message" rows="4" cols="50"></textarea>
    <button type="submit">Submit</button>
</form>

This HTML form includes a <textarea> for multi-line text input, sized with rows and columns attributes, sending the message to process_textarea.php.

<?php
if ($_SERVER["REQUEST_METHOD"] === "POST") {
    $message = filter_input(INPUT_POST, 'message', FILTER_SANITIZE_SPECIAL_CHARS);
    if ($message) {
        echo "Your message: $message";
    } else {
        echo "Invalid input!";
    }
}

This PHP script sanitizes the message input with filter_input, checks its presence, and echoes it if valid, or displays an error if empty or invalid.

7. File Upload Form

A form for uploading files, requiring enctype="multipart/form-data".

<form action="process_file.php" method="post" enctype="multipart/form-data">
    <label for="file">Upload File:</label>
    <input type="file" id="file" name="file">
    <button type="submit">Upload</button>
</form>

This HTML form uses a file input and enctype="multipart/form-data" to handle file uploads, sending the file to process_file.php for server-side processing.

<?php
if ($_SERVER["REQUEST_METHOD"] === "POST" && isset($_FILES["file"])) {
    $fileName = filter_var($_FILES["file"]["name"], FILTER_SANITIZE_SPECIAL_CHARS);
    $fileTmp = $_FILES["file"]["tmp_name"];
    if ($fileName && move_uploaded_file($fileTmp, "uploads/$fileName")) {
        echo "File uploaded: $fileName";
    } else {
        echo "Upload failed!";
    }
}

This PHP script checks for a file in the POST request, sanitizes the filename with filter_var, moves it to an "uploads" directory if valid, and reports success or failure.

8. Form with Validation

A form with HTML5 validation attributes (e.g., required).

<form action="process_validation.php" method="post">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    <label for="phone">Phone:</label>
    <input type="tel" id="phone" name="phone" pattern="[0-9]{10}" required>
    <button type="submit">Submit</button>
</form>

This HTML form enforces validation with required and a phone number pattern, ensuring correct input before submission to process_validation.php.

<?php
if ($_SERVER["REQUEST_METHOD"] === "POST") {
    $email = filter_input(INPUT_POST, 'email', FILTER_SANITIZE_SPECIAL_CHARS);
    $phone = filter_input(INPUT_POST, 'phone', FILTER_SANITIZE_SPECIAL_CHARS);
    if ($email && $phone) {
        echo "Email: $email, Phone: $phone";
    } else {
        echo "Invalid input!";
    }
}

This PHP script sanitizes the email and phone inputs with filter_input, checks their presence post-validation, and displays them if valid, or an error if not.

9. Multi-Step Form (Simplified)

A simplified multi-step form using separate sections (full functionality requires JS).

<form action="process_multistep.php" method="post">
    <fieldset>
        <legend>Step 1: Personal Info</legend>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name">
    </fieldset>
    <fieldset>
        <legend>Step 2: Contact Info</legend>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email">
    </fieldset>
    <button type="submit">Submit</button>
</form>

This HTML form uses <fieldset> tags to group inputs into steps, though it submits all at once here, sending data to process_multistep.php.

<?php
if ($_SERVER["REQUEST_METHOD"] === "POST") {
    $name = filter_input(INPUT_POST, 'name', FILTER_SANITIZE_SPECIAL_CHARS);
    $email = filter_input(INPUT_POST, 'email', FILTER_SANITIZE_SPECIAL_CHARS);
    if ($name && $email) {
        echo "Name: $name, Email: $email";
    } else {
        echo "Invalid input!";
    }
}

This PHP script sanitizes the name and email with filter_input, ensures both are present, and displays them if valid, or an error if either is missing.

10. Form with Hidden Fields

A form with hidden fields for passing data silently.

<form action="process_hidden.php" method="post">
    <input type="hidden" name="user_id" value="123">
    <label for="comment">Comment:</label>
    <input type="text" id="comment" name="comment">
    <button type="submit">Submit</button>
</form>

This HTML form includes a hidden input to send a user ID alongside a visible comment field, submitted to process_hidden.php without user interaction with the hidden field.

<?php
if ($_SERVER["REQUEST_METHOD"] === "POST") {
    $user_id = filter_input(INPUT_POST, 'user_id', FILTER_SANITIZE_SPECIAL_CHARS);
    $comment = filter_input(INPUT_POST, 'comment', FILTER_SANITIZE_SPECIAL_CHARS);
    if ($user_id && $comment) {
        echo "User ID: $user_id, Comment: $comment";
    } else {
        echo "Invalid input!";
    }
}

This PHP script sanitizes the user ID and comment with filter_input, checks both are present, and displays them if valid, or an error if either is missing.

In this tutorial, we have explored various structural forms of HTML forms with PHP backend processing using filter_input for sanitization, demonstrating how to collect and handle user input.

List all HTML tutorials.