Scribd
Upload
34 views32 pages

WEBlab

Uploaded by

priyanshi.sharmabtechcs22
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
34 views32 pages

WEBlab

Uploaded by

priyanshi.sharmabtechcs22
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 32

1.

Time table using HTML CSS (use all attributes of tables)

<!DOCTYPE html>
<html>
<head>
<title>
TABLE TAG HTML
</title>
</head>
<body>
<style>
table{
width: 100%;
border-collapse: collapse;
}
th,td{
border: 1px solid black;
padding: 10px;
text-align: center;
}
</style>

</body>
<h1>TIME TABLE[Sec-C (CSE and IOT)]</h1>
<table>
<tr>
<th rowspan="2">TIME / DAY</th>
<th>9:30-9:40</th>
<th>9:40-10:30</th>
<th>10:30-11:20</th>
<th>11:20:12:10</th>
<th>12:10-1:00</th>
<th>1:00-1:40</th>
<th>1:40-2:30</th>
<th>2:30-3:30</th>
</tr>
<tr>
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th rowspan="7">LUNCH</th>
<th>5</th>
<th>6</th>
</tr>
<tr>
<th>MON</th>
<th rowspan="6">PRAYER</th>
<td>WT</td>
<td>ML/AI</td>
<td colspan="2">Value Added</td>
<td>DA/IoTAP</td>
<td>COI</td>
</tr>
<tr>
<th>TUE</th>
<td>DAA</td>
<td>DBMS</td>
<td>DA/IoTAP</td>
<td>ML/AI</td>
<td>ML/AI</td>
<td>DBMS</td>
</tr>
<tr>
<th>WED</th>
<td>COI</td>
<td>DAA</td>
<td colspan="2">Value Added</td>
<td>DA/IoTAP</td>
<td>DBMS LAB</td>
</tr>
<tr>
<th>THUS</th>
<td>WT</td>
<td>DAA</td>
<td colspan="2">Value Added</td>
<td>WT LAB</td>
<td>DBMS</td>
</tr>
<tr>
<th>FRI</th>
<td>ML/AI</td>
<td>DBMS</td>
<td>DAA</td>
<td>DA/IoTAP</td>
<td>WT</td>
<td>DAA LAB</td>
</tr>
<tr>
<th>SAT</th>
<td>DAA</td>
<td>COI</td>
<td colspan="2">EEP</td>
<td colspan="2">Internship</td>
</tr>
</table>
</html>
2. Make CV using HTML CSS

<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet"
href="https://www.dropbox.com/s/trsldt0me90jzs8/resume.css"/>
<title></title>
</head>
style>
table{
width: 100%;
border-collapse: collapse;
}
th,td{
border: 1px solid black;
padding: 10px;
text-align: center;
}
</style>
<body>
<div id="header">
<p id="name">Priyanshi Sharma</p>
<a href="mailto:[email protected]" target="_blank"><p
id="email">[email protected]</p></a>
<p id="contact">+91 75036 10708</p>
</div>
<div class="left">
</div>
<div class="right">
<h3>CV Highlights</h3>
<p>
<ul>
<li>Currently grasping my concepts on Cloud Computing and practicing
Application DEvelopment</li>
<li>Learnt basic Python,Java,C, JavaScript, HTML, CSS on
Freecodecoursecamp.com.</li>
<li>An independent, dedicated, efficient person. These attributes are
proved through the series of courses I have taken or I am taking as of now
independently through online platforms.</li>
<li>Good Communication Skills, Presentation Skills, attitude towards
leadership, authorisation and delegation, conflict resolution and negotiation and a
very good team worker.</li></ul>
</p>
<h3>Educational Qualifications</h3>
<table >
<tr id="heading">
<td>Qualification</td>
<td>Board</td>
<td>Percentage / Grades</td>
<td>Year</td>
</tr>
<tr>
<td>10</td>
<td>CBSE</td>
<td>95.4%</td>
<td>2020</td>
</tr>
<tr>
<td>12</td>
<td>CBSE</td>
<td>80.4%</td>
<td>2022</td>
</tr>
<tr>
<td>B.Tech</td>
<td>AKTU</td>
<td>85.4%</td>
<td>2024</td>
</tr>
</table>
<h3>Independent Courses</h3>
<p>
<ul>
<li>
<span id="course-name">HTML & CSS for Beginners – Web
Fundamentals</span> – Codecademy.com</li>
<li>
<span id="course-name">Python – Fundamentals and Dynamic
Programming </span> - Codecademy.com</li>
<li>
<span id="course-name">JavaScript – Programming Basics, JS Apps and
Build Games </span> - Codecademy.com</li>
<li>
<span id="course-name">Java – Basic of Java</span> –
Codecademy.com</li>
<li>
<span id="course-name">C – Fundamentals of C </span> -
Codecademy.com</li>

