Sangamner Nagarpalika Arts, D.J.

Malpani

Commerce and B.N. Sarada Science

College.

CERTIFICATE

This Is To Certify That The Project Report

Entitled
Students Registration Form
Under Course :-Web Page Designing with
HTML(22014)

Ms.Vaishnavi Dattatray Shinde.

Ms.Sarita Eknath Hase.
 Has Satisfactorily completed the micro-poject entitled,
“ Student Registration Form”
As prescribed by MSBTE,Mumbai,as part of syllabus for the partial
Fulfillment in diploma in computer Technology for Academic year
2020-2021

(Project guide) (HOD)

INDEX

Sr. Name
No.
1. Rational
2. Aim
3. Course outcomes
Achieved
4. Literature Review
5. Actual methodology
followed
6. Actual Resource Used
7. Outputs of Micro-project
8. Skill Developed
9. Applications of Micro-
project

Micro Project Report

 Students Registration Form

1.0 Rationale:
A student registration form is used to register students for a course.
… Students can provide their contact information, detail their
academic history, list extracurriculars and additional interests,
and even pay registration fees if required.A registration form is
a list of fields that a user will input data into and submit to a
company or individual. There are many reasons why you
would want a person to fill out a registration form. Companies
use registration forms to sign up customers for subscriptions,
services, or other programs or plans.

2.0 Aim:
To develop a web page using HTML code and CSS for
students registration form for keeping the all important
documents and information about the students in
admission form.

3.0 Course Outcomes Achieved:

CI014.1 All the fields are filled correctly, submit form adds the data
CI014.2 Registration form is developed using the HTML tags and it
includes form, text and button elements.
CI014.3 Differents elements are using and form the created and
finally JavaScript is added for the validation of the screen.
CI014.4 An HTML form is used to collect user input
CI014.5 The user input is most often sent to a server for processing.
4.0Literature Review:
A registration form is a list of fields that a user will input data
into and submit to a company or individual. There are many
reasons why you would want a person to fill out a registration
form. Companies use registration forms to sign up customers
for subscriptions, services, or other programs or plans.
The purpose of registration of a document is to give ‘notice
to the world’ of a certain property document having been
executed. Record keeping is another important function of
registration offices and these records are permanent for all
practical purposes

5.0 Actual Methodology:

1. collect the information as per allocated topic or by doing survey.
2. collect the information from different websites
a. https://ourtechroom.com/tech/parts-of-motherboard/
b. https://www.gamestyle.net/types-of-motherboard/
3. Arrange allocated information as per given format and prepare its
report.
4. Also prepare a power point presentation.
5. At last checked properly whether all done work I proper or not
The actual contribution of team members is as follows:

Sr.no Details of activity

1. Study of different concepts of C related with topic

2. Defining the Problem Statement

3. Micro project Proposal Preparation
4. Design an algorithm
5. Design flowchart
6. Coding
7. Testing
8. Micro Project Report Preparation
6.0 Actual Resources Used:

Sr.no Name of Specification Quantity Remarks

resources/material
1. System HP 01 --
Make,4GB
RAM
2. Development Tool Note 01 --
pad,web
browser
3. Internet connection Minimum 2 01 --
mbps
4. Microsoft power Office 7 or 01 --
point,word higher
5. Printer Inkjet,laserjet 01 --
Outputs of Micro Project:

Introduction to Registration Form in HTML:

Student Registration Form in HTML with CSS |

We are going to design Student Registration Form in HTML

with CSS using Table in HTML. A simple HTML Code for
Student Registration Form that contains all necessary fields
in the student registration form. Take an example, First-
Name, Last-Name, EmailID, Mobile Number, Address,
Hobbies, Course, Gender, Date-of-Birth, etc.

Create a beautiful Student Registration Form HTML with

CSS, also validate student registration form in
HTML(Hypertext markup language) and CSS(Cascading
style sheets). The student registration form also contains the
SUBMIT and RESET buttons if any student enters the
wrong data while filling the registration form so he/she can
reset the form in HTML.

How to Create Student Registration Form in HTML

