To create an HTML form that allows users to search data from a “people” database table based on a Registration Number input and display the query results with specified output elements, you would typically use HTML for the form structure and CSS for styling. Here’s how you can set it up:
HTML (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Search people Database</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h2>Search people Database</h2>
<form action="search.php" method="GET">
<label for="classNo">Class Number:</label>
<input type="text" id="classNo" name="classNo" placeholder="Enter class number...">
<button type="submit">Search</button>
</form>
</div>
</body>
</html>
Explanation:
- This HTML structure includes a simple form with an input field (
classNo) and a submit button (Search). - The form is set to submit data using the GET method to a PHP script (
search.php). - The
<link>tag includes a CSS file (styles.css) for styling the form and results.
CSS (styles.css):
cssCopy code.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #f2f2f2;
border: 1px solid #ccc;
border-radius: 5px;
}
form {
display: flex;
align-items: center;
}
label, input, button {
margin: 5px;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
Explanation:
- The CSS file (
styles.css) styles the form container (div.container) to center it on the page, provide padding, and a border for visual separation. - The form (
form) and its elements (label,input,button) are styled with margins, padding, background colors, borders, and hover effects to enhance usability.
PHP (search.php)
Assuming you have a PHP script (search.php) that connects to your database and retrieves search results based on the classNo input. Here’s a simplified example:
phpCopy code<?php
// Check if classNo is provided
if (isset($_GET['classNo'])) {
$classNo = $_GET['classNo'];
// Perform database query using $classNo
// Replace with your actual database connection and query logic
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "your_database_name";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Example query (you should sanitize input to prevent SQL injection)
$sql = "SELECT FirstName, MidName, Sirname, EnrollmentDate, Email, MobileNumber, ResidentArea, Fellowship, Teacher, timeAvailable
FROM people
WHERE classNo = '$classNo'";
$result = $conn->query($sql);
// Display results in a form
if ($result->num_rows > 0) {
echo "<div class='container'>";
echo "<h2>Search Results</h2>";
echo "<form>";
while($row = $result->fetch_assoc()) {
echo "<label>First Name:</label> <input type='text' value='" . $row["FirstName"] . "' readonly><br>";
echo "<label>Middle Name:</label> <input type='text' value='" . $row["MidName"] . "' readonly><br>";
echo "<label>Surname:</label> <input type='text' value='" . $row["Sirname"] . "' readonly><br>";
echo "<label>Enrollment Date:</label> <input type='text' value='" . $row["EnrollmentDate"] . "' readonly><br>";
echo "<label>Email:</label> <input type='text' value='" . $row["Email"] . "' readonly><br>";
echo "<label>Mobile Number:</label> <input type='text' value='" . $row["MobileNumber"] . "' readonly><br>";
echo "<label>Resident Area:</label> <input type='text' value='" . $row["ResidentArea"] . "' readonly><br>";
echo "<label>Fellowship:</label> <input type='text' value='" . $row["Fellowship"] . "' readonly><br>";
echo "<label>Teacher:</label> <input type='text' value='" . $row["Teacher"] . "' readonly><br>";
echo "<label>Time Available:</label> <input type='text' value='" . $row["timeAvailable"] . "' readonly><br>";
}
echo "</form>";
echo "</div>";
} else {
echo "<div class='container'>";
echo "<p>No results found for Class Number: $classNo</p>";
echo "</div>";
}
$conn->close();
} else {
echo "<div class='container'>";
echo "<p>No class number provided.</p>";
echo "</div>";
}
?>
Explanation:
- The PHP script (
search.php) receives theclassNofrom the HTML form via$_GET['classNo']. - It connects to the database and performs a SQL query (
SELECT ... FROM people WHERE classNo = '$classNo') to retrieve data based on the providedclassNo. - Results are displayed in a styled form using HTML
<input>elements set toreadonlyto prevent editing.
Notes:
- Security: Always sanitize and validate user input (
$classNo) to prevent SQL injection attacks. - Database Connection: Ensure your PHP script (
search.php) correctly connects to your database and handles errors appropriately. - Styling: Customize the CSS (
styles.css) to match your design preferences and ensure usability.
This example provides a foundational setup for implementing a search functionality in a web application, retrieving data from a database, and displaying it in a styled form. Adjust the PHP SQL query and HTML structure as per your specific database schema and design requirements.
