Combining HTML and PHP is a common approach in web development, as PHP is often used to dynamically generate HTML content. Here’s an example of how HTML and PHP can work together:
Example: Simple PHP Form with Embedded HTML and PHP
This example shows a form where users can enter their name and age. When they submit the form, PHP processes the input and displays a personalized greeting message.
File: form.php
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>PHP and HTML Form</title>
</head>
<body>
<h2>Enter Your Information</h2>
<!– PHP to check for form submission and display greeting –>
<?php
// Initialize variables
$name = $age = “”;
$greeting = “”;
// Check if the form was submitted
if ($_SERVER[“REQUEST_METHOD”] == “POST”) {
// Get and sanitize user input
$name = htmlspecialchars($_POST[‘name’]);
$age = htmlspecialchars($_POST[‘age’]);
// Generate a greeting message
if (!empty($name) && !empty($age)) {
$greeting = “Hello, $name! You are $age years old.”;
} else {
$greeting = “Please fill in all fields.”;
}
}
?>
<!– HTML Form –>
<form action=”<?php echo htmlspecialchars($_SERVER[“PHP_SELF”]); ?>” method=”POST”>
<label for=”name”>Name:</label>
<input type=”text” id=”name” name=”name” value=”<?php echo $name; ?>” required><br><br>
<label for=”age”>Age:</label>
<input type=”number” id=”age” name=”age” value=”<?php echo $age; ?>” required><br><br>
<input type=”submit” value=”Submit”>
</form>
<!– Display greeting message –>
<?php
if ($greeting) {
echo “<h3>$greeting</h3>”;
}
?>
</body>
</html>
Explanation
- PHP and HTML Combination:
- PHP blocks (<?php … ?>) are used within the HTML to handle form processing and display dynamic content.
- Form Submission Handling:
- The form’s action attribute is set to $_SERVER[“PHP_SELF”], meaning the form will submit to itself, allowing PHP to handle the submission on the same page.
- The method=”POST” specifies the POST method for secure data submission.
- Form Processing:
- PHP checks if the form was submitted using $_SERVER[“REQUEST_METHOD”] == “POST”.
- It then retrieves the form inputs (name and age), sanitizes them using htmlspecialchars() for security, and generates a greeting message if the inputs are valid.
- Displaying PHP Variables in HTML:
- The variables $name and $age are used as values in the form fields, so when the form is reloaded (due to a failed submission or to show results), the values are preserved.
- $greeting displays a personalized message below the form after submission.
Running the Code
To test this code:
- Save it as form.php.
- Run it on a local server or web server that supports PHP (e.g., localhost/form.php).
- Enter your name and age in the form and click “Submit” to see the greeting message displayed dynamically on the page.