INTRODUCTION

Introduction to the Registration Form Website:

This Registration Form Website serves as a simple yet effective platform for collecting
essential information from users, such as their personal details and academic interests. The
main objective of the website is to facilitate the process of student registration for a specific
program or course. It allows users to input key details, such as their first name, last name,
father's name, course, and email, in a clear and user-friendly interface.

Objectives:

1. Ease of Use: The website is designed to be intuitive and easy to use, allowing users to
quickly and accurately fill out their personal information.
2. Data Collection: The primary goal is to collect accurate and complete information
from users for further processing or registration. This includes gathering basic
personal details and educational preferences, such as the course they wish to enroll in.
3. User Engagement: By offering a simple yet clean design with the use of modern web
design techniques (such as form validation and styling), the website aims to enhance
the user experience, making the process of filling out the form more enjoyable and less
tedious.
4. Data Integrity: Ensuring that all the required fields are filled in correctly and
validated through input constraints like the required attribute and email validation
helps ensure the integrity of the data being collected.
5. Accessibility: The form has been designed with accessibility in mind, using labels and
clear instructions for users to easily navigate and understand the form fields.
6. Submission and Follow-Up: Once the user submits the form, the data can be
processed and used for further communication, such as course confirmation, follow-up
emails, or other administrative actions.

In summary, the objective of this registration form website is to streamline the process of
collecting personal and course-related information from users in a seamless, attractive, and
efficient way. It aims to facilitate smooth registration for both the user and the organization
managing the course or program.

To build the Registration Form Website, various tools and technologies can be utilized. Below are the
primary tools and technologies commonly used to create such websites:

1. HTML (HyperText Markup Language)

• Purpose: HTML is the foundational markup language used to create the structure of the webpage.
The form elements like text inputs, buttons, and labels are defined using HTML.
• Tools Used: Visual Studio Code is used to write the HTML code.

2. CSS (Cascading Style Sheets)

 • Purpose: CSS is used to style the HTML elements and make the form visually appealing. It allows
you to customize the colors, layout, fonts, spacing, and other design aspects.
• Tools Used: CSS is typically written directly in a <style> tag (inline CSS) within the HTML file or
in an external .css file.

3. Web Browser

• Purpose: Browsers such as Google Chrome, Mozilla Firefox, or Microsoft Edge are used for
viewing and testing the website.
• Tools Used: Chrome Developer Tools or Firefox Developer Tools for debugging and testing
CSS/HTML changes in real-time.

4. Text Editor/IDE (Integrated Development Environment)

• Purpose: A text editor or IDE is used to write and edit the HTML and CSS code efficiently.
• Examples:
o VS Code: A popular code editor with features like syntax highlighting, auto-completion, and
integrated terminal.
o Sublime Text: A lightweight text editor that is fast and customizable.
o Notepad++: A text editor with syntax highlighting and plugin support for various web
technologies.

5. Backend Technology

• Purpose: To process and store the form data, we have used a backend technology such as PHP,
Node.js, Python (Django/Flask), or others to handle form submissions and send the data to a server
or database.
• Example for this case:
o PHP: The action attribute in the form specifies a PHP script (form.php) to process the form
data.

6. Database

• Purpose: To save the submitted form data, we have used a database system.
• Example:
o MySQL: A popular relational database system to store student registration data.

Summary of Tools Used:

• HTML for page structure

• CSS for styling
• Text editor (VS Code, Sublime Text, etc.)
• Web browser (Chrome, Firefox, etc.)
• Backend technology (PHP, if needed for form submission)
• Database (MySQL, if needed for storing submissions)

This combination of tools allows for the development of a fully functional, aesthetically pleasing, and user-
friendly registration form website.
ER Diagram
 HTML Code
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Form Using HTML</title>

<link rel="stylesheet" href="form.css">

</head>

<body>

<header>

<ul>

<li>Home</li>

<li>About</li>

<li>Services</li>

<li>Login</li>

<li>Contact</li>

<li>Help</li>

</ul>

</header>

<main>

<form action="action.php" method="post">

<h1>Application Form</h1>

<div>

<label for="fname">First Name :</label>

<input type="text" id="fname" name="fname" placeholder="Enter first name...">