with CSS:
So In this problem, we have a Student Registration Form in
HTML with CSS, as we all know that registration form
contains some fields that are the First Name, Last Name,
Email ID, Mobile Number, Address, Hobbies, Course,
Gender, Date of Birth, City, District, State / Province, and
Pincode. So basically, we have to create all these fields
where the user can store the information. See the
Explanation section for table tags in detail.

Student Registration Form in HTML and CSS

HTML Forms can be seen everywhere today in all kinds of
sites. These HTML forms are used to collect data or
information or feedback etc., from the visitors of your site.
There are Log In Forms, Registrations Forms, Contact Us
Forms, among others.

HTML Forms are used to obtain kinds of user details and

inputs, such as name, age, and email address. The forms
used in the websites are formed with the help of different
special elements known as ‘controls’ in HTML, for
example, text areas, radio buttons, checkboxes, submit
buttons, etc. While using such forms, users or visitors enter
the information or data by modifying these controls, for
example, by entering texts or performing selection on
specific items, etc. and then by submitting the form. When
the form is duly filled, the submitted form adds data, or
sends it or redirects it to another page or could also save the
details in a database.
The world is changing rapidly due to the modern technology
of the web. Nowadays, most of the life tasks we are doing
via the internet. Whether it is about applying for a job or
online course, we need to register on a specific website.
Every webmaster tries to develop user-friendly signup
forms whether he is creating an e-commerce website or
educational website. So, today I’m going to build a student
registration form in HTML with form fields validation.
 Generally, the form validation process requires JavaScript to
validate form fields before submitting it. But, what will be
your reaction if I say that it’s quite possible without
JavaScript? Off course! It’s possible using HTML5 built-in
validation. Not only this, but you can also display (valid &
invalid entries) messages to users using pure CSS.

As you have seen on the demo page (browse demo page if

you didn’t check), this student registration form is quite
simple and straightforward. However, you can add more
input fields as you need. Similarly, you can fully customize
it with CSS according to your template. So, let’s start with
the HTML coding.
How to Create?
HTML Forms are easy to create. As all other HTML
elements, to create a form we need an opening form tag
(<form>) and a closing form tag (</form>), which in turn
will use other attributes like <fieldset> elements, <legend>
elements, <input> elements among others to create a fully
functional form. Of course, we have to use CSS for look and
feel.

Following is a basic syntax for an HTML Form.

Syntax:
<form action = “URL” method = “GET or POST”>
Form elements like submit or reset buttons, input, text area etc.
</form>
Example of Registration Form in HTML:
Let’s see an example code excerpt for a simple HTML form. The form
shown below is a simple Log In Form and has minimal control
elements.

Code:

<form name=”regForm”>
<label>Username: <input type=”text” id=”username”></label>
<label>Password: <input type=”password” id=”pwd”></label>
<input type=”submit” class=”login” value=”Log In”
onclick=”validation()” formtarget=”_blank”>
</form>

As shown above, this Log In Form has two text boxes and a
submit button labeled as Log In. It’s a simple HTML form that
we have created, and the data entered is decided to be printed
after the user submits it. The ‘react’ part of an HTML form is
handled by our javascript function, which is called with the
help of an attribute called ‘onclick’ added to the submit button.
Output:

Above is the output we receive when the code is executed.

After entering the Username and Password, we submit the
form and the following welcome message is displayed.

Output:
The above-discussed form is a simple login form which is
accepting only two values, username and password and is
submitted. Here we are simply printing the values, but
normally in the processing part, one can compare ‘log in’
details with the saved values in a database and show a
‘successful login’ message.

A registration form, however, is something that accepts a

variety of data or information, like name, user name,
password, date of birth, email address, among others, and this
information is then subjected to processing that might include
a display of the data on the next page or saving of data into a
database and performing a successful registration.

How to Create a Registration HTML Form?

Let’s see the creation of the Registration Form, step by

step.
Step 1: Create and add HTML form elements and their
associated elements. Here we will create nested form-related
or associated elements inside opening and closing Form tags.
You can also ‘add action’ attribute to your <form> tag.

