Sharnbasva University

KALABURAGI

Department of Computer Science & Design Engineering

Certificate
Certified that the Mini-Project Work entitled “THE STUDENT
REGISTERATION” carried out by Yazdan Mushraf Baig(SG23CSD058), Sonaji
Pawar(SG23CSD046),Rohit Guttedar(SG23CSD031),Suhasini Habishal(SG23SCD047),Bhagyashree

Patil(SG23CSD007),Ambresh(SG23CSD004),Zye d Az am(SG23CSD060), in partial fulfilment for

the degree of Bachelor of Technology in COMPUTER SCIENCE & ENGINEERING of
the Sharnbasva University, Kalaburagi during the year 2023- 2024. It is certified that all
corrections/suggestions indicated have been incorporated in the report. The mini project
report has been approved as it satisfies the academic requirements in respect of Mini project
work prescribed for the Bachelor of Technology Degree.

MARKS DETAILS

Sl.no Name of Student USN Max Marks Marks

Obtained
1. Yazdan Mushraf SG23CSD058
2. Sonaji Pawar SG23CSD046
3. Rohit Guttedar SG23CSD031
4. Suhasini Habishal SG23CSD047
5. Bhagyashree Patil SG23CSD007
6. Ambresh SG23CSD003
7. Zyed Azam SG23CSD060

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

EXTERNAL VIVA
Name of Examiners Signature with Date

1.
2.
 DECLARATION

I,AMBRESH(SG23CSD003),BHAGYASHREEPATIL(SG23CSD007),ROHIT GUTTEDAR
(SG23CSD031),SONAJI 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 second semester of Bachelor of Technology in Computer
Science & Design Engineering under the supervision and guidance of Dr. Sachinkumar
Veersheety Department of Computer Science & Design Engineering. This work has been
submitted the partial fulfilment of the requirement for the part of Bachelor of Technology
Degree in Computer Science & Design 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

AMBRESH (SG23CSD003)

BHAGYASHREE PATIL (SG23CSD007)

ROHIT GUTTEDAR (SG23CSD031)

SONAJI PAWAR (SG23CSD046)

SUHASINI HABISHAL (SG23CSD047)

YAZDAN MUSHRAF BAIG

(SG23CSD058)
ZYED AZAM (SG23CSD060)
 ACKNOWLEDGEMENT
Any achievement, be scholastic or otherwise does not depend solely on individual efforts
but also on the guidance, encouragement, and cooperation of intellectuals, elders and friends.
Several personalities, in their capacities, have helped us in carrying out this Mini project.

We also extend our sincere thanks to Dr. Anilkumar Bidve, Vice-Chancellor, Sharnbasva
University, Kalaburagi for this constant encouragement.

We also extend our sincere thanks to Dr. Sannabasanagouda Dollegoudar, Registrar,

Sharnbasva University, Kalaburagi.
We also extend our sincere thanks to Dr. Shivakumar Jawaligi, Dean, Faculty
of Engineering & Technology (Co-Ed), Sharnbasva University, Kalaburagi.
We also extend our sincere thanks to Dr. Sachinkumar Veersheetty, Chairperson,
Department of Computer Science & Design Engineering, Sharnbasva University, Kalaburagi, for
her constant encouragement.
We also extend our sincere thanks to our Guide Dr. Sachinkumar Veersheetty,,
Department of Computer Science & Design Engineering, Faculty of Engineering &
Technology (Co-Ed), for his constant encouragement.
We also extend our sense of gratitude and sincere thanks to all the faculty members of
the Computer Science & Design Engineering Department, Faculty of Engineering & Technology
(Co-Ed), for their constant support.

Yazdan Mushraf Baig SG23CSD058

Rohit Guttedar

SG23CSD031
Sonaji Pawar SG23CSD046
Suhasini habishal
SG23CSD047
Bhagyshree Patil SG23CSD007
Ambresh SG23CSD003
Zyed Azam SG23CSD060
 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

SL.NO TOPIC PAGE NO

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-12

07 SYSTEM TESTING 13

08 Future Enhancements 14

09 CONCLUSION 15
 THE STUDENT REGISTRATION FORM

CHAPTER 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 & Design

Engineering Sharnbasva University, Kalaburagi
 THE STUDENT REGISTRATION FORM

CHAPTER 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 & Design

Engineering Sharnbasva University, Kalaburagi
 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 & Design

Engineering Sharnbasva University, Kalaburagi
 THE STUDENT REGISTRATION FORM

CHAPTER 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 & Design

Engineering Sharnbasva University, Kalaburagi
 THE STUDENT REGISTRATION FORM

CHAPTER 04
SYSTEM DESIGN

Fig 4.1 Class Diagram

Fig: 4.2 Use Case Diagram

Department of Computer Science & Design

Engineering Sharnbasva University, Kalaburagi
 THE STUDENT REGISTRATION FORM

4.3.2 Table Design

Fig:4.3 Flowchart

Department of Computer Science & Design

Engineering Sharnbasva University, Kalaburagi
 THE STUDENT REGISTRATION FORM

CHAPTER 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 & Design

Engineering Sharnbasva University, Kalaburagi
 THE STUDENT REGISTRATION FORM

CHAPTER 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 & Design

Engineering Sharnbasva University, Kalaburagi
 THE STUDENT REGISTRATION FORM

CHAPTER 07
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 & Design

Engineering Sharnbasva University, Kalaburagi
 THE STUDENT REGISTRATION FORM

CHAPTER 08
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 & Design

Engineering Sharnbasva University, Kalaburagi
 THE STUDENT REGISTRATION FORM

CHAPTER 09

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 & Design

Engineering Sharnbasva University, Kalaburagi
 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 & Design

Engineering Sharnbasva University, Kalaburagi