FACUTLY OF ENGINEERING & TECHNOLOGY

(CO-EDUCATION)

DEPARTMENT OF
COMPUTER SCIENCE ENGINEERING
SHARNBASVA UNIVERSITY KALABURAGI | 2023-2024
 A
MINI PROJECT-2 REPORT
on

“THE STUDENT REGISTRATION FORM”

Submitted in partial fulfilment of the requirement for the award of the

2ND semester degree of

BACHELOR OF TECHNOLOGY
in
Computer Science Engineering
Submitted by
AMBRESH (SG23CSD003)
BHAGYASHREE PATIL (SG23CSD007)
ROHIT GUTTERDAR (SG23CSD031)
SONAJI RAO PAWAR (SG23CSD046)
SUHASINI HABISHAL (SG23CSD047)
YAZDAN MUSHRAF BAIG (SG23CSD058)
ZYED AZAM( SG23CSD060)

Under the guidance of

Prof. Sachinkumar Veersheety

Assistant Professor

DEPARTMENT OF
COMPUTER SCIENCE ENGINEERING
FACULTY OF ENGINEERING AND TECHNOLOGY(CO-
ED)
SHARNBASVA UNIVERSITY KALABURAGI
2023-2024
 DEPARTMENT OF

COMPUTER SCIENCE ENGINEERING

CERTIFICATE

This is to Certified that the Project work entitled “THE STUDENT

REGISTRATION FORM” is a bonafide work carried out by BHAGYASHREE
PATIL and bearing USN SG23CSD007 in partial fulfilment of the requirement for the
award of the 2nd semester degree of Bachelor of Technology in Sharnbasva University,
Kalaburagi during the year 2023-2024. It is certified that all corrections suggestion
indicated for Internal Assessment have been incorporated in the Report. The Project
Report has been approved as it satisfies the academic requirements in respect of project
work prescribed for the part of Bachelor of Technology Degree.

Signature of the Guide Signature of the Chairperson Signature of the Dean

Prof. Sachinkumar Dr. Syeda Asra Dr.Shivakumar

Veersheety Jawaligi

Name of the Examiner Signature with date

1.
2.
 DECLARATION

I,AMBRESH(SG23CSD003),BHAGYASHREEPATIL(SG23CSD007),ROHIT GUTTERDAR
(SG23CSD031),SONAJI RAO PAWAR (SG23CSD046),SUHASINI HABISHAL
(SG23CSD047), YAZDAN MUSHRAF BAIG(SG23CSD058),,ZYED AZAM(SG23CSD060)
student of Sharnbasva University Kalaburagi, hereby declare that the project " THE
STUDENT REGISTRATION FORM " Embodies the report of my project carried out
independently by me during first semester of Bachelor of Technology in Computer
Science Engineering under the supervision and guidance of Prof. Sachinkumar
Veersheety Department of Computer Science Engineering. This work has been submitted
the partial fulfilment of the requirement for the part of Bachelor of Technology Degree in
Computer Science Engineering by the, Sharnbasva University Kalaburagi during the
academic year 2023-2024.

We have not submitted the matter that embodies to any other university or institution for
the award of any other degree.

Date:
Place :Kalaburgi

AMBRES H (S G23CS D003)

BHAGYAS HREE PATIL (S G23CS D007)

ROHIT GUTTERDAR (S G23CS D031)

S ONAJI RAO PAWAR (S G23CS D046)

S UHAS INI HABIS HAL (S G23CS D047)

YAZDAN MUS HRAF BAIG (S G23CS D058)

ZYED AZAM( S G23CS D060)

 ACKNOWLEDGEMENT

Any achievement, be it scholastic or otherwise does not depend solely on the individual efforts
but also on the guidance, encouragement and co-operation of intellectual, elders and friends. A
number of personalities, in their own capacities have helped us in carrying out his friends. A
number of personalities, in their own capacities have helped us in carrying out this seminar work.
We would like to take this opportunity to thank them all.

First of all, we would like to express our immense gratitude to Dr.Anilkumar Biduve
(Registrar) Sharnbasva University, Kalaburagi for his help and inspiration during the tenure of
the course.

We would like to express our immense gratitude to Dr. SHIVAKUMAR JAWALGI, as a

Dean, Sharnbasva University, Kalaburagi for this help and inspiration during the tenure of the
course

We also extend our sincere thanks to Dr. Syeda As ra as a Chairman of the Department of
Computer Science Engineering, Sharnbasva University, kalaburagi, for his constant
encouragement.

We express our deep sense of gratitude to Prof.Sachinkumar Veersheety -- as a Project2

Guide for his valuable suggestions and encouragement. He is the one who provided me a
dynamic intellectual and stimulating state of mind to work hard. We also extend our sense of
gratitude and sincere thanks to all the faculty members of Computer Science Engineering
Department, Sharnbasva University, kalaburagi, for their constant encouragement and
support….!!