Following is the HTML code excerpt for our form.

Code:
StudentRegistration.html

<html>
<head>
<script type=”text/javascript” src=”validate.js”></script>
</head>
<body>
<form action=”#” name=”StudentRegistration”
onsubmit=”return(validate());”>

<table cellpadding=”2” width=”20%” bgcolor=”99FFFF”

align=”center”
Cellspacing=”2”>

<tr>
<td colspan=2>
<center><font size=4><b>Student Registration
Form</b></font></center>
</td>
</tr>

<tr>
<td>Name</td>
<td><input type=text name=textnames id=”textname”
size=”30”></td>
</tr>

<tr>
<td>Father Name</td>
<td><input type=”text” name=”fathername” id=”fathername”
Size=”30”></td>
</tr>
<tr>
<td>Postal Address</td>
<td><input type=”text” name=”paddress” id=”paddress”
size=”30”></td>
</tr>

<tr>
<td>Personal Address</td>
<td><input type=”text” name=”personaladdress”
Id=”personaladdress” size=”30”></td>
</tr>

<tr>
<td>Sex</td>
<td><input type=”radio” name=”sex” value=”male”
size=”10”>Male
<input type=”radio” name=”sex” value=”Female”
size=”10”>Female</td>
</tr>

<tr>
<td>City</td>
<td><select name=”City”>
<option value=”-1” selected>select..</option>
<option value=”New Delhi”>NEW DELHI</option>
<option value=”Mumbai”>MUMBAI</option>
<option value=”Goa”>GOA</option>
<option value=”Patna”>PATNA</option>
</select></td>
</tr>

<tr>
<td>Course</td>
<td><select name=”Course”>
<option value=”-1” selected>select..</option>
<option value=”B.Tech”>B.TECH</option>
<option value=”MCA”>MCA</option>
<option value=”MBA”>MBA</option>
<option value=”BCA”>BCA</option>
</select></td>
</tr>

<tr>
<td>District</td>
<td><select name=”District”>
<option value=”-1” selected>select..</option>
<option value=”Nalanda”>NALANDA</option>
<option value=”UP”>UP</option>
<option value=”Goa”>GOA</option>
<option value=”Patna”>PATNA</option>
</select></td>

</tr>
<tr>
<td>State</td>
<td><select Name=”State”>
<option value=”-1” selected>select..</option>
<option value=”New Delhi”>NEW DELHI</option>
<option value=”Mumbai”>MUMBAI</option>
<option value=”Goa”>GOA</option>
<option value=”Bihar”>BIHAR</option>
</select></td>
</tr>
<tr>
<td>PinCode</td>
<td><input type=”text” name=”pincode” id=”pincode”
size=”30”></td>

</tr>
<tr>
<td>EmailId</td>
<td><input type=”text” name=”emailid” id=”emailid”
size=”30”></td>
</tr>

<tr>
<td>DOB</td>
<td><input type=”text” name=”dob” id=”dob”
size=”30”></td>
</tr>

<tr>
<td>MobileNo</td>
<td><input type=”text” name=”mobileno” id=”mobileno”
size=”30”></td>
</tr>
<tr>
<td><input type=”reset”></td>
<td colspan=”2”><input type=”submit” value=”Submit Form”
/></td>
</tr>
</table>
</form>
</body>
</html>

• Final output of the project:

8.0 Skill Developed:
1] Communication Skill
2] Leadership Skill
3] Motivation Skill
4] Team Work Skill
5] Scientific Approach
Development 6] Presentation Of
Collect Data
7] Data Collection
Skill. 8] Research
Skill.

Applications :
• In this project we have learn that how to create a code for
different purposes
• In this project we have code for student registration which gave
us more experience about our Subject
• Here we have used different Tags with many attributes with a
little bit more knowledge about Web page designing with HTML
• HTML Forms are required, when you want to collect some data
from the site visitor. For example, during user registration you
would like to collect information such as name, email address,
credit card, etc.
• A registration form is a list of fields that a user will input data
into and submit to a company or individual.