IMS ENGINEERING COLLEGE

LABORATORY MANUAL
Web Designing Lab
(BCS-353)

[Link] – II YEAR
(ODD SEM 2025-2026)

Name AADITYA RAJ

2401430100001
Roll No.

2CSE-1/ 2025-26/ B1
Section-Batch

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

IMS ENGINEERING COLLEGE

(Affiliated to Dr A P J Abdul Kalam Technical University, Lucknow )
Approved by AICTE - Accredited by NAAC – ‘A’ Grade
NH#24, Adhyatmik Nagar, Ghaziabad, UP, India
[Link]
 Vision and Mission of the Institute and Department

Vision of the Institute

To make IMSEC an Institution of Excellence for empowering students through technical education,
incorporating human values, and developing engineering acumen for innovations and leadership skills to
upgrade society.

Mission of the Institute

Mission 1: To promote academic excellence by continuous learning in core and emerging
Engineering domains using innovative teaching and learning methodologies.
Mission 2: To inculcate values and ethics among the learners.
Mission 3: To promote industry interactions and cultivate young minds for entrepreneurship.
Mission 4: To create a conducive learning ecosystem and research environment on a perpetual basis
to develop students as technology leaders and entrepreneurs who can address tomorrow’s
societal needs.

Vision of the Department

To provide globally competent professionals in the field of Computer Science & Engineering embedded
with sound technical knowledge, aptitude for research and innovation, and nurture future leaders with
ethical values to cater to the industrial & societal needs.

Mission of the Department

Mission 1: To provide quality education in both the theoretical and applied foundations of Computer
Science & Engineering.
Mission 2: Conduct research in Computer Science & Engineering resulting in innovations thereby
nurturing entrepreneurial thinking.
Mission 3: To inculcate team building skills and promote life-long learning with high societal and
ethical values.

2
DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

PROGRAMME EDUCATIONAL OBJECTIVES (PEOs)

B. Tech Computer Science & Engineering Department has the following Program Educational
Objectives:

PEO1: Possess core theoretical and practical knowledge in Computer Science and Engineering for
successful career development in industry, pursuing higher studies or entrepreneurship.
PEO2: Ability to imbibe lifelong learning for global challenges to impact society and environment.
PEO3: To demonstrate work productivity with leadership and managerial skills having ethics
and human value in progressive career path.
PEO4: To exhibit communication skill and collaborative skill plan and participate in
multidisciplinary fields of Computer Science & Engineering.

PROGRAMME SPECIFIC OUTCOME (PSOs)

[Link] Computer Science & Engineering Department has the following Program Specific
Outcomes:

PSO1: To analyze and demonstrate, the recent engineering practices, ethical values and
strategies in real time world problems to meet the challenges for the future.

PSO2: To develop adaptive computing system using computational intelligence strategies and
algorithmic design to address diverse challenges in data analysis and machine learning.

3
PROGRAM OUTCOMES
Engineering Graduates will be able to:

1. Engineering knowledge: Apply the knowledge of mathematics, science, engineering

fundamentals, and an engineering specialization to the solution of complex engineering
problems.
2. Problem analysis: Identify, formulate, review research literature, and analyze complex
engineering problems reaching substantiated conclusions using first principles of
mathematics, natural sciences, and engineering sciences.
3. Design/development of solutions: Design solutions for complex engineering problems and
design system components or processes that meet the specified needs with appropriate
consideration for the public health and safety, and the cultural, societal, andenvironmental
considerations.
4. Conduct investigations of complex problems: Use research-based knowledge and research
methods including design of experiments, analysis and interpretation of data, and synthesis
of the information to provide valid conclusions.
5. Modern tool usage: Create, select, and apply appropriate techniques, resources, and modern
engineering and IT tools including prediction and modelling to complex engineering
activities with an understanding of the limitations.
6. The engineer and society: Apply reasoning informed by the contextual knowledge to assess
societal, health, safety, legal and cultural issues and the consequent responsibilities relevant
to the professional engineering practice.
7. Environment and sustainability: Understand the impact of the professional engineering
solutions in societal and environmental contexts, and demonstrate the knowledge of, and
need for sustainable development.
8. Ethics: Apply ethical principles and commit to professional ethics and responsibilities and
norms of the engineering practice.
9. Individual and team work: Function effectively as an individual, and as a member or leader
in diverse teams, and in multidisciplinary settings.
10. Communication: Communicate effectively on complex engineering activities with the
engineering community and with society at large, such as, being able to comprehend and
write effective reports and design documentation, make effective presentations, and give
and receive clear instructions.
11. Project management and finance: Demonstrate knowledge and understanding of the
engineering and management principles and apply these to one’s own work, as a member
and leader in a team, to manage projects and in multidisciplinary environments.
12. Life-long learning: Recognize the need for, and have the preparation and ability to engage
in independent and life-long learning in the broadest context of technological change.