</div>

<div>

<label for="lname">Last Name :</label>

<input type="text" id="lname" name="lname" placeholder="Enter last name...">

</div>

<div>

<label for="dob">Date of birth :</label>

<input type="date" id="dob" name="dob">

</div>

<div>

<label for="phone">Phone No. :</label>

<input type="tel" id="phone" name="phone" required>

 </div>

<div>

<label for="gender">Gender :</label>

<select name="gender" id="gender">

<option value="none"></option>

<option value="1">Male</option>

<option value="2">Female</option>

<option value="3">Others</option>

</select>

</div>

<div>

<label for="email">Email :</label>

<input type="email" name="email" id="email">

</div>

<div>

<label for="position">Position :</label>

<input type="text" id="position" name="position" placeholder="Enter position...">

</div>

<div>

<label for="language">Languages :</label>

<input type="text" id="language" name="language" placeholder="Enter languages...">

</div>

<div>

<label for="password">Password: </label>

<input type="password" id="password" name="password">

</div>

<div>

<input type="submit" value="submit">

</div>

</form>

</main>

<footer>

</footer>

</body>

</html>
 CSS Code
*{

margin: 0;

padding: 0;

box-sizing: border-box;

body {

font-family: Arial, sans-serif;

background-color: #f4f7fc;

color: #333;

line-height: 1.6;

header {

background-color: burlywood;

padding: 10px 0;

text-align: center;

header ul {

list-style-type: none;

display: flex;

justify-content: center;

gap: 20px;

header li {

display: inline;

color: #fff;

cursor: pointer;

header li:hover {

text-decoration: underline;

main {

display: flex;

justify-content: center;

align-items: center;

padding: 30px;
}

form {

background-color: #fff;

padding: 20px;

border-radius: 8px;

box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

width: 100%;

max-width: 600px;

form h1 {

text-align: center;

margin-bottom: 20px;

font-size: 1.8em;

color: #333;

div {

margin-bottom: 15px;

label {

display: block;

font-size: 1em;

margin-bottom: 5px;

color: #555;

input[type="text"],

input[type="date"],

input[type="tel"],

input[type="email"],

select,

input[type="password"] {

width: 100%;

padding: 10px;

margin-top: 5px;

border: 1px solid #ccc;

border-radius: 4px;

font-size: 1em;
 outline: none;

input[type="text"]:focus,

input[type="date"]:focus,

input[type="tel"]:focus,

input[type="email"]:focus,

select:focus,

input[type="password"]:focus {

border-color: #4CAF50;

input[type="radio"],

input[type="checkbox"] {

margin-right: 5px;

div input[type="radio"] + label,

div input[type="checkbox"] + label {

display: inline-block;

font-size: 1em;

margin-left: 10px;

input[type="submit"] {

background-color: #4CAF50;

color: white;

border: none;

padding: 12px 20px;

font-size: 1.2em;

cursor: pointer;

width: 100%;

border-radius: 4px;

transition: background-color 0.3s ease;

input[type="submit"]:hover {

background-color: #45a049;

}
 PHP Code
<html>

<body>

<?php

echo "Hello...<br>";

$server_name="localhost";

$username="root";

$password="";

$database="employees";

$conn=new mysqli($server_name,$username,$password,$database);

if ($conn->connect_error) {

die("Connection Failed...". mysqli_connect_error());

} else

echo"connected successfully... <br>";

$fn=$_POST["fname"];

$ln=$_POST["lname"];

$do=$_POST["dob"];

$ph=$_POST["phone"];

$gn=$_POST["gender"];

$em=$_POST["email"];

$po=$_POST["position"];

$lang=$_POST["language"];

$pass=$_POST["password"];

echo "<br>.$fn.<br>.$ln.<br>.$do.<br>.$ph.<br>.$gn.<br>.$em.<br>.$po.<br>.$lang.<br>.$pass";

$sql = "INSERT INTO applications(fname, lname, dob, phone, gender, email, position, language, password) VALUES ('$fn', '$ln', '$do', '$ph', '$gn', '$em', '$po',
'$lang', '$pass')";

mysqli_query($conn,$sql);

$conn-> close();

?>

Welcome...

</html>

</body>
FORM Preview