Create a Responsive Login Form with PHP

In this article, we will create a responsive login form with the required fields (name, address, email, graduation year, and job) using PHP. The form will be responsive, meaning it will adapt to different screen sizes and devices.

HTML Structure

First, let's create the HTML structure for the form:

<form id="login-form" action="process_login.php" method="post">
  <h2>Login Form</h2>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required><br><br>
  <label for="address">Address:</label>
  <input type="text" id="address" name="address" required><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required><br><br>
  <label for="graduation_year">Graduation Year:</label>
  <input type="number" id="graduation_year" name="graduation_year" required><br><br>
  <label for="job">Job:</label>
  <input type="text" id="job" name="job" required><br><br>
  <input type="submit" value="Submit">
</form>

CSS Styling

To make the form responsive, we'll add some CSS styling:

#login-form {
  width: 80%;
  margin: 40px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#login-form label {
  font-weight: bold;
  margin-bottom: 10px;
}

#login-form input[type="text"], #login-form input[type="email"], #login-form input[type="number"] {
  width: 100%;
  height: 40px;
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

#login-form input[type="submit"] {
  width: 100%;
  height: 40px;
  margin-bottom: 20px;
  padding: 10px;
  border: none;
  border-radius: 5px;
  background-color: #4CAF50;
  color: #fff;
  cursor: pointer;
}

#login-form input[type="submit"]:hover {
  background-color: #3e8e41;
}

PHP Script

Now, let's create the PHP script to process the form data:

<?php
// Process the form data
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  $name = $_POST["name"];
  $address = $_POST["address"];
  $email = $_POST["email"];
  $graduation_year = $_POST["graduation_year"];
  $job = $_POST["job"];

  // Validate the form data
  if (!empty($name) && !empty($address) && !empty($email) && !empty($graduation_year) && !empty($job)) {
    // Store the form data in a database or perform any other action
    echo "Form submitted successfully!";
  } else {
    echo "Please fill out all required fields.";
  }
}
?>

Putting it all together

Save the HTML, CSS, and PHP files in the same directory. Open the HTML file in a web browser to see the responsive login form in action. When you submit the form, the PHP script will process the form data and display a success message or an error message depending on the validation.

Conclusion

In this article, we created a responsive login form with the required fields (name, address, email, graduation year, and job) using HTML, CSS, and PHP. The form is responsive, meaning it will adapt to different screen sizes and devices. We also validated the form data using PHP and displayed a success message or an error message depending on the validation.