</ul>
<h3>Technical Skills</h3>
<p>
<ul>
<li>
<span id="course-name">Problem
Solving:</span>HackerRank,Codechef</li>
<li>
<span id="course-name">Frontened and Backened:</span> Game
development,Split website</li>
<li>
<span id="course-name">Programming Skills:</span>HTML, CSS, Python,
JavaScript,Java, learning C and C++</li></ul>
</p>
<h3>Certifications / Awards:</h3>
<p>
<ul>
<li>Scored 1st Prize – Debate Competition – Intra College Competition ,
SMS LKO.</li>
<li>Scored 3rd Prize – Speech Competition – Inter College Competition , SFS
LKO.</li>
<li>Scored 3rd Prize – Elocution – Inter College Competition ,
PowerGrid.</li>
<li>C Certification – IIT Bombay.</li>
<li>Java Certification – IIT Bombay</li>
<li>Python Certification – Codsoft</li>
</ul>
</p>
<h3>Personal Information:</h3>
<p>
<ul>
<li>
A young, determined hard and smart working person. I believe in task based
roles and complete ownership of work.
<li>
<span id="course-name">Languages Known:</span>English and Hindi</li>
<li>
<span id="course-name">Hobbies:</span>I love reading History, Fictious,
Thrilled and IT related books / magazines,swimming, listening music, surfing
Internet, self-learning through e-courses.</li> </ul>
</p>
<h3>Other Information</h3>
<p>
<ul>
<li>
<span id="course-name">Expected Salary:</span>As per company
standards</li>
<li>
<span id="course-name">Area of Interest:</span>Software Development,
Programming, Start-ups, Coding, App Development, Technical Support, Support
Engineer, Customer Happiness, Client service, Investment Banking, Corporate
Finance, Hedge Funds, Mergers & Acquisitions, Analyst, Equity Research, Business
Analysis</li>
<li>
<span id="course-name">Joining Date:</span>Immediate</li></ul>
</p>
<h3>Declaration</h3>
<p>
I hereby declare that the details furnished above are true and correct to the
best of my knowledge and belief.</p>
</div>
<div id="footer"></div>
</body>
</html>
3. Portfolio

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header">
<div class="container">
<nav>
<image src= class="logo">
<ul>
<li><a href="#header">Home</a></li>
<li><a href="#about">About Me</a></li>
<li><a href="#portfolio">My Projects</a></li>
<li><a href="Skills.html">Skills</a></li>
<li><a href="hobbies.html">Hobbies</a></li>
<li><a href="contact.html">Contact</a></li>
</nav>
<div id="mainpage">
<div class="container">
<div class="row">
<div class="about-col-3">
<img src="C:\Users\Priyanshi Sharma\OneDrive\Desktop\chat\[CB] Data Structures
in Real Life\portfolio\port.jpg">
</div>
<div class="header-text">
<p>Developer</p>
<h1>Hi , I'm <br><span>Priyanshi </span>Sharma<br>From <br>Lucknow</h1>
</div>
</div>
</div>
<!---------------about section----------------->
<div id="about">
<div class="container">
<div class="row">
<div class="about-col-1">
<img src="C:\Users\Priyanshi Sharma\OneDrive\Desktop\chat\[CB] Data Structures
in Real Life\portfolio\download.jpg">
</div>
<div class="about-col-2">
<h1 class="sub-title">About Me</h1>
<p>Welcome to my portfolio! I am developer with a focus on web development,
Python, Java.
I enjoy building projects and learning along the way. Let's collaborate
and create something great together!</p>
<div class="tab-titles">
<p class="tab-links active-link" onclick="opentab('Skills')">Skills</p>
<p class="tab-links"
onclick="opentab('Certification')">Certification</p>
<p class="tab-links" onclick="opentab('Education')">Education</p> </div>
<div class="tab-contents active-tab" id="Skills">
<ul>
<li><span>Front-End Developer</span><br>Designing Interactive
Webpages</li>