4
GENERAL LABORATORY INSTRUCTIONS

1. Students are advised to come to the laboratory at least 5 minutes before (to the starting time),
those who come after 5 minutes will not be allowed into the lab.

2. Plan your task properly much before to the commencement, come prepared to the lab with
the synopsis / program / experiment details.

[Link] should enter into the laboratory with:

 Laboratory observation notes with all the details (Problem statement, Aim, Algorithm,
Procedure, Program, Expected Output, etc.,) filled in for the lab session.

 Laboratory Record updated up to the last session experiments and other utensils (if
any) needed in the lab.

 Proper Dress code and Identity card.

4. Sign in the laboratory login register, write the TIME-IN, and occupy the computer system
allotted to you by the faculty.

5. Execute your task in the laboratory, and record the results / output in the lab observation
note book, and get certified by the concerned faculty.

6. All the students should be polite and cooperative with the laboratory staff, must maintain
the discipline and decency in the laboratory.

7. Computer labs are established with sophisticated and high end branded systems, which
should be utilized properly.

8. Students / Faculty must keep their mobile phones in SWITCHED OFF mode during the lab
sessions. Misuse of the equipment, misbehaviors with the staff and systems etc., will attract
severe punishment.

9. Students must take the permission of the faculty in case of any urgency to go out; if anybody
found loitering outside the lab / class without permission during working hours will be treated
seriously and punished appropriately.

10. Students should LOG OFF/ SHUT DOWN the computer system before he/she leaves the
lab after completing the task (experiment) in all aspects. He/she must ensure the system / seat
is kept properly.

4
 DETAILS OF THE EXPERIMENTS CONDUCTED
(TO BE USED BY THE STUDENTS IN THEIR RECORDS)

INDEX

S TITLE OF THE EXPERIMENT DATE OF FACULTY

No SUBMISSIO SIGNATURE
N

1 Design the following static web pages required for an online book store web site.
HOME PAGE:
The static home page must contain three frames.
Top frame: Logo and the college name and links to
Home page, Login page, Registration page,
Catalogue page and Cart page (the description of
these pages will be given below).
Left frame: At least four links for navigation, which will display the catalogue
of respective links.
For e.g.: When you click the link “CSE” the catalogue for CSE Books
should be displayed in the Right [Link] frame: The pages to the
links in the left frame must be loaded here. Initially this page contains
description of the web site.

Logo Web Site Name

Home Login Registration Catalogue Cart
CSE
ECE
Description of the
EEE Web Site
CIVIL

2 Logo Web Site Name

Home Login Registration Catalogue Cart

CSE Login Page

ECE User Name:

EEE Passwords:
Submit Reset
CIVIL
3 CATALOGUE PAGE:
The catalogue page should contain the details of all the books
available in the web site in a [Link] details should contain
the following:
1. Snap shot of Cover Page.
2. Author Name.
3. Publisher.
4. Price.
5. Add to cart button.
5
 Logo Web Site Name
Home Login Registration Catalogu Cart
e
Book : XML
CSE BibleAuthor :
Winston $ 40.5
Publication : Wiely
ECE

Book :AI
EEE
Author : $ 63
[Link]
CIVIL
Publication : Princeton
hall
Book : Java 2
Author : Watson $ 35.5
Publication : BPB
publications

Book : HTML in 24
hours Author : Sam $ 50
Peter Publication :
Sam publication
4 CART PAGE:
The cart page contains the details about the books which are added to the cart.
The cart page should look like this:
Logo Web Site Name
Home Login Registration Catalogue Cart
CSE Book name Price Quantity Amount
Java 2 $35.5 2 $70
ECE
XML bible $40.5 1 $40.5
EEE
Total amount -
CIVIL $130.5
5
REGISTRATION PAGE:
Create a “registration form “with the following fields
1) Name (Text field) 2) Password (password field)
3) E-mail id (text field)
4) Phone number (text field)
5) Sex (radio button)
6) Date of birth (3 select boxes)
7) Languages known (check boxes – English, Telugu, Hindi, Tamil)
8) Address (text area)

