Input Form (All in One)

<div class="container">
<h3>Input Form</h3>
<form action="process_all_inputs.php" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>

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

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

    <label for="age">Age:</label>
    <input type="number" id="age" name="age" min="1" max="100" required>

    <label for="dob">Date of Birth:</label>
    <input type="date" id="dob" name="dob" required>

    <label for="address">Address:</label>
    <textarea id="address" name="address" rows="4" cols="50" required></textarea>

    <label for="gender">Gender:</label>
    <select id="gender" name="gender" required>
        <option value="Male">Male</option>
        <option value="Female">Female</option>
        <option value="Other">Other</option>
    </select>

    <p>User Type:</p>
    <div class="radio-buttons">
        <label for="admin">Admin</label>
        <input type="radio" id="admin" name="user_type" value="Admin" required>
    </div>
    <div class="radio-buttons">
        <label for="user">User</label>
        <input type="radio" id="user" name="user_type" value="User" required>
    </div>

    <p>Do you want to receive the newsletter?</p>
    <div class="checkboxes">
        <label for="subscribe">Yes, I want to receive the newsletter.</label>
        <input type="checkbox" id="subscribe" name="subscribe" value="YES">
    </div>

    <button type="submit">Submit</button>
    </form>
</div>

.container {
    max-width: 100%
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: center;
}

form {
    display: flex;
    flex-direction: column;
}

label {
    margin-top: 10px;
}

input, textarea, select, button {
    margin-top: 5px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.radio-buttons {
    padding: 10px;
}

.checkboxes {
    padding: 10px;
}

button {
    margin-top: 20px;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

p {
    margin-top: 10px;
}

<?php
// Check if the form was submitted using the POST method
if ($_SERVER["REQUEST_METHOD"] == "POST") {

    // Data model
    $name = htmlspecialchars($_POST['name']);
    $email = htmlspecialchars($_POST['email']);
    $password = htmlspecialchars($_POST['password']);
    $age = htmlspecialchars($_POST['age']);
    $dob = htmlspecialchars($_POST['dob']);
    $address = htmlspecialchars($_POST['address']);
    $gender = htmlspecialchars($_POST['gender']);
    $user_type = htmlspecialchars($_POST['user_type']);
    $subscribe = isset($_POST['subscribe']) ? htmlspecialchars($_POST['subscribe']) : 'NO';

    // IN PRACTICE: We use the code below in PHP to validate emails.
    // It is commented out in the simulator so you can see the data output.
    /*
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        echo "Invalid email address!";
        exit;
    }
    */

    // Password protection
    $hashed_password = password_hash($password, PASSWORD_DEFAULT);

    // Displaying user data on the screen
    echo "<h2>Form Data:</h2>";
    echo "Name: " . $name . "<br>";
    echo "Email: " . $email . "<br>";
    echo "Age: " . $age . "<br>";
    echo "Date of Birth: " . $dob . "<br>";
    echo "Address: " . $address . "<br>";
    echo "Gender: " . $gender . "<br>";
    echo "User Type: " . $user_type . "<br>";
    echo "Newsletter Subscription: " . $subscribe . "<br>";
}

Comprehensive Input Form