<li><span>Python</span></li>
<li><span>SQL</span></li>
<li><span>JAVA</span></li>
<li><span>C</span></li>
<li><span>CSS</span></li>
<li><span>HTML</span></li>
<li><span>JavaScript</span></li>
</ul>
</div>
<div class="tab-contents" id="Certification">
<ul>
<li><span>DBMS</span><br>From Udemy</li>
<li><span>Python</span><br>From Udemy</li>
<li><span>JAVA</span><br>From IIT BOMBAY</li>
<li><span>SQL</span><br>From Udemy</li>
<li><span>C</span><br>From IIT BOMBAY</li>

</ul>
</div>
<div class="tab-contents" id="Education">
<ul>
<li><span>2024-Current</span><br> 3 Year of B.Tech CSE</li>
<li><span>10<sup><th></th></sup> Board CBSE
</span><br>M.G Convent School</li>
<li><span>12<sup>th</sup>Board CBSE</span><br>M.G Convent School</li>
</ul>
</div>
</div>
</div>
<div id="portfolio">
<div class="container">
<h1 class="sub-title">My Projects</h1>
<div class="work-lists">
<div class="work">
<img src="C:\Users\Priyanshi Sharma\OneDrive\Pictures\port.jpg">
<div class="layer">
<h3>Gladiator's Verse Game</h3>
<p>Introducing ,The Gladiators' Verse project presents the development of an
arcade-style fighting game using web technologies,<br> specifically HTML, CSS, and
JavaScript. The goal of the Gladiators' Verse game is to provide an engaging and
interactive experience, reminiscent of classic 2D arcade fighting games, <br>within a
modern web browser. The core mechanics of the game include player controls for
character movement, attacks, and special moves,<br> with the objective of defeating
an opponent through a series of combat rounds. </p> </div>
</div>
</div>
<div class="copyright">
<p>Copyright © Priyanshi Sharma</p>
</div>
<script> var tablinks = document.getElementsByClassName("tab-links"); var
tabcontents = document.getElementsByClassName("tab-contents"); function
opentab(tabname){
for(tablink of tablinks){
tablink.classList.remove("active-link");
}
for(tabcontent of tabcontents){
tabcontent.classList.remove("active-tab");
}
event.currentTarget.classList.add("active-link");
document.getElementById(tabname).classList.add("active-tab");
}
</script>
</body>
</html>