6 Js VALIDATION: Write JavaScript to validate the following fields of the above

registration page.
1. Name (Name should contains alphabets and the length should not be less
than 6 characters).
2. Password (Password should not be less than 6 characters length).

6
7 Js VALIDATION:
3. E-mail id (should not contain any invalid and must follow the standard
pattern (name@[Link])
4. Phone number (Phone number should contain 10 digits only).

8 CSS : Design a web page using CSS (Cascading Style Sheets) which includes the
following:
1. Use different font, styles:
In the style definition you define how each selector should work (font, color
etc.). Then, in the body of yourpages, you refer to these selectors to activate
the styles.
2. Set a background image for both the page and single elements on the page.

9 CSS :

1. Control the repetition of the image with the background-repeat property.

As background-repeat: repeat Tiles the image until the entire page is
filled, just like an ordinary backgroundimage in plain HTML.
2. Define styles for links as
A:link
A:visited
A:active
A:hover

1 Consider a small topic of your choice on which you can develop static web pages and
0 try to implement all topics of html,CSS, and Js within the topic
Choose any topic:
1. Your own portfolio
2. To –Do List
3. Survey Form
4. A Tribute Page
5. A Questionnaire

7
 STUDY AND EVALUATION SCHEME

Course Course
Teaching Scheme Credits Assigned
Code Name
Theory Practical Tutorial Theory Practical Tutorial Tota
BCS-353 l
00 00 00 01 00 01
(P) Web 02
Designing (50)

Workshop Marks)

8
 IMS Engineering College
NH-09, Adhyatmik Nagar, Near Dasna, Distt. Ghaziabad, U.P.
Tel: (0120) 4940000
Department of Computer Science and Engineering

Course Name: Web Designing Lab Course Code: BCS-353

Semester / Year: 3th /2rd NBA Code: C 221

Bloom’s
COURSE OUTCOMES
Level
C221.1 Describe the concepts of HTML and design static Web pages. K2,K6

C221.2 Explain the concepts of CSS and design Web pages. K2

C221.3 Identify the concept of HTML, CSS, and JavaScript framework for developing K1,K2
responsive, mobile-first websites
C221.4 Gain knowledge on client side scripting (Java Script) and develop a web page using K3
Js Validation.
C221.5 Develop and implement website using HTML, CSS, Java Script K6

CO-PO Mapping

Course PS
PO 1 PO2 PO3 PO4 PO5 PO6 PO7 PO8 PO9 PO10 PO11 PO12 PSO1
Outcome O2

C221.1 3 2 3 2 3 - - 1 2 1 2 3 3 3

C221.2 3 2 3 2 3 - - 1 2 1 2 3 3 3
C221.3 3 3 3 2 3 - - 1 2 1 2 3 3 3
C221.4 3 3 3 2 3 - - 1 2 1 2 3 3 3
C221.5 3 3 3 2 3 - - 1 2 1 2 3 3 3
C221 3 2.6 3 2 3 - - 1 2 1 2 3 3 3

9
 LIST OF PROGRAMS

Subject: Web Designing Workshop Code: BCS-353

List of Experiments
[Link] List of Experiments(Indicative and not limited to ) MAPPING
WITH CO
1 Design the following static web pages required for an online book store web site.
HOME PAGE:
The static home page must contain three frames.
Top frame: Logo and the college name and links to Home page, Login
page, Registration page,Catalogue page and Cart page (the description
of these pages will be given below).
Left frame: At least four links for navigation, which will display the catalogue of respective links.
For e.g.: When you click the link “CSE” the catalogue for CSE Books should be displayed
in the Right [Link] frame: The pages to the links in the left frame must be loaded here.
Initially this page contains description of the web site. C221.1

Logo Web Site Name

Home Login Registration Catalogue Cart
CSE
ECE
Description of the
EEE Web Site
CIVIL

2 Logo Web Site Name

Home Login Registration Catalogue Cart
CSE Login Page
C221.1
ECE User Name:

EEE Passwords:
Submit Reset
CIVIL
3 CATALOGUE PAGE:
The catalogue page should contain the details of all the books available in the
web site in a [Link] details should contain the following:
1. Snap shot of Cover Page.
2. Author Name.
3. Publisher. C221.1
4. Price.
5. Add to cart button.

10
 Logo Web Site Name
