PHP Superglobal – $_POST
Learn Web Development: HTML Forms, PHP POST Method, and JavaScript Fetch API Tutorial
Introduction:
Welcome to our comprehensive tutorial on web development, focusing on HTML forms, the PHP $_POST method, and JavaScript’s Fetch API. Whether you’re a beginner or looking to expand your skills, this lesson will guide you through the essentials of handling form data, making server requests, and enhancing the experience.
PHP, $_POST is a superglobal variable
- In PHP, $_POST is a superglobal variable that is used to collect form data after submitting an HTML form with the HTTP POST method.
- When a form is submitted using POST, the form data is sent to the server in the body of the HTTP request, and PHP makes this data accessible through the $_POST superglobal.
Here’s a basic example of how to use $_POST:
Create an HTML form:
<!DOCTYPE html> <html> <head> <title>Sample Form</title> </head> <body> <form action="process_form.php" method="post"> <label for="name">name:</label> <input type="text" name="name" id="name"> <label for="password">Password:</label> <input type="password" name="password" id="password"> <input type="submit" value="Submit"> </form> </body> </html>
Create a PHP script to process the form data (process_form.php):
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Retrieve data from the $_POST superglobal
$name = $_POST["name"];
$password = $_POST["password"];
// Do something with the data (e.g., validate, process, or store in a database)
// For demonstration purposes, let's just print the values
echo "name: " . $name . "<br>";
echo "Password: " . $password;
} else {
// If the form is not submitted using POST, redirect or handle accordingly
echo "Form not submitted.";
}
?>- In this example, when the form is submitted, the data is sent to the process_form.php script using the POST method. Inside the PHP script, $_POST[“name”] and $_POST[“password”] are used to retrieve the values entered in the form fields.
- It’s important to note that form data submitted with the POST method is not appended to the URL like it is with the GET method. Also, you should always validate and sanitize input to prevent security vulnerabilities such as SQL injection and cross-site scripting (XSS) attacks.
The ways to send variables via the HTTP Post method:
The two main ways to send variables via the HTTP POST method are:
HTML Forms:
- The most common way to send variables via POST is through HTML forms.
- When a submits a form using the POST method, the form data is sent to the server in the body of the HTTP request.
Here’s an example using an HTML form:
<form action="process_form.php" method="post"> <label for="name">name:</label> <input type="text" name="name" id="name"> <label for="password">Password:</label> <input type="password" name="password" id="password"> <input type="submit" value="Submit"> </form>
In this example, when the form is submitted, the data is sent to the process_form.php script using the POST method.
HTTP Requests in Code:
- Another way to send variables via POST is through HTTP requests in code, often done using programming languages like PHP, Python, JavaScript (Node.js), etc.
- This is common in scenarios where data needs to be sent to the server dynamically, without relying on a -submitted form.
Here’s an example using PHP:
$url = 'https://example.com/api';
$data = array('name' => 'john_doe', 'password' => 'secret');
$options = array(
'http' => array(
'header' => "Content-type: application/x-www-form-urlencoded\r\n",
'method' => 'POST',
'content' => http_build_query($data),
),
);
$context = stream_context_create($options);
$result = file_get_contents($url, false, $context);
// Handle the result as needed- In this example, the http_build_query function is used to create a URL-encoded string from the associative array $data, and then it’s sent to the server using the file_get_contents function with a custom context specifying the HTTP method and content type.
- Both methods achieve the goal of sending data via the HTTP POST method, and the choice between them depends on the specific requirements and context of your application.
complete example: a simple HTML form that uses the POST method
Let’s create a simple HTML form that uses the POST method to send data to a PHP script. This example will include comments for explanation.
HTML Form (index.html):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>POST Form Example</title> </head> <body> <h2>Submit Information</h2> <form action="process_form.php" method="post"> <!-- Input field for the name --> <label for="name">name:</label> <input type="text" name="name" id="name" required> <!-- Input field for the password --> <label for="password">Password:</label> <input type="password" name="password" id="password" required> <!-- Submit button --> <input type="submit" value="Submit"> </form> </body> </html>
In this HTML file:
- The <form> element has an action attribute pointing to a PHP script (process_form.php) that will handle the form data.
- The method attribute is set to “post,” indicating that the form data should be sent using the HTTP POST method.
- Two input fields (name and password) are included inside the form.
PHP Script (process_form.php):
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Retrieve data from the $_POST superglobal
$name = $_POST["name"];
$password = $_POST["password"];
// Validate or process the data as needed
// For simplicity, let's just print the values
echo "name: " . htmlspecialchars($name) . "<br>";
echo "Password: " . htmlspecialchars($password);
} else {
// If the form is not submitted using POST, redirect or handle accordingly
echo "Form not submitted.";
}
?>In this PHP script:
- It checks if the form was submitted using the POST method ($_SERVER[“REQUEST_METHOD”] == “POST”).
- It retrieves the values of name and password from the $_POST superglobal.
- It then can perform any necessary validation or processing. In this example, the values are simply printed.
When you open the index.html file in a web browser, you’ll see a form. When you fill in the fields and submit the form, the data will be sent to the process_form.php script using the POST method, and the script will display the submitted values.
$_POST in HTML Forms:complete example
Below is a complete example of using $_POST with HTML forms in PHP.
This example includes comments to explain each part:
HTML Form (index.html):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>$_POST Example</title> </head> <body> <h2>Login Form</h2> <!-- The form sends data to process_form.php using the POST method --> <form action="process_form.php" method="post"> <!-- Input field for the name --> <label for="name">name:</label> <input type="text" name="name" id="name" required> <!-- Input field for the password --> <label for="password">Password:</label> <input type="password" name="password" id="password" required> <!-- Submit button --> <input type="submit" value="Login"> </form> </body> </html>
In this HTML file:
- The <form> element has an action attribute pointing to a PHP script (process_form.php) that will handle the form data.
- The method attribute is set to “post,” indicating that the form data should be sent using the HTTP POST method.
- Two input fields (name and password) are included inside the form.
PHP Script (process_form.php):
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Retrieve data from the $_POST superglobal
$name = $_POST["name"];
$password = $_POST["password"];
// Validate or process the data as needed
// For simplicity, let's just print the values
echo "name: " . htmlspecialchars($name) . "<br>";
echo "Password: " . htmlspecialchars($password);
} else {
// If the form is not submitted using POST, redirect or handle accordingly
echo "Form not submitted.";
}
?>In this PHP script:
- It checks if the form was submitted using the POST method ($_SERVER[“REQUEST_METHOD”] == “POST”).
- It retrieves the values of name and password from the $_POST superglobal.
- It then can perform any necessary validation or processing. In this example, the values are simply printed.
When you open the index.html file in a web browser, you’ll see a form. When you fill in the fields and submit the form, the data will be sent to the process_form.php script using the POST method, and the script will display the submitted values.
$_POST in JavaScript HTTP Requests:complete example
To send data via the HTTP POST method using JavaScript, you can use the Fetch API or XMLHttpRequest.
Below is an example using the Fetch API with explanations:
HTML Form (index.html):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript POST Request Example</title> </head> <body> <h2>Login Form</h2> <!-- Input fields for the name and password --> <label for="name">name:</label> <input type="text" id="name" required> <label for="password">Password:</label> <input type="password" id="password" required> <!-- Button to trigger the JavaScript POST request --> <button onclick="submitForm()">Login</button> <script src="script.js"></script> </body> </html>
In this HTML file:
- Two input fields (name and password) are included without a <form> element.
- A button triggers the JavaScript function submitForm() when clicked.
- The JavaScript file (script.js) is included at the end.
JavaScript File (script.js):
function submitForm() {
// Get values from input fields
var name = document.getElementById("name").value;
var password = document.getElementById("password").value;
// Create an object with the data to be sent
var data = {
name: name,
password: password
};
// Fetch API to send a POST request
fetch("process_form.php", {
method: "POST",
headers: {
"Content-Type": "application/json", // Set the content type to JSON
},
body: JSON.stringify(data), // Convert the data object to a JSON string
})
.then(response => response.text())
.then(result => {
// Display the result (response from the server)
console.log(result);
})
.catch(error => {
// Handle errors
console.error('Error:', error);
});
}In this JavaScript file:
- The submitForm() function is triggered when the button is clicked.
- It retrieves the values of name and password from the input fields.
- It creates an object (data) with the values to be sent.
- The Fetch API is used to send a POST request to the process_form.php script.
- The request headers indicate that the content type is JSON, and the data is converted to a JSON string using JSON.stringify(data).
- The server’s response is logged to the console.
PHP Script (process_form.php):
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Retrieve JSON data from the request body
$json_data = file_get_contents("php://input");
// Decode JSON data
$data = json_decode($json_data, true);
// Validate or process the data as needed
// For simplicity, let's just print the values
echo "name: " . htmlspecialchars($data['name']) . "<br>";
echo "Password: " . htmlspecialchars($data['password']);
} else {
// If the request is not a POST request, handle accordingly
echo "Invalid request method.";
}
?>
In this PHP script:
- It checks if the request was submitted using the POST method ($_SERVER[“REQUEST_METHOD”] == “POST”).
- It retrieves the raw JSON data from the request body using file_get_contents(“php://input”).
- The JSON data is then decoded using json_decode().
- The decoded values are printed for demonstration purposes.
When you open the index.html file in a web browser and fill in the fields, clicking the “Login” button will trigger the JavaScript function, sending a POST request to the process_form.php script, and the server’s response will be logged to the console.
An application includes an HTML form for login
- Let’s create a simple web application that includes an HTML form for login.
- The login data will be sent to a PHP script using JavaScript Fetch API for processing. The PHP script will simulate authentication and return a response.
Step 1: HTML Form (index.html)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Login Application</title> </head> <body> <h2>Login Form</h2> <div id="response"></div> <!-- Input fields for the name and password --> <label for="name">name:</label> <input type="text" id="name" required> <label for="password">Password:</label> <input type="password" id="password" required> <!-- Button to trigger the JavaScript POST request --> <button onclick="submitForm()">Login</button> <script src="script.js"></script> </body> </html>
Step 2: JavaScript (script.js)
function submitForm() {
// Get values from input fields
var name = document.getElementById("name").value;
var password = document.getElementById("password").value;
// Create an object with the data to be sent
var data = {
name: name,
password: password
};
// Fetch API to send a POST request
fetch("process_login.php", {
method: "POST",
headers: {
"Content-Type": "application/json", // Set the content type to JSON
},
body: JSON.stringify(data), // Convert the data object to a JSON string
})
.then(response => response.json())
.then(result => {
// Display the result (response from the server)
displayResponse(result);
})
.catch(error => {
// Handle errors
console.error('Error:', error);
});
}
function displayResponse(result) {
// Display the response in the response div
var responseDiv = document.getElementById("response");
responseDiv.innerHTML = "<strong>Response:</strong> " + result.message;
responseDiv.style.color = result.success ? "green" : "red";
}Step 3: PHP Script (process_login.php)
<?php
header('Content-Type: application/json');
// Simulate authentication (for demonstration purposes)
$validname = '';
$validPassword = 'pass';
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Retrieve JSON data from the request body
$json_data = file_get_contents("php://input");
// Decode JSON data
$data = json_decode($json_data, true);
// Check if the name and password match the valid credentials
if ($data['name'] == $validname && $data['password'] == $validPassword) {
$response = array('success' => true, 'message' => 'Login successful.');
} else {
$response = array('success' => false, 'message' => 'Invalid name or password.');
}
// Send the JSON response
echo json_encode($response);
} else {
// If the request is not a POST request, handle accordingly
$response = array('success' => false, 'message' => 'Invalid request method.');
echo json_encode($response);
}
?>Explanation:
index.html: This file contains the HTML structure, including a form with input fields for the name and password. It includes a button that triggers the submitForm function when clicked. The response from the server will be displayed in a div with the id “response.”
script.js: The JavaScript file contains the submitForm function, which is triggered when the login button is clicked. It uses the Fetch API to send a POST request to the process_login.php script. The response from the server is then displayed using the displayResponse function.
process_login.php: This PHP script simulates authentication. It checks the received name and password against predefined valid credentials. The response is sent back to the client as JSON.
When you open the index.html file in a web browser and attempt to log in, the application will send a POST request to process_login.php, and the response will be displayed on the page. The server response will indicate whether the login was successful or not.
Quiz about this lesson:15 questions with explanation
let’s create a quiz related to the concepts discussed in the lesson.
Each question will be followed by multiple-choice answers, and the correct answer will be explained.
1-What is the primary purpose of the $_POST superglobal in PHP?
A) Retrieve data from a GET request
B) Retrieve data from an HTML form submitted with the POST method
C) Store session data
D) Access server environment variables
Explanation: The correct answer is B. The $_POST superglobal in PHP is used to retrieve data from an HTML form submitted with the POST method.
2-In HTML, which attribute is used to specify the destination URL for form data?
A) action
B) method
C) target
D) enctype
Explanation: The correct answer is A. The action attribute in the <form> element is used to specify the destination URL for form data.
3-In PHP, what function is used to retrieve the raw POST data from the request body?
A) file_get_contents(“php://input”)
B) $_POST[“data”]
C) get_post_data()
D) request_body()
Explanation: The correct answer is A. The file_get_contents(“php://input”) function is used to retrieve the raw POST data from the request body.
4-Which HTTP method is commonly used to submit form data?
A) GET
B) POST
C) PUT
D) DELETE
Explanation: The correct answer is B. The POST method is commonly used to submit form data.
5-What is the purpose of the Fetch API in JavaScript?
A) To manipulate the DOM
B) To make HTTP requests
C) To create animations
D) To handle events
Explanation: The correct answer is B. The Fetch API in JavaScript is used to make HTTP requests.
6-In a Fetch API request, what does the method property specify?
A) The destination URL
B) The HTTP method (e.g., GET, POST) for the request
C) The request headers
D) The request body
Explanation: The correct answer is B. The method property in a Fetch API request specifies the HTTP method for the request.
7-What is the purpose of the Content-Type header in an HTTP request?
A) To specify the destination URL
B) To set the HTTP method
C) To define the data format being sent in the request body
D) To authenticate the request
Explanation: The correct answer is C. The Content-Type header in an HTTP request is used to define the data format being sent in the request body.
8-Which JavaScript function is commonly used to convert a JavaScript object to a JSON string?
A) JSON.stringify()
B) objectToString()
C) stringifyJSON()
D) toJson()
Explanation: The correct answer is A. The JSON.stringify() function is commonly used to convert a JavaScript object to a JSON string.
9-In PHP, what function is used to encode a PHP array as JSON?
A) json_encode()
B) array_to_json()
C) encode_json()
D) json_serialize()
Explanation: The correct answer is A. The json_encode() function in PHP is used to encode a PHP array as JSON.
10-What is the default Content-Type when using fetch with the Fetch API?
A) application/json
B) text/html
C) multipart/form-data
D) application/x-www-form-urlencoded
Explanation: The correct answer is B. The default Content-Type when using fetch with the Fetch API is text/html.
11-Which PHP superglobal contains information about the server environment?
A) $_GET
B) $_POST
C) $_SESSION
D) $_SERVER
Explanation: The correct answer is D. The $_SERVER superglobal in PHP contains information about the server environment.
12-What does json_decode() do in PHP?
A) Encodes a JSON string
B) Decodes a JSON string to a PHP array or object
C) Converts a PHP array to a JSON string
D) Serializes a PHP object
Explanation: The correct answer is B. json_decode() in PHP is used to decode a JSON string to a PHP array or object.
13-Which of the following is true about HTTP GET requests?
A) Data is sent in the request body
B) Data is visible in the URL
C) It is suitable for sensitive information
D) It is often used for form submissions
Explanation: The correct answer is B. Data in HTTP GET requests is visible in the URL.
14-In PHP, what does the htmlspecialchars() function do?
A) Converts special characters to HTML entities
B) Encodes a JSON string
C) Decodes a JSON string
D) Validates email addresses
Explanation: The correct answer is A. htmlspecialchars() in PHP converts special characters to HTML entities, preventing HTML injection.
15-What is the purpose of the enctype attribute in an HTML form?
A) Specifies the character encoding of the form data
B) Defines the HTTP method for the form
C) Specifies the destination URL for the form data
D) Indicates the encoding type for the form data
Explanation: The correct answer is D. The enctype attribute in an HTML form is used to indicate the encoding type for the form data, especially when submitting files.