Contact.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/67b734c79e.js"
crossorigin="anonymous"></script>
</head>
<body>
<nav>
<image src="C:\Users\Priyanshi Sharma\OneDrive\Desktop\chat\[CB] Data
Structures in Real Life\portfolio\soft.jpg" class="logo">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html">About Me</a></li>
<li><a href="skills.html">Skills</a></li>
<li><a href="hobbies.html">Hobbies</a></li>
<li><a href="#contact">Contact</a></li>
</nav>
<div id="contact">
<div class="container">
<div class="row">
<div class="contact-left">
<h1 class="sub-title">Contact Me</h1>
<p><i class="fa-regular faenvelope"></i>[email protected]</p><br>
<p><i class="fa-solid fa-phone-volume"></i>+91- 9936387103</p>
<div class="social-icons">
<a href=""><i class="fa-brands fa-square-x-twitter"></i></a>
<a href=""><i class="fa-brands fa-square-instagram"></i></a>
<a href="https://www.linkedin.com/in/codecraft-cse-priyanshi/"><i class="fabrands
fa-linkedin"></i></a>
</div>
<div class="contact-right">
<form>
<input type="text" name="Name" placeholder="Your Name" required>
<input type="email" name="Email" placeholder="Your Email" required>
<textarea name="Message" rows="6" placeholder="Your
Message..."></textarea>
<button type="submit" class="btn btn2">Submit</button>
</form>
</div>
</div>
</div>
<div class="copyright">
<p>Copyright © Priyanshi Sharma</p>
</div>
</div>
</body> </html>
Hobbies.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<image src="C:\Users\Priyanshi Sharma\OneDrive\Desktop\chat\[CB] Data
Structures in Real Life\portfolio\hobby.jpg" class="logo">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html">About Me</a></li>
<li><a href="Skills.html">Skills</a></li>
<li><a href="#hobbies">Hobbies</a></li>
<li><a href="contact.html">Contact</a></li>
</nav>
<div id="portfolio">
<div class="container">
<h1 class="sub-title">My Hobbies</h1>
<div class="hobbies-lists">
<div>
<h2>Online Courses and Certifications</h2>
<p>"Pursuing online courses and certifications in programming languages,
frameworks, or technologies demonstrates your commitment to skill development
and staying updated with
industry trends."</p>
</div>
<div>
<h2>Learning New Skills</h2>
<p>"Eager to continuously expand my skill set, I embrace the journey of learning new
skills. Whether mastering programming languages, delving into design principles, or
exploring emerging technologies,
I thrive on the challenge of growth and the excitement of mastering new
domains."</p>
</div>
<div>
<h2>Listening Music</h2>
<p>"Immersing myself in the melodies and rhythms of music, I find solace and
inspiration in every note. From classical symphonies to modern beats, I cherish the
diversity of genres and the emotional journey each song evokes, making
listening to music a cherished hobby."</p>
</div>
<div><h2>Reading Books</h2>
<p>"Dedicating time to read fictious, engaging and thrilled story content, I immerse
myself in the world of learning and gaining experiences.
I find motivation and inspiration to lead a balanced lifestyle, making reading an
enjoyable and enriching hobby."</p>
</div>
</div>
</div>
<div class="copyright">
<p>Copyright © Priyanshi Sharma</p>
</div>
</div>
</body> </html>

Skills.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Skills</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/67b734c79e.js"
crossorigin="anonymous"></script>
</head>
<body>
<div id="header">
<div class="container">
<nav>
<image src="C:\Users\Priyanshi Sharma\OneDrive\Desktop\chat\[CB] Data
Structures in Real Life\portfolio\skill.jpg" class="logo">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html">About Me</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="hobbies.html">Hobbies</a></li>
<li><a href="contact.html">Contact</a></li>
</nav>
<!--------------skills section------------->
<div id="services">
<div class="container">
<h1 class="sub-title">My Skills</h1>
<div class="services-list">
<div>
<i class="fa-solid fa-code"></i>
<h2>Web Designing</h2>
<p>Crafting captivating websites tailored to your brand. From sleek designs to
seamless user experience,
I specialize in creating eye-catching web solutions that elevate your online presence.
Let's bring your vision to life.</p>
<a href="#">learn more</a>
</div>
<div>
<i class="fa-brands fa-python"></i>
<h2>Python</h2>
<p>Offering C/C++ development services for efficient, robust, and scalable software
solutions.Let's build together.</p>
<a href="#">learn more</a>
</div>
<div>
<i class="fa-brands fa-java"></i>
<h2>Java</h2>
<p>Offering Python development solutions tailored to your needs.Efficient,reliable,
and scalable programming expertise.</p>
<a href="#">learn more</a></div>
</div>
</div>
</div>
<div class="copyright">
<p>Copyright © Priyanshi Sharma</p>
</div>
</div>
</body> </html>

Style.css