Home Login Registration Catalogue Cart
Book : XML Bible
CSE Author : Winston
Publication : Wiely $ 40.5
ECE

Book : AI
EEE
Author : [Link] $ 63
Publication : Princeton hall
CIVIL

Book : Java 2
Author : Watson $ 35.5
Publication : BPB publications

Book : HTML in 24 hours

Author : Sam Peter $ 50
Publication : Sam publication

4 CART PAGE:
The cart page contains the details about the books which are added to the [Link] cart page
should look like this:
Logo Web Site Name
Home Login Registration Catalogue Cart
CSE Quantity Amount C221.1
ECE Java 2 $35.5 2 $70
EEE XML bible $40.5 1 $40.5
CIVIL Total amount - $130.5
5
REGISTRATION PAGE:
Create a “registration form “with the following fields
1. Name (Text field) 2) Password (password field)
2. E-mail id (text field)
3. Phone number (text field)
4. Sex (radio button)
5. Date of birth (3 select boxes) C221.1
6. Languages known (check boxes – English, Telugu, Hindi, Tamil)
7. Address (text area)

6 Js VALIDATION: Write JavaScript to validate the following fields of the above registration page.
1. Name (Name should contains alphabets and the length should not be less than 6
characters). C221.3
2. Password (Password should not be less than 6 characters length).

