wt lab
HTML CODE:
<html>
<head>
<title>Registration Form</title>
<link
rel="stylesheet" type="text/css"
href="RegistrationForm.css">
<link
rel="icon" type="image/x-icon" href="C:\Users\svbal\Downloads\wallpaper\icon.jpg">
<body>
<div
class="container">
<h2>Registration Form</h2>
<form
id="registrationForm" onsubmit="return validateForm()"
method="post" action="RegistrationForm.php">
<label for="fullName">Full Name:</label>
<input type="text" id="fullName"
name="fullName" required><br><br>
<label for="stdid">Student ID:</label>
<input type="text" id="stdid"
name="stdid" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email"
name="email" required><br><br>
<label for="phoneNumber">Phone Number:</label>
<input type="text" id="phoneNumber"
name="phoneNumber" required><br><br>
<input type="submit" value="Submit">
</form>
<div
id="message"></div>
</div>
<script
src="RegistrationForm.js"></script>
</body>
</html>
CSS CODE:
.container {
max-width:
400px;
margin: 0
auto;
padding:
20px;
border: 1px
solid #ccc;
border-radius: 5px;
background-color: #f9f9f9;
text-align:
center;
}
label {
display:
block;
margin-top:
10px;
}
input[type="text"],
input[type="email"] {
width: 100%;
padding:
5px;
margin: 5px
0;
border: 1px
solid #ccc;
border-radius: 3px;
}
input[type="submit"] {
background-color: #4CAF50;
color:
white;
padding:
10px 20px;
border:
none;
border-radius: 3px;
cursor:
pointer;
}
#message {
color: red;
font-weight:
bold;
margin-top:
10px;
}
body {
background-image: url("bgimage.jpg");
}
JS CODE:
function validateForm() {
var fullName
= document.getElementById("fullName").value;
var stdid =
document.getElementById("stdid").value;
var email =
document.getElementById("email").value;
var
phoneNumber = document.getElementById("phoneNumber").value;
var
phonePattern = /^\(\d{3}\) \d{3}-\d{4}$/;
var
emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$/;
var
stdidpattern = /^\d{8}$/;
var fullName
= /^[a-zA-Z]$/;
var
messageDiv = document.getElementById("message");
messageDiv.innerHTML = "";
if
(!fullnamepattern.test(fullname)) {
showMessage("Invalid Name");
return
false;
}
if
(!stdidpattern.test(stdid)) {
showMessage("Invalid Student ID");
return
false;
}
if
(!emailPattern.test(email)) {
showMessage("Invalid email format.");
return
false;
}
if
(!phonePattern.test(phoneNumber)) {
showMessage("Invalid phone number format, Use 10 digits.");
return
false;
}
return true;
}
function showMessage(message) {
var
messageDiv = document.getElementById("message");
messageDiv.innerHTML = message;
}
PHP CODE:
<?php
// Assuming you have a database connection already
established
$host = "localhost";
$dbname = "registrationform";
$username = "root";
$password = "123456789";
try {
$conn = new
PDO("mysql:host=$host;dbname=$dbname", $username, $password);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$fullName =
$_POST['fullName'];
$stdid =
$_POST['stdid'];
$email =
$_POST['email'];
$phoneNumber
= $_POST['phoneNumber'];
$stmt =
$conn->prepare("INSERT INTO users (fullName, stdid, email, phoneNumber)
VALUES (:fullName, :stdid, :email, :phoneNumber)");
$stmt->bindParam(':fullName', $fullName);
$stmt->bindParam(':stdid', $stdid);
$stmt->bindParam(':email', $email);
$stmt->bindParam(':phoneNumber', $phoneNumber);
$stmt->execute();
echo
"Record inserted successfully";
} catch (PDOException $e) {
echo
"Error: " . $e->getMessage();
}
$conn = null; // Close the database connection
?>
Comments
Post a Comment