+*{ margin:0; padding:0; font-


family: 'poppins', sans-serif;
box-sizing: border-box;
}
html{
scroll-behavior: smooth;
}
body{
background:#080808;
color: white;
}
#header{ width: 100%;
height: 100vh;
background-size:cover;
background-position:center;
}
.container{ padding:
10px 10%;
}
nav{
display:flex;
align-items:center; justify-
content: space-between;
flex-wrap: wrap;
}
.logo{ width: 230px;
border-radius: 55px;
padding: 30px;
}
nav ul li{ display:
inline-block; list-
style: none;
margin: 10px 20px;
}
nav ul li a{
color: rgb(255, 255, 255); text-
decoration: none; font-size:
18px;
position: relative;
}
nav ul li
a::after{ content: '';
width: 0%; height:
3px; background:
#ff004f; position:
absolute; left: 0;
bottom: -6px;
transition: 0.5s;
}
nav ul li a:hover::after{
width: 100%;
}
.header-text{ margin-
top: 20%;
font-size: 30px;
}
.header-text
h1{ font-size:
60px; margin-top:
20px;
}
.header-text h1 span{
color: #ff004f;
}
#about{ padding:
80px 0;
color:#ababab;
}
.row{ display:flex; justify-content:
space-between;
flex-wrap: wrap;
}
.about-col-1{ flex-
basis: 35%;
}
.about-col-1
img{ width: 100%;
border-radius: 15px;
}
.about-col-2{ flex-
basis: 60%;
}
.about-col-3{ flex-
basis: 35%;
}
.about-col-3
img{ width: 100%;
border-radius: 15px;
float: left;
margin-top: 50px;
}
.sub-title{ font-size:
60px; font-
weight: 600;
color: #fff;
}
.tab-
titles{ display:
flex;
margin: 20px 0 40px;
}
.tab-links{ margin-
right:50px; font-size:
18px; font-weight: 500;
cursor: pointer;
position: relative;
}
.tab-
links::after{ content:
''; width: 0; height:
3px; background:
#ff004f; position:
absolute;
left: 0;
bottom: -8px;
transition: 0.5s;
}
.tab-links.active-
link::after{ width: 50%;
}
.tab-contents ul li{ list-
style: none;
margin: 10px 0;
}
.tab-contents ul li
span{ color: hsl(341, 44%,
49%);
font-size: 14px;
}
.tab-contents{
display:none;
}
.tab-contents.active-
tab{ display: block;
}
/* ----------css on services section-------- */
#services{ padding
: 30px 0;
}
.services-
list{ display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-
gap: 40px;
margin-top: 50px;
}
.work-
lists{ display:
grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-
gap: 40px;
margin-top: 50px;
}
.work{ border-radius:
10px; position:
relative;
overflow: hidden;
}
.work img{ width: 100%;
border-radius: 10px;
display: block; transition:
transform 0.5s;
}
.layer{
width: 100%;
height: 0;
background: linear-gradient(rgba(0,0,0,0.6), #ff004f);
border-radius: 10px; position: absolute; left: 0;
bottom: 0; overflow:
hidden; display: flex;
align-items: center;
justify-content: center;
flex-direction: center;
padding: 0 40px; text-
align: center;
transition: height 0.5s;
}
.layer h3{ font-
weight: 500;
margin-bottom: 20px;
}
.work:hover
img{ transform:
scale(1.1);
}
.work:hover .layer{ height
: 100%;
}
.services-list div{
background: #262626;
padding: 40px; font-
size: 13px; font-weight:
300; border-radius:
10px;
transition: background 0.5s,transform 0.5s;
}
.services-list div i{ font-
size: 50px;
margin-bottom: 30px;
}
.services-list div h2{
font-size: 30px;
font-weight: 500;
margin-bottom: 15px;
}
.services-list div a{ text-
decoration: none; color: #fff; font-
size: 12px; margin-top: 20px;
display: inline-block;
}
.services-list
div:hover{ background:#ff004f;
transform: translateY(-10px);
}
/*-----portfolio------------*/
#portfolio{ padding
: 50px 0;
}
.hobbies-
list{ display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-
gap: 40px;
margin-top: 50px;
}
.hobbies-lists div{ background: #262626;
padding: 40px; font-size: 13px; font-weight:
300; border-radius: 10px; transition:
background 0.5s,transform 0.5s;
}
.hobbies-lists div { font-
size: 50px; margin-
bottom: 30px;}
.hobbies-lists div h2{ font-
size: 30px; font-weight:
500;
margin-bottom: 15px;
}
.hobbies-lists div { text-
decoration: none;
color: #fff; font-size:
12px; margin-top:
20px;
display: inline-block;
}
.hobbies-lists
div:hover{ background:#ff004f;
transform: translateY(-10px);
}
/* -------------contact-left----- */
.contact-left{ flex-
basis: 35%;
margin-left: 400px;
}
.contact-right{ flex-
basis: 60%;
}
contact-left p{
margin-top: 30px;
}
.contact-left p
i{ color: #ff004f;
margin-right: 15px;
font-size: 25px;
}
.social-icons{ margin-
top: 30px;
}
.social-icons a{ text-
decoration: none; font-
size: 30px; margin-
right: 50px; color:
#ababab; display:
inline-block;
transition: transform 0.5s;
}
.btn{ display: block; margin:
50px auto; width: fit-
content; border: 1px
solid #ff004f; padding:
14px 50px; border-
radius: 6px; text-
decoration: none; color:
#fff;
margin-left: 135px;
}
.btn:hover{ background
: #ff004f;
}
.social-icons
a:hover{ color: #ff004f;
transform: translateY(-5px);
}
.btn1{ display: block;
margin: 50px auto;
width: fit-content;
border: 1px solid
#ff004f; padding:
14px 50px; border
radius: 6px; text-
decoration: none;
color: #fff;
}
.btn.btn2{ display:
inline-block;
background: #ff004f;
}
.btn:hover{ background
: #ff004f;
}
.btn1.btn3{ display:
inline-block;
background: #ff004f;
margin-left: 600px;
}
.contact-right
form{ width: 100%;
}
form input, form textarea{
width: 100%; border:
0; outline: none;
background:
#262626; padding:
15px; margin: 15px 0;
color: #fff; font-
size: 18px;
border-radius: 6px;
}
form .btn2{ padding:
14px 60px; font-
size: 18px; margin-
top: 20px;
cursor: pointer;
}
.copyright{ width
: 100%;
text-align: center;
padding: 10px 0;
background: #262626;
margin-top: 20px;
}
4.Write a program for Student Registration Form

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
font-family: Calibri, Helvetica, sans-serif;
}
.container {
padding: 50px;
}