11
7 Js VALIDATION:
3. E-mail id (should not contain any invalid and must follow the standard pattern
(name@[Link]) C221.4
4. Phone number (Phone number should contain 10 digits only).

8 CSS : Design a web page using CSS (Cascading Style Sheets) which includes the following:
1. Use different font, styles:
In the style definition you define how each selector should work (font, color etc.). Then, in the C221.2
body of yourpages, you refer to these selectors to activate the styles.
2. Set a background image for both the page and single elements on the page.

9 CSS :

1. Control the repetition of the image with the background-repeat property.

As background-repeat: repeat Tiles the image until the entire page is filled, just like an
ordinary background image in plain HTML.
2. Define styles for links as
C221.2
A:link
A:visited
A:active
A:hover

10 Consider a small topic of your choice on which you can develop static web pages and try to implement all
topics of html, CSS, and Js within the topic
Choose any topic:
1. Your own portfolio C221.5
2. To –Do List
3. Survey Form
4. A Tribute Page
5. A Questionnaire

12
 EXPERIMENT NO. - 1

Design the following static web pages required for an online book store website.

Design the following static web pages required for an online book store web site.
HOME PAGE:
The static home page must contain three frames.
Top frame: Logo and the college name and links to Home page, Login page, Registration
page,Catalogue page and Cart page (the description of these pages will be given below).
Left frame: At least four links for navigation, which will display the catalogue of respective links.
For e.g.: When you click the link “CSE” the catalogue for CSE Books should be displayed in the Right frame.
Right frame: The pages to the links in the left frame must be loaded here. Initially this page contains
description of the web site.

Logo Web Site Name

Home Login Registration Catalogue Cart
CSE
ECE
Description of the
EEE Web Site
CIVIL

home. html
<html>
<head>
<title>IMS ENGINEERING COLLEGE</title>
</head>
<frameset cols="25%,75%">
<frameset rows="25%,10%,65%">
<frame name ="f11" src="D:\User\2025-26\WD LAB\user\[Link]" >
<frame name ="f21" src=" D:\User\2025-26\WD LAB\user\[Link]">
<frame name ="f31 "src=" D:\User\2025-26\WD LAB\user\[Link]">
</frameset>

<frameset rows="25%,10%,65%">

<frame name ="f12"src=" D:\User\2025-26\WD LAB\user\[Link]">

<frameset cols="18%,18%,18%,18%">
<frame name ="f22" src=" D:\User\2025-26\WD LAB\user\[Link]">
<frame name ="f23" src=" D:\User\2025-26\WD LAB\user\[Link]">
<frame name ="f24" src=" D:\User\2025-26\WD LAB\user\[Link]">
<frame name = "f25" src=" D:\User\2025-26\WD LAB\user\[Link]" >
 </frameset>
<frame name = "f32" src=" D:\User\2025-26\WD LAB\user\[Link]">
</frameset>
</frameset>
</html>
[Link]
<html>
<head>
<title>LOGO</title>
</head>
<body bgcolor="#ffcc00">
<img src="D:\User\2025-26\WD LAB\user\[Link]" height="100%" width=100%>
</body>
</html>
[Link]
<html>
<head>
<title>HOME1</title>
</head>
<body bgcolor="#ffcc99">
<a href="[Link]"> HOME </a>
</body>
</html>
[Link]
<html>
<head>
<title>home1</title>
</head>
<ul type="none">
<li ><a href="[Link]" target="f32">CSE </a><br><br>
<li ><a href="[Link]" target="f32" >ECE </a><br><br>
<li ><a href="[Link]" target="f32" >EEE </a><br><br>
<li ><a href="[Link]" target="f32" ">CIVIL </a>
</ul>
</html>

2
[Link]

<html>
<head>
<title>home1</title>
</head>
<body bgcolor="#ffcc66">
<div align="Center"> IMS Engineering College,Ghaziabad </div>
</body>
</html>

[Link]
<html>
<head>
<title>home1</title>
</head>
<body bgcolor="#ffcc99">

<a href="[Link]" target="f32">Login </a>

</body>

</html>

registration .html

<html>
<head>
<title>home1</title>
</head>
<body bgcolor="#ffcc99">
<a href="[Link]" target="f32">Registration </a>

</body>
</html>
[Link]

<html>
<head>
<title>home1</title>
</head>
<body bgcolor="#ffcc99">

<a href="[Link]" target="f32">Catalogue</a>

</body>
</html>

3
[Link]

<html>
<head>
<title>home1</title>
</head>
<body bgcolor="#ffcc99">
<a href="[Link]" target="f32">Cart </a>

</body>
</html>

[Link]
<html>
<head>
<title>home1</title>
</head>
<body>
<h1><div align = "Center">Department of Computer Science & Engineering </div> </h1>
<p align="justify">

The Department of Computer Science & Engineering, established in the year 2002 with current intake
of 240 students, imparts quality education and believes in creating new opportunities for students to
meet the challenges of Technological development in Computer Science & Engineering. The B. Tech.
(CSE) program is affiliated with Dr. APJ Abdul Kalam Technical University, Lucknow, and is
approved by AICTE, New Delhi.

The Department has qualified faculty members, infrastructure, and state-of-the-art equipment which
help in providing an excellent environment for teaching and learning. The department is actively
involved in Industrial Training, Project Development and other professional activities. Department
of Computer Science and Engineering has4 signed various MOUs with highly recognized
organizations to provide live projects and Internship opportunities to our Engineering Students.
Industrial visits, Workshops, Seminars, Conferences, and Mini Projects for students are also
conducted regularly to encourage students. The major employers of our students are well-renowned
Indian conglomerates like TCS, Infosys, Wipro, HCL, and other multinational companies including
IBM, Accenture & HP.
</p>
</body>
</html>

[Link]
<html>
<head>
<title>home1</title>
</head>
<body>

<h1><div align = "Center">Department of Electronics and Communication Engineering </div>

</h1>
<p align="justify">

Electronics and Communications Engineering (ECE) involves researching, designing, developing

and testing of electronic equipment used in various systems. Electronics and Communications
engineers also conceptualize and oversee the manufacturing of communications and broadcast
systems. This stream of engineering deals with analog transmission, basic electronics,
microprocessors, solid state devices, digital & analog communication, analog integrated circuits,
microwave engineering, satellite communication, antenna and wave propagation. It also deals with
the manufacturing of electronic devices, circuits, and communications equipment. This branch of
engineering also plays a vital role ensuring fastest means of communication across the world.

</body>
</html>

[Link]

<html>
<head>
<title>home1</title>
</head>
<body>
<h1><div align = "Center">Department of Electrical and Electronics Engineering </div> </h1>
<p align="justify">
The Department of Electrical and Electronics Engineering was established in year 2004 with aim to
prepare students for a successful professional career in respective field. Historically, the field of
Electrical & Electronics Engineering is one of the most versatile and has broad applications in
multidisciplinary sectors. The Department has focused towards integrating academics with cutting
edge technologies in modern world.

</body>
</html>

5
[Link]

<html>
<head>
<title>home1</title>
</head>
<body>

<h1><div align = "Center">Department of Civil Engineering </div> </h1>

<p align="justify">

Civil engineering is the professional practice of designing and developing infrastructure projects.
This can be on a huge scale, such as the development of nationwide transport systems or water supply
networks, or on a smaller scale, such as the development of individual roads or buildings.
</p>
</body>
</html

6
 EXPERIMENT-2

2 LOGIN PAGE: Login page must contain Login field, Password field, Submit

and reset buttons.

Logo Web Site Name

Home Login Registration Catalogue Cart

CSE Login Page

ECE User Name:

EEE Password Passwords:

Submit Reset
CIVIL

[Link]

<html>
<head>
<title>home1</title>
</head>
<body>
<form name="login">
<Center>
<h3> <u> Login Page </u> </h3>
username: <input type="text" name="uname" ><br>
password: <input type="password" name="pwd" ><br>
<input type="submit" value="Submit" >
<input type="reset" value="reset">
</center>
</form>
</body>
</html>

OUTPUT:

7
8
 EXPERTMENT-3
CATALOGUE PAGE:
The catalogue page should contain the details of all the books available in the web site in a [Link]
details should contain the following:
1. Snap shot of Cover Page.
2. Author Name.
3. Publisher.
4. Price.
5. Add to cart button.

Logo Web Site Name

Home Login Registration Catalogue Cart
Book : XML Bible
CSE Author : Winston
Publication : Wiely $ 40.5
ECE

Book : AI
EEE
Author : [Link] $ 63
CIVIL Publication : Princeton hall

Book : Java 2
Author : Watson $ 35.5
Publication : BPB publications

Book : HTML in 24 hours

Author : Sam Peter $ 50
Publication : Sam publication

[Link]
<html>
<head>
<title>catalouge</title>
</head>
<body>
<center>
<table border=2 cellpadding=10 cellspacing=10>
<tr>
9
<td> <img src="D:\WDLab\[Link]" height=100 width=100></td>
<td>Book:XML Bible<br> Author:Wingston<br> Publication:wiely</td>
<td>$40.5</td>
<td><input type="button"value="add to cart"></td>
</tr>
<tr>
<td> <img src ="D:\WDLab\[Link]" height=100 width=100></td>
<td>Book:A1<br> Author:[Link]<br> Publication:Princeton hall</td>
<td>$63</td>
<td><input type="button"value="add to cart"></td>
</tr>
<tr>
<td> <img src="D:\WDLab\[Link]" height=100 width=100></td>
<td>Book:JAVA 2<br> Author:Watson<br> Publication:BPB</td>
<td>$35.5</td>
<td><input type="button"value="add to cart"></td>
</tr>
<tr>
<td> <img src="D:\WDLab\[Link]" height=100 width=100></td>
<td>Book:Html in 24 hrs<br> Author:Sam Peter<br> Publication:SAM</td>
<td>$50</td>
<td><input type="button"value="add to cart"></td>
</tr>
</table>
</center>
</body>
</html>

10
11
 EXPERIMENT NO. – 4

CART PAGE:
The cart page contains the details about the books which are added to the [Link] cart page should look like this:
Logo Web Site Name
Home Login Registration Catalogue Cart
CSE Quantity Amount
ECE Java 2 $35.5 2 $70
EEE XML bible $40.5 1 $40.5
CIVIL Total amount - $130.5

<html>
<body >
<table cellspacing="50" cellpadding="20">
<tr> <td>Book name</td>
<td>price</td>

<td>quantity</td>
<td>amount</td>
</tr>
<tr>
<td>java2</td>
<td>$35.5</td>
<td>2</td>
<td>$70</td>
</tr>
<tr>
<td>XML bible</td>
<td>$40.5</td>
<td>1</td>
<td>$40.5</td>
</tr>
<tr>
<td></td> <td>
</td>
<td>Total amount </td>
<td>130.5 </td>
</tr>
</body>
</html>

12
13
 EXPERIMENT-5

REGISTRATION PAGE:
1. Create a “registration form “with the following fields
2. Name (Text field) 2) Password (password field)
3. E-mail id (text field)
4. Phone number (text field)
5. Sex (radio button)
6. Date of birth (3 select boxes)
7. Languages known (check boxes – English, Telugu, Hindi, Tamil)
8. Address (text area)