With Regards,
From “Project Team Members”…!!

AMBRES H

BHAGYAS HREE PATIL

ROHIT GUTTERDAR

S ONAJI RAO PAWAR

S UHAS INI HABIS HAL

YAZDAN MUS HRAF BAIG

ZYED AZAM
 ABSTRACT

In today’s digital age, automating administrative tasks has become essential for efficiency
and accuracy. This project presents a solution to streamline the student registration
process through a web-based form. The primary goal is to develop a user-friendly,
responsive registration form that captures essential student information such as name,
University Serial Number (USN), department, section, and email address.

The form is designed using HTML for structure and CSS for styling, featuring a fixed
header with a background image that remains stationary while users scroll. This ensures
that the header is always visible, providing a consistent user experience. The form adjusts
seamlessly to various screen sizes, making it accessible on desktops, tablets, and
smartphones.

Key features of the form include:

 Fixed Header: A header that stays in place, enhancing navigation.

 Responsive Design: Adapts to different devices and screen sizes.
 Form Validation: Ensures that required fields are completed correctly before
submission.

The implementation involves creating a visually appealing interface with a background

image that covers the form container. While the project focuses on frontend design and
user experience, future enhancements could include server-side integration for data
storage and more advanced validation techniques.

This project highlights the significance of modern web design in improving

administrative processes in educational institutions. It provides a foundation for further
development and showcases the potential of web technologies in creating efficient and
accessible online forms.
 INDEX

PAGE STAFF
SL.NO TOPIC
NO SIGN

01 INTRODUCTION 01

02 SYSTEM ANALYSIS 02-03

SOFTWARE REQUIREMENTS
03 SPECIFICATIONS
04

04 SYSTEM DESIGN 05-06

05 SYSTEM IMPLEMENTATION 07

06 RUNTIME FORMS 08

07 SOURCE CODE 09-12

08 SYSTEM TESTING 13

09 Future Enhancements 14

10 CONCLUSION 15
 THE STUDENT REGISTRATION FORM

CHAPTER NO:-01
INTRODUCTION
1.1 Background
The increasing need for digital solutions in education has highlighted the necessity for
streamlined and efficient student management systems. Traditional paper-based registration
forms are cumbersome and prone to errors, prompting the development of web-based forms
that offer greater efficiency and accuracy. This project focuses on creating a user-friendly
online student registration form to automate and simplify the enrollment process.
1.2 Purpose
The primary purpose of this project is to design and implement a web-based student
registration form. The form is intended to capture essential student information such as
name, USN, department, section, and email address. The design aims to enhance user
experience through an intuitive interface while ensuring data validation and integrity.
1.3 Objectives
 Develop a Responsive Form: Create a form that adjusts to various screen sizes and
devices, ensuring accessibility for all users.
 Incorporate User-Friendly Design: Implement a clean and straightforward design that
facilitates ease of use.
 Ensure Data Validation: Integrate client-side validation to ensure accurate data entry
and prevent submission errors.
 Implement Fixed Header: Design a fixed header with a background image that remains
in place while the user scrolls through the form.

1.4 Scope
The project scope includes designing the HTML form, styling it with CSS, and ensuring its
responsiveness across different devices. It does not cover backend functionalities like data
storage or server-side processing, which may be addressed in future enhancements.

Department of Computer Science Engineering

Sharnbasva University, Kalaburagi

Page 1
 THE STUDENT REGISTRATION FORM

CHAPTER NO:-02
SYSTEM ANALYSIS
2.1 Problem Definition
The primary issue addressed by this project is the need for a user-friendly and
visually consistent registration form that retains essential design elements—
specifically a fixed header and background image—regardless of the user’s viewport
size or scrolling actions.

2.2 Existing System

Previously, registration forms often lacked modern design features such as fixed
headers and responsive backgrounds. Users encountered issues with header elements
moving during zoom or scroll actions, and background images that did not cover the
entire viewport consistently.

2.3 Proposed System

The proposed system introduces a fixed header and background image. The header
remains at the top of the viewport, and the background image covers the entire page
without moving, ensuring a consistent and professional appearance. The form is
responsive, adjusting to different screen sizes.

2.4 Methodology
1. Design: Create mockups and wireframes.
2. Implementation: Develop the HTML and CSS for the form.
3. Testing: Validate the form’s functionality and design across different devices and
browsers.
4. Deployment: Launch the form on a web server.

2.5 Feasibility Study

2.5.1 Technical
The project is technically feasible using standard web technologies (HTML, CSS).
Fixed positioning and background image properties are well-supported across

Department of Computer Science Engineering

Sharnbasva University, Kalaburagi

Page 2
 THE STUDENT REGISTRATION FORM