input[type=text], input[type=password], textarea {


width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
background-color: orange;
outline: none;
}
div {
padding: 10px 0;
}
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
.registerbtn {
background-color: #4CAF50;
color: white;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.registerbtn:hover {
opacity: 1;
}
</style>
</head>
<body>
<form>
<div class="container">
<center> <h1> Student Registration Form</h1> </center>
<hr>
<label> Firstname </label>
<input type="text" name="firstname" placeholder= "Firstname" size="15" required />
<label> Middlename: </label>
<input type="text" name="middlename" placeholder="Middlename" size="15" required />
<label> Lastname: </label>
<input type="text" name="lastname" placeholder="Lastname" size="15"required />
<div>
<label>
Course :
</label>

<select>
<option value="Course">Course</option>
<option value="BCA">BCA</option>
<option value="BBA">BBA</option>
<option value="B.Tech">B.Tech</option>
<option value="MBA">MBA</option>
<option value="MCA">MCA</option>
<option value="M.Tech">M.Tech</option>
</select>
</div>
<div>
<label>
Gender :
</label><br>
<input type="radio" value="Male" name="gender" checked > Male
<input type="radio" value="Female" name="gender"> Female
<input type="radio" value="Other" name="gender"> Other

</div>
<label>
Phone :
</label>
<input type="text" name="country code" placeholder="Country Code" value="+91"
size="2"/>
<input type="text" name="phone" placeholder="phone no." size="10"/ required>
Current Address :
<textarea cols="80" rows="5" placeholder="Current Address" value="address" required>
</textarea>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>

<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>

<label for="psw-repeat"><b>Re-type Password</b></label>


<input type="password" placeholder="Retype Password" name="psw-repeat" required>
<button type="submit" class="registerbtn">Register</button>
</form>
</body>
</html>
5.Write a program for Form Validation using HTML , JS and CSS

Index.html

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>Form Validation</title>
<link rel="stylesheet" href="style.css" />
</head>

<body>
<h1>REGISTRATION FORM</h1>
<form name="RegForm" onsubmit="return validateForm()">
<p>
<label for="name">Name:</label>
<input type="text" id="name" name="Name"
placeholder="Enter your full name" />
<span id="name-error" class="error-message"></span>
</p>
<p>
<label for="address">Address:</label>
<input type="text" id="address" name="Address"
placeholder="Enter your address" />
<span id="address-error" class="error-message"></span>
</p>
<p>
<label for="email">E-mail Address:</label>
<input type="text" id="email" name="EMail"
placeholder="Enter your email" />
<span id="email-error" class="error-message"></span>
</p>
<p>
<label for="password">Password:</label>
<input type="password" id="password" name="Password" />
<span id="password-error" class="error-message"></span>
</p>
<p>
<label for="subject">Select Your Course:</label>
<select id="subject" name="Subject">
<option value="">
Select Course
</option>
<option value="BTECH">
BTECH
</option>
<option value="BBA">
BBA
</option>
<option value="BCA">
BCA
</option>
<option value="B.COM">
B.COM
</option>
</select>
<span id="subject-error" class="error-message"></span>
</p>
<p>
<label for="comment">College Name:</label>
<textarea id="comment" name="Comment"></textarea>
</p>
<p>
<input type="checkbox" id="agree" name="Agree" />
<label for="agree">I agree to the above
information</label>
<span id="agree-error" class="error-message"></span>
</p>
<p>
<input type="submit" value="Send" name="Submit" />
<input type="reset" value="Reset" name="Reset" />
</p>
</form>
<script src="script.js"></script>
</body>

</html>

Style.css

body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
h1 {
text-align: center;
color: #333;
}

form {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

input[type="text"],
input[type="password"],
select,
textarea {
width: 100%;
padding: 10px;
margin: 5px 0;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
font-size: 16px;
}

select {
width: 100%;
padding: 10px;
margin: 5px 0;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
font-size: 16px;
background-color: #fff;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}

textarea {
resize: vertical;
}

input[type="submit"],
input[type="reset"],
input[type="checkbox"] {
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
padding: 10px 20px;
cursor: pointer;
font-size: 16px;
}

input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="checkbox"]:hover {
background-color: #0056b3;
}

.error-message {
color: red;
font-size: 14px;
margin-top: 5px;
}

File.js
function validateForm() {
const name = document.getElementById("name").value;
const address = document.getElementById("address").value;
const email = document.getElementById("email").value;
const password = document.getElementById("password").value;
const subject = document.getElementById("subject").value;
const agree = document.getElementById("agree").checked;
const nameError = document.getElementById("name-error");

const addressError = document.getElementById(


"address-error"
);
const emailError = document.getElementById(
"email-error"
);
const passwordError = document.getElementById(
"password-error"
);
const subjectError = document.getElementById(
"subject-error"
);
const agreeError = document.getElementById(
"agree-error"
);

nameError.textContent = "";
addressError.textContent = "";
emailError.textContent = "";
passwordError.textContent = "";
subjectError.textContent = "";
agreeError.textContent = "";

let isValid = true;

if (name === "" || /\d/.test(name)) {


nameError.textContent =
"Please enter your name properly.";
isValid = false;
}

if (address === "") {


addressError.textContent =
"Please enter your address.";
isValid = false;
}

if (email === "" || !email.includes("@")) {


emailError.textContent =
"Please enter a valid email address.";
isValid = false;
}

if (password === "" || password.length < 6) {


passwordError.textContent =
"Please enter a password with at least 6 characters.";
isValid = false;
}

if (subject === "") {


subjectError.textContent =
"Please select your course.";
isValid = false;
}

if (!agree) {
agreeError.textContent =
"Please agree to the above information.";
isValid = false;
}

return isValid;
}

You might also like