<html>
<head>
<title>Registration Page</title>
</head>
<body>
<center>
<h3 align="center"><u>REGISTRATION PAGE</u></h3>
<table border="3">
<tr><td>
<form name="f1" action="" method="post" onsubmit="">
<table cellspacing="10" cellpadding="5">
<tr><td>NAME</td><td><input type="text" size="30" name="uname"/></td></tr>
<tr><td>PASSWORD</td><td><input type="password" size="30" name="pass"/></td></tr>
<tr><td>E-MAIL ID</td><td><input type="text" size="30" name="email"/></td></tr>
<tr><td> PHONE NUMBER</td><td><input type="text" size="15" name="phone"/></td></tr>
<tr><td>GENDER</td><td><input type="radio" name="gen" value="m" />MALE
<input type="radio" name="gen" value="f" />FEMALE </td></tr>
<tr><td>DATE OF BIRTH</td>
<td><select name="day">
<option value="day">DAY</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
14
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="month">
<option value="month">MONTH</option>
<option value="jan">JANUARY</option>
<option value="feb">FEBRUARY</option>
<option value="mar">MARCH</option>
<option value="apr">APRIL</option>
<option value="may">MAY</option>
<option value="jun">JUNE</option>
<option value="jul">JULY</option>
<option value="aug">AUGUST</option>
<option value="sep">SEPTEMBER</option>
<option value="oct">OCTOBER</option>
<option value="nov">NOVEMBER</option>
<option value="dec">DECEMBER</option>
</select>
<select name="year">
<option value="year">YEAR</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
15
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">1980</option>
<option value="2012">1981</option>
<option value="2013">1982</option>
<option value="2014">1983</option>
</select></td></tr>
<tr><td>LANGUAGES KNOWN</td>
<td>
<input type="checkbox" value="eng" name="lang" />ENGLISH
<input type="checkbox" value="tel" name="lang" />TELUGU
<input type="checkbox" value="hin" name="lang" />HINDI
<input type="checkbox" value="tam" name="lang" />TAMIL
</td></tr>
<tr>
<td>ADDRESS</td>
<td><textarea name="addr" cols="25" rows="5"></textarea></td></tr>
<tr><td colspan="2" align="center"><input type="submit" value="SUBMIT"/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="RESET" /></td>
</tr>
</table>
</form>
</td></tr></table>
</center>
</body>
</html>