modern browsers.

2.5.2 Operational
The system is user-friendly and integrates easily into existing web platforms. The
fixed header and background enhance user experience by providing consistent
branding and a polished look.

2.5.3 Economical
The project involves minimal costs as it primarily uses open-source technologies and
tools. The main expenses are related to design and development time.

Department of Computer Science Engineering

Sharnbasva University, Kalaburagi

Page 3
 THE STUDENT REGISTRATION FORM

CHAPTER NO:-03
SOFTWARE REQUIREMENTS SPECIFICATIONS

3.1 Hardware Requirements

 Computer: Any modern computer capable of running a web browser.
 Storage: Minimal, as the files are small (HTML, CSS, images).

3.2 Software Requirements

 Web Browser: Modern browsers such as Chrome, Firefox, or Safari for testing.
 Text Editor/IDE: Software like VS Code, Sublime Text, or Atom for coding.

3.3 Description about Tools Used

 HTML: Provides the structure for the registration form.
 CSS: Used for styling, including fixed positioning and background images.
 Image Editing Tools: Used to prepare and optimize images (e.g., Photoshop, GIMP).

Department of Computer Science Engineering

Sharnbasva University, Kalaburagi

Page 4
 THE STUDENT REGISTRATION FORM

CHAPTER NO:-04
SYSTEM DESIGN
4.1 Class Diagram

4.2 Use Case Diagram

Department of Computer Science Engineering

Sharnbasva University, Kalaburagi

Page 5
 THE STUDENT REGISTRATION FORM

4.3.2 Table Design

Department of Computer Science Engineering

Sharnbasva University, Kalaburagi

Page 6
 THE STUDENT REGISTRATION FORM

CHAPTER NO:-05
System Implementation
5.1 Implementation Overview
The system was implemented using HTML and CSS to create a static web form with a fixed
header and a full-page background image. The implementation process involved writing
HTML for the form structure and CSS for styling and layout adjustments.
5.2 Key Components
 HTML Form: The form includes fields for name, USN, department, section, and email.
Each field is designed to be required and validated for proper data entry.
 CSS Styling: The CSS provides styling for the form and header, including the
background image settings and fixed positioning for the header.

5.3 Development Process

 HTML Markup: Created the form structure using standard HTML elements. Defined the
form fields and their attributes to ensure proper data capture.
 CSS Styling: Applied styles to the form and header. Configured the background image to
cover the entire viewport and set the header to be fixed.
 Testing and Debugging: Tested the form across various browsers and devices to ensure
compatibility and responsiveness. Debugged any issues related to layout and functionality.

5.4 Tools Used

 Code Editor: Visual Studio Code was used for writing and editing HTML and CSS.
 Browser Developer Tools: Used for testing and debugging the web form.
 Image Editing Software: Photoshop was used to optimize images for web use.

Department of Computer Science Engineering

Sharnbasva University, Kalaburagi

Page 7
 THE STUDENT REGISTRATION FORM

CHAPTER NO:-06
Runtime Forms
6.1 Form Design
 Name Field: A text input field for the student’s name.
 USN Field: A text input field for the student’s University Serial Number.
 Department Field: A text input field for the student’s department.
 Section Field: A text input field for the student’s section.
 Email Field: A text input field for the student’s email address.

6.2 User Interface

 Centered Layout: The form is centered within the viewport for better user experience.
 Readable Fonts: The use of Arial font ensures readability and accessibility.
 Responsive Design: The form adjusts to different screen sizes, providing a seamless
experience on desktops, tablets, and mobile devices.

6.3 Functionality
 Field Validation: Each field has required attributes and appropriate input types to ensure
that only valid data is entered.
 Submit Button: A submit button at the end of the form initiates the data submission
process.
 Visual Feedback: Input fields and submit button are styled to provide visual feedback on
user interaction.

Department of Computer Science Engineering

Sharnbasva University, Kalaburagi

Page 8
 THE STUDENT REGISTRATION FORM

CHAPTER NO:-07
SOURCE CODE

7.1 IN HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Registration Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<img src="header.jpeg" alt="University Header Image" class="header-image">

</header>
<div class="container">
<form>
<h1>STUDENT REGISTRATION</h1>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

<label for="usn">Student USN:</label>

<input type="text" id="usn" name="usn" required>

<label for="department">Department:</label>
<input type="text" id="department" name="department" required>

<label for="section">Section:</label>
<input type="text" id="section" name="section" required>

<label for="email">Gmail ID:</label>

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

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

</form>
</div>
</body>
</html>

Department of Computer Science Engineering

Sharnbasva University, Kalaburagi

Page 9
 THE STUDENT REGISTRATION FORM

7.2 IN CSS:

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
background-image: url('BUILDING');
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 150px;
background-color: #000;
color: white;
text-align: center;
z-index: 1000;
margin: 0;
padding: 0;
background-image: url('header.jpeg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

.header-image {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}

h1 {
margin: 0;
padding: 20px;
color: rgb(109, 59, 2);
}

Department of Computer Science Engineering

Sharnbasva University, Kalaburagi

Page 10
 THE STUDENT REGISTRATION FORM

.container {
width: 90%;
max-width: 500px;
margin: 0 auto;
background-color: rgba(255, 255, 255, 0.9);
padding: 30px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
background-image: url('form.jpeg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: relative;
margin-top: 180px;
}

form {
background-color: rgba(255, 255, 255, 0.24);
padding: 30px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
margin: 0;
}

label {
display: block;
margin-bottom: 5px;
}
input[type="text"],
input[type="email"],
input[type="submit"] {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #cf3a3a;
border-radius: 3px;
box-sizing: border-box;
background-color: #f0f0f081;
background-image: url('path-to-your-image.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}

Department of Computer Science Engineering

Sharnbasva University, Kalaburagi

Page 11
 THE STUDENT REGISTRATION FORM

input[type="submit"] {
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}

input[type="submit"]:hover {
background-color: #45a049;
}

Department of Computer Science Engineering

Sharnbasva University, Kalaburagi

Page 12
 THE STUDENT REGISTRATION FORM

CHAPTER NO:-08
SYSTEM TESTING
8.1 Functional Testing
 Form Submission: Verified that all form fields correctly accept input and submit data.
 Field Validation: Ensured that all required fields are marked as mandatory and correctly
validate input (e.g., email format).

8.2 Cross-Browser Testing

 Chrome: Checked functionality and design.
 Firefox: Validated appearance and interactivity.
 Safari: Ensured compatibility on macOS devices.
 Edge: Confirmed form's behavior on Windows.

8.3 Responsive Design Testing

 Desktop: Ensured layout and design adjustments on various screen sizes.
 Tablet: Verified form usability on medium-sized screens.
 Mobile: Checked responsiveness and touch interactions on smartphones.

8.4 Usability Testing

 User Experience: Conducted tests with real users to assess ease of use and intuitive
design.
 Accessibility: Verified compatibility with screen readers and keyboard navigation.

Department of Computer Science Engineering

Sharnbasva University, Kalaburagi

Page 13
 THE STUDENT REGISTRATION FORM

CHAPTER NO:-09
Future Enhancements
9.1 Enhanced Validation
 Real-Time Validation: Providing immediate feedback as users input data to correct errors
on the fly.
 Server-Side Validation: Ensuring data integrity by validating input on the server side
before processing.

9.2 Backend Integration

 Store Submissions: Save submitted data in a database for further processing and analysis.
 Manage Data: Provide functionalities to view, edit, and delete records as necessary.

9.3 Improved User Experience

 Dynamic Form Fields: Adding fields based on previous inputs (e.g., additional sections for
students with special requirements).
 Interactive Elements: Incorporating tooltips, help icons, and progress indicators to guide
users through the form.

9.4 Accessibility Improvements

 ARIA Roles: Implementing ARIA roles to improve accessibility for users with disabilities.
 Keyboard Navigation: Ensuring the form is fully navigable using only keyboard inputs.

Department of Computer Science Engineering

Sharnbasva University, Kalaburagi

Page 14
 THE STUDENT REGISTRATION FORM

CHAPTER NO:-10

CONCLUSION
The student registration form project effectively addresses the need for a streamlined and user-
friendly digital registration process. The fixed header and background image contribute to a
visually appealing interface, while the responsive design ensures usability across various
devices. The implementation of HTML and CSS provides a solid foundation for further
development and enhancements.
The form's successful deployment demonstrates its potential for real-world application in
educational institutions, facilitating easier data collection and management. Future
improvements will focus on integrating advanced features and ensuring continued alignment
with modern web standards.

Department of Computer Science Engineering

Sharnbasva University, Kalaburagi

Page 15
 THE STUDENT REGISTRATION FORM

Bibliography
 W3Schools. (n.d.). HTML Tutorial. Retrieved from https://www.w3schools.com/html/
 MDN Web Docs. (n.d.). CSS Backgrounds. Retrieved from
https://developer.mozilla.org/en-
US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Backgrounds
 CSS-Tricks. (2020). Centering in CSS. Retrieved from https://css-tricks.com/centering-css-
complete-guide/
 Bootstrap Documentation. (n.d.). Bootstrap Grid System. Retrieved from
https://getbootstrap.com/docs/5.0/layout/grid/
A List Apart. (2019). Responsive Web Design. Retrieved from
https://alistapart.com/article/responsive-web-design/

Department of Computer Science Engineering

Sharnbasva University, Kalaburagi

Page 16