16
17
 EXPERIMENT-6

Js VALIDATION: Write JavaScript to validate the following fields of the above registration page.
5. Name (Name should contains alphabets and the length should not be less than 6 characters).
6. Password (Password should not be less than 6 characters length).

<html>
<head>
<title>validating a textbox</title>
<script language="javascript">
function button_click()
{ var fname=[Link]; var spchar = "!@#$%^&*()+=-[]\\\';,./{}|\":<>?~";
var number="0123456789";
if([Link]<6)
{
23
alert("first name atleast 6 characters");
}
if(fname!="")
{
for (var i=0;i<[Link];i++)
{
if([Link]([Link](i)) != -1)
{ alert ("Userid should not have special characters");
[Link]=" "; return false;
}
}
}
if(fname!="")
{
for (var i=0;i<[Link];i++)
{
if([Link]([Link](i)) != -1)
{
alert ("Userid should not have numbers");
[Link]=""; return false; }
}
if([Link]>=6)
alert("valid username");
}
}
</script>
<body>
<center>
<form name="f">
<table>
<h2 align="center">USER NAME VALIDATION</h2>
<tr> <td align="right">USERNAME:</td>
<td><input type="text" name="fname" maxlength=20 size=30></td>
</tr> <br>
<tr>
18
<td></td>
<td><input type="button" value="SUBMIT" onClick="button_click()">
</td>
</tr>
</form>
</table>
</center>
</body>
</html>

19
Password Validation

<html>
<head>
<title>PASSWORD VALIDATION</title>
<script language="javascript">
function pass()
{
var pw=[Link];
var cpw=[Link];
if([Link]<6)
{
alert("PASSWORD MUST BE 6 CHARACTERS"); } if(pw!=cpw
)
{
alert("PASSWORD DON'T MATCH");
}
else if([Link]>=6)
alert("PASSWORD VALIDATION SUCCESS");
}
</script>
</head>
<body>
<form name="f">
<table align="center">
<h2 align="center">PASSWORD VALIDATION</h2>
<br>
<tr>
20
<td align="right">PassWord:</td>
<td align="left"><input type="PassWord" maxlength="10" size="30"name="pw"></td>
</tr>
<tr>
<td align="right">Confirm PassWord:</td>
<td align="left"><input type="PassWord" maxlength="10" size="30"name="cpw"></td>
</tr>
<tr> <td></td>
<td><input type="button" value="SUBMIT" onClick="pass()"/></td>
</tr>
</table>
</form>
</body>
</html>

21
22