KEMBAR78
Full Stack Web Development Record | PDF | Html | Html Element
Scribd
Upload
3 views32 pages

Full Stack Web Development Record

Uploaded by

7wtdqaykal
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
3 views32 pages

Full Stack Web Development Record

Uploaded by

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

CCA42007

FULL STACK WEB DEVELOPMENT


Submitted By
FAROOK ABDUL AZIZ A
22247011
CCA42007
FULL STACK WEB DEVELOPMENT
Submitted By
FAROOK ABDUL
AZIZ A
22247011

Internal Examiner External Examiner


Dr. Sathish Kumar M
Assistant Professor
MCA
S.no Date Program Title Signature
1 21.02.2023 Design login page
2 28.02.2023 Design change password page
3 07.03.2023 Student information
4 14.03.2023 Academic student information
5 29.03.2023 Student fees information
6 05.04.2023 Hostel student information
7 12.04.2023 Leave application system
8 26.04.2023 Book request
9 03.05.2023 Fees Details
10 17.05.2023 Registration form using Bootstrap
S.no Program Title Aim (5) Pseudocode Program Output (5) Total (50)
(10) (30)
1 Design login page
2 Design change password
page
3 Student information
4 Academic student
information
5 Student fees information
6 Hostel student information
7 Leave application system
8 Book request
9 Fees Details

10 Registration form using


Bootstrap
1. DESIGN LOGIN PAGE

AIM:
To write a HTML code to design the login page and use appropriate CSS style.
ALGORITHM:
STEP 1: Open a new HTML document using a text editor or an integrated development
environment (IDE).
STEP 2: Create two <input> tags for the username and password fields. Each input tag
should have a type attribute set to "text" and "password", respectively, and a name
attribute set to "username" and "password", respectively.
STEP 3: Create a <button> tag with a type attribute set to "submit". This button will
submit the login form when clicked.
STEP 4: Save the HTML and CSS files and open the HTML file in a web browser to
view your login page.
PROGRAM CODE:
<!DOCTYPE html>
<html>
<head>

<style>
body {font-family: Arial, Helvetica, sans-serif;}
form {border: 3px solid #f1f1f1;}

input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}

button {
background-color: #04AA6D;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}

button: hover {
opacity: 0.8;
}

.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}

.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}

img.avatar {
width: 10%;
border-radius: 50%;
}

.container {
padding: 16px;
}

</style>
</head>
<body>

<h2>Login Form</h2>

<form action="/action_page.php" method="post">


<div class="imgcontainer">
<img src="img_avatar2.png" alt="Avatar" class="avatar">
</div>

<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>

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

<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>

<div class="container" style="background-color:#f1f1f1">


<button type="button" class="cancelbtn">Cancel</button>
<span class="psw">Forgot <a href="#">password?</a></span>
</div>
</form>

</body>
</html>

OUTPUT:

RESULT
Thus, the above program is executed successfully.
2. DESIGN CHANGE PASSWORD

AIM:
To write a HTML code to design the change password page and use appropriate CSS
style.
ALGORITHM:
STEP 1: Open a new HTML document using a text editor or an integrated
development environment (IDE).
STEP 2: Create three <input> tags for the old password, new password, and confirm
password fields. Each input tag should have a type attribute set to "password", and a
name attribute set to "old-password", "new-password", and "confirm-password",
respectively.
STEP 3: Create a <button> tag with a type attribute set to "change password". This
button will submit the change password form when clicked.
STEP 4: Create a <button> tag with a type attribute set to "cancel". This button will
cancel the change password form when clicked.
STEP 5: Save the HTML and CSS files and open the HTML file in a web browser to
view your change password page.
PROGRAM CODE:
<!DOCTYPE html>
<html>
<head>

<style>
body {font-family: Arial, Helvetica, sans-serif;}
form {border: 3px solid #f1f1f1;}

input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}

button {
background-color: #0000FF;
color: white;
padding: 14px 20px;
margin: 2px 0;
border: none;
cursor: pointer;
width: 30%;
}

button: hover {
opacity: 0.8;
}

.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}

.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}

img.avatar {
width: 10%;
border-radius: 50%;
}

.container {
padding: 16px;
}

</style>
</head>
<body>

<h2>CHANGE PASSWORD</h2>

<div class="container">
<label for="upassword"><b>old password</b></label>
<input type="text" placeholder="Enter password" name="upassword" required>

<label for="psw"><b>new Password</b></label>


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

<button type="submit">Change password</button>


</div>

<div class="container" style="background-color:#f1f1f2">


<button type="button" class="cancelbtn">Cancel</button>

</div>
</form>

</body>
</html>

OUTPUT:

RESULT
Thus, the above program is executed successfully.
3. STUDENT INFORMATION
AIM:
To write a HTML code to design the student information page and use appropriate
CSS style.
ALGORITHM:
STEP 1: Open a new HTML document using a text editor or an integrated
development environment (IDE).
STEP 2: Create a <button> tag with a type attribute set to "Home". This button will
open the home page.
STEP 3: Create a <button> tag with a type attribute set to "Menu". This button will
open the menu page.
STEP 4: Create a <button> tag with a type attribute set to "academic". This button
will open the academic page.
STEP 5: Create a <button> tag with a type attribute set to "payment". This button will
open the payment page.
STEP 6: Create a <button> tag with a type attribute set to "hostel". This button will
open the hostel page.
STEP 7: Use the <img src > tag to display the image in the student information page.
STEP 8: Save the HTML and CSS files and open the HTML file in a web browser to
view your student information page.
PROGRAM CODE:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Add icon library -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css">
<style>
.btn {
background-color: DodgerBlue;
border: none;
color: white;
padding: 12px 16px;
font-size: 18px;
cursor: pointer;
}
imgcontainer {
text-align: center;
margin: 24px 5 12px 5;

img.avatar {
width: 20%;
border-radius: 50%;
}
/* Darker background on mouse-over */
.btn:hover {
background-color: RoyalBlue;
}
</style>
</head>
<body>
<p>STUDENT DETAILS:</p>
<button class="btn"><i class="fa fa-home"></i> Home</button>
<button class="btn"><i class="fa fa-bars"></i> Menu</button>
<button class="btn"><i class="fa fa-collage"></i> academic</button>
<button class="btn"><i class="fa fa-cash"></i> payment</button>
<button class="btn"><i class="fa fa-hostal"></i> Hostal</button>

<form action="/action_page.php" method="post">


<div class="imgcontainer">
<img src="img_avatar2.png" alt="Avatar" class="avatar">
</body>
</html>

OUTPUT:

RESULT
Thus, the above program is executed successfully.
4. ACADEMIC STUDENT INFORMATION

AIM:
To write a HTML code to design the academic student information page and use
appropriate CSS style.
ALGORITHM:
STEP 1: Open a new HTML document using a text editor or an integrated
development environment (IDE).
STEP 2: create a dropdown button academic to hold the dropdown items.
STEP 3: create a list item <li> for the academic dropdown option.
STEP 4: Inside each <li>, create an anchor <a> tag to represent the text or label for
the dropdown option such as time table, teachers list , attendance, result and leave
application.
STEP 5: Save the HTML and CSS files and open the HTML file in a web browser to
view your academic student information page.
PROGRAM CODE:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
body {
font-family: Arial, Helvetica, sans-serif;
}

.navbar {
overflow: hidden;
background-color: #333;
}

.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}

.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {


background-color: blue;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {
background-color: #ddd;
}

.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>

<div class="navbar">

<div class="dropdown">
<button class="dropbtn">ACADEMIC
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Time table</a>
<a href="#">Teachers list</a>
<a href="#">Attendence</a>
<a href="#">Result</a>
<a href="#">Leve application</a>
</div>
</div>
</div>

</body>
</html>

OUTPUT:

RESULT
Thus, the above program is executed successfully.
5. STUDENT FEE INFORMATION

AIM:
To write a HTML code to design the student fee information page and use appropriate
CSS style.
ALGORITHM:
STEP 1: Open a new HTML document using a text editor or an integrated
development environment (IDE).
STEP 2: create a dropdown button payment to hold the dropdown items.
STEP 3: create a list item <li> for the payment dropdown option.
STEP 4: Inside each <li>, create an anchor <a> tag to represent the text or label for
the dropdown option such as pending fees and paid fees.
STEP 5: Save the HTML and CSS files and open the HTML file in a web browser to
view your student fee information page.
PROGRAM CODE:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
body {
font-family: Arial, Helvetica, sans-serif;
}

.navbar {
overflow: hidden;
background-color: #344;
}

.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}

.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {


background-color: blue;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {
background-color: #ddd;
}

.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>

<div class="navbar">

<div class="dropdown">
<button class="dropbtn">PAYMENT
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Pending fees</a>
<a href="#">Paid fees</a>

</div>
</div>
</div>

</body>
</html>

OUTPUT:

RESULT
Thus, the above program is executed successfully.
6. STUDENT HOSTEL INFORMATION

AIM:
To write a HTML code to design the student information page and use appropriate
CSS style.
ALGORITHM:
STEP 1: Open a new HTML document using a text editor or an integrated
development environment (IDE).
STEP 2: create a dropdown button payment to hold the hostel dropdown items.
STEP 3: create a list item <li> for the hostel dropdown option.
STEP 4: Inside each <li>, create an anchor <a> tag to represent the text or label for
the dropdown option such as hostel gate pass apply and hostel feedback.
STEP 5: Save the HTML and CSS files and open the HTML file in a web browser to
view your student hostel information page.
PROGRAM CODE:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
body {
font-family: Arial, Helvetica, sans-serif;
}

.navbar {
overflow: hidden;
background-color: #344;
}

.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.dropdown {
float: left;
overflow: hidden;
}

.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {


background-color: blue;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {
background-color: #ddd;
}

.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="navbar">

<div class="dropdown">
<button class="dropbtn">HOSTAL
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Hostal gate pass apply</a>
<a href="#">Hostal feedback</a>

</div>
</div>
</div>

</body>
</html>

OUTPUT:

RESULT
Thus, the above program is executed successfully.
7. LEAVE APPLICATION STATUS
AIM:
To write a HTML code to design the leave application status page and use appropriate
CSS style.
ALGORITHM:
STEP 1: Open a new HTML document using a text editor or an integrated
development environment (IDE).
STEP 2: create a dropdown button leave type to hold the dropdown items.
STEP 3: create a list item by using <option> for the leave type dropdown option.
STEP 4: Inside each <option> tag enter the list of values such as medical leave,
casual leave and earned leave.
STEP 5: Repeat the steps from 2 to 4 for the "Status" dropdown, using appropriate
ids, names, and options.
STEP 6: Add a label tag with the text "From:" and the "for" attribute set to "from-
date".
STEP 7: Add an input tag with the type attribute set to "date" and the name attribute
set to "from-date".
STEP 8: Add a label tag with the text "To:" and the "for" attribute set to "to-date".
STEP 9: Add an input tag with the type attribute set to "date" and the name attribute
set to "to-date".
STEP 10: Create a <button> tag with a type attribute set to "submit". This button will
submit the leave application form when clicked.
STEP 11: Save the HTML and CSS files and open the HTML file in a web browser to
view your leave application status page.
PROGRAM CODE:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">LEAVE</h1>
<form action="/action_page.php">
<label for="leave type">leave type:</label>
<select id="leave type" name="leave type">
<option value="medical leave">medical leave</option>
<option value="casual leave">casual leave</option>
<option value="earned leave">earned leave</option>
</select>
<label for="status">status:</label>
<select id="status" name="status">
<option value="applied">applied</option>
<option value="pending">pending</option>
<option value="approved">approved</option>
</select>
<label for="date">From:</label>
<input type="date" name="idate" >
<label for="date">To:</label>
<input type="date" name="idate" >
<br> <br> <br><br>
<input type="submit" style="font-face: 'Comic Sans MS'; color: blue; value="
submit ">
</form>
</body>
</html>

OUTPUT:

RESULT
Thus, the above program is executed successfully.
8. BOOK REQUEST

AIM:
To write a HTML code to design the book request page and use appropriate CSS style.
ALGORITHM:
STEP 1: Open a new HTML document using a text editor or an integrated
development environment (IDE).
STEP 2: create a dropdown button material type to hold the dropdown items.
STEP 3: create a list item by using <option> for the material type dropdown option.
STEP 4: Inside each <option> tag enter the list of values such as audio, video,
textbook, edited book and journal
STEP 5: Repeat the steps from 2 to 4 for the "Status" and “priority” dropdown, using
appropriate ids, names, and options.
STEP 6: Add a label tag with the text "title" and the "for" attribute set to "title".
STEP 7: Add a label tag with the text "From:" and the "for" attribute set to "from-
date".
STEP 8: Add an input tag with the type attribute set to "date" and the name attribute
set to "from-date".
STEP 9: Add a label tag with the text "To:" and the "for" attribute set to "to-date".
STEP 10: Add an input tag with the type attribute set to "date" and the name attribute
set to "to-date".
STEP 10: Create a <button> tag with a type attribute set to "submit". This button will
submit the book request form when clicked.
STEP 11: Save the HTML and CSS files and open the HTML file in a web browser to
view your book request page.
PROGRAM CODE:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:green;">Book request</h1>
<form action="/action_page.php">
<label for="material type">material type:</label>
<select id="material type" name="material type">
<option value="audio">audio</option>
<option value="video">video</option>
<option value="textbook">textbook</option>
<option value="edited book">edited book</option>
<option value="journal">journal</option>
</select>
<label for="title">title:</label>
<input type="text" id="ititle" name="ititle"><br><br>
<label for="priority">priority:</label>
<select id="priority" name="priority">
<option value="high">high</option>
<option value="low">low</option>
<option value="middle">middle</option>
</select>
<label for="status">status:</label>
<select id="status" name="status">
<option value="new request">new request</option>
<option value="granted">granted</option>
<option value="rejected">rejected</option>
</select>
<label for="date">From:</label>
<input type="date" name="idate" >
<label for="date">To:</label>
<input type="date" name="idate" >
<br> <br> <br><br>
<input type="submit" style="font-face: 'Comic Sans MS'; color: blue; value="
submit ">
</form>
</body>
</html>

OUTPUT:

RESULT
Thus, the above program is executed successfully.
9. FEES DETAILS
AIM:
To write a HTML code to design the fees details page and use appropriate CSS style.
ALGORITHM:
STEP 1: Open a new HTML document using a text editor or an integrated
development environment (IDE).
STEP 2: create a dropdown button class to hold the dropdown items.
STEP 3: create a list item by using <option> for the class dropdown option.
STEP 4: Inside each <option> tag enter the list of values such as sem1, sem2, sem3
till sem8.
STEP 5: Repeat the steps from 2 to 4 for the "Status" and “head category” dropdown,
using appropriate ids, names, and options.
STEP 6: Add an input tag with the type attribute set to "search" and the name
attribute set to "search".
STEP 7: Save the HTML and CSS files and open the HTML file in a web browser to
view your fees details page.
PROGRAM CODE:
<!DOCTYPE html>
<html>
<style>
::placeholder {
color: blue;
}
</style>
<body>
<h1 style="color:blue;">fees details</h1>
<form action="/action_page.php">
<label for="sem">Class:</label>

<select id="sem" name="sem">


<option value="sem1">sem1</option>
<option value="sem2">Sem2</option>
<option value="sem3">sem3</option>
<option value="sem4">sem4</option>
<option value="sem5">sem5</option>
<option value="sem6">sem6</option>
<option value="sem7">sem7</option>
<option value="sem8">sem8</option>
</select>
<label for="status">status:</label>
<select id="status" name="status">
<option value="pending">pending</option>
<option value="paid">paid</option>
</select>
<label for="transport">head category:</label>
<select id="head category" name="head category">
<option value="acadamic">acadamic</option>
<option value="hostel">hostel</option>
<option value="transport">transport</option>
</select>
<br> <br> <br>
<input type="search" id="ssearch" name="ssearch" placeholder="search">
</form>
</body>
</html>

OUTPUT:

RESULT
Thus, the above program is executed successfully.
10. REGISTRATION FORM USING BOOTSTRAP
AIM:
To write a HTML and bootstrap program to design a registration form and use
appropriate CSS style.
ALGORITHM:
STEP 1: Start by creating a new HTML document using a text editor or an integrated
development environment (IDE).
STEP 2: In the head tag, include the necessary meta tags, such as the charset and
viewport.
STEP 3: Link the Bootstrap CSS file by adding a link tag with the href attribute
pointing to the Bootstrap CSS file, and the rel attribute set to "stylesheet".
STEP 4: Optionally, you can link your own custom CSS file by adding another link
tag with the href attribute pointing to your CSS file, and the rel attribute set to
"stylesheet".
STEP 5: Add an input tag with the type attribute set to "first name " and the name
attribute set to "name".
STEP 6: Repeat the step 5 to add more input tags such as “last name”, “mother’s
name”, “Father’s name”, “Address”, “Phone no”, “ Date of birth”, “Pincode”,
“course” and “Email id”
STEP 7: Create an option tag with the values male, female and others to the gender
details.
STEP 8: Create a dropdown button to get the state and city details of the student.
STEP 9: Create a <button> tag with a type attribute set to "submit form". This button
will submit the registration form when clicked.
STEP 10: Create a <button> tag with a type attribute set to "reset all". This button
will reset the registration form when clicked.
STEP 11: Save the HTML and CSS files and open the HTML file in a web browser to
view your registration page.
PROGRAM CODE:
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
shrink-to-fit = no">
<link rel = "stylesheet"
href =
"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity =
"sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ
8ERdknLPMO"
crossorigin = "anonymous">
<title> Bootstrap 4 Registration Form Example </title>
<style>
body {
color: green;
}
</style>
</head>
<body>
<section class="h-100 bg-dark">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col">
<div class="card card-registration my-4">
<div class="row g-0">
<div class="col-xl-6 d-none d-xl-block">
<img
src="jas-1.png"
alt="Sample photo"
class="img-fluid"
style="border-top-left-radius: .25rem; border-bottom-left-radius: .25rem;"
/>
</div>
<div class="col-xl-6">
<div class="card-body p-md-5 text-black">
<h3 class="mb-5 text-uppercase"> Student registration form </h3>
<div class="row">
<div class="col-md-6 mb-4">
<div class="form-outline">
<input type="text" id="form3Example1m" class="form-control form-
control-lg" />
<label class="form-label" for="form3Example1m"> First name </label>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-outline">
<input type="text" id="form3Example1n" class="form-control form-
control-lg" />
<label class="form-label" for="form3Example1n"> Last name </label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-4">
<div class="form-outline">
<input type="text" id="form3Example1m1" class="form-control form-
control-lg" />
<label class="form-label" for="form3Example1m1"> Mother's name
</label>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-outline">
<input type="text" id="form3Example1n1" class="form-control form-
control-lg" />
<label class="form-label" for="form3Example1n1"> Father's name
</label>
</div>
</div>
</div>
<div class="form-outline mb-4">
<input type="text" id="form3Example8" class="form-control form-
control-lg" />
<label class="form-label" for="form3Example8"> Address </label>
</div>
<div class="form-outline mb-4">
<input type="text" id="form3Example8" class="form-control form-
control-lg" />
<label class="form-label" for="form3Example8"> Phone Number </label>
</div>
<div class="d-md-flex justify-content-start align-items-center mb-4 py-2">
<h6 class="mb-0 me-4"> Gender: </h6>
<div class="form-check form-check-inline mb-0 me-4">
<input
class="form-check-input"
type="radio"
name="inlineRadioOptions"
id="femaleGender"
value="option1"
/>
<label class="form-check-label" for="femaleGender"> Female </label>
</div>
<div class="form-check form-check-inline mb-0 me-4">
<input
class="form-check-input"
type="radio"
name="inlineRadioOptions"
id="maleGender"
value="option2"
/>
<label class="form-check-label" for="maleGender"> Male </label>
</div>
<div class="form-check form-check-inline mb-0">
<input
class="form-check-input"
type="radio"
name="inlineRadioOptions"
id="otherGender"
value="option3"
/>
<label class="form-check-label" for="otherGender"> Other </label>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-4">
<select class="select">
<option value="1"> State </option>
<option value="2"> Panjab </option>
<option value="3"> Bihar </option>
<option value="4"> Uttar Pradesh </option>
</select>
</div>
<div class="col-md-6 mb-4">
<select class="select">
<option value="1"> City </option>
<option value="2"> Ludhiana </option>
<option value="3"> Lucknow </option>
<option value="4"> Patna </option>
</select>
</div>
</div>
<div class="form-outline mb-4">
<input type="text" id="form3Example9" class="form-control form-
control-lg" />
<label class="form-label" for="form3Example9"> Date of Birth </label>
</div>
<div class="form-outline mb-4">
<input type="text" id="form3Example90" class="form-control form-
control-lg" />
<label class="form-label" for="form3Example90"> Pincode </label>
</div>
<div class="form-outline mb-4">
<input type="text" id="form3Example99" class="form-control form-
control-lg" />
<label class="form-label" for="form3Example99"> Course </label>
</div>
<div class="form-outline mb-4">
<input type="text" id="form3Example97" class="form-control form-
control-lg" />
<label class="form-label" for="form3Example97"> Email ID </label>
</div>
<div class="d-flex justify-content-end pt-3">
<button type="button" class="btn btn-light btn-lg"> Reset all </button>
<button type="button" class="btn btn-warning btn-lg ms-2"> Submit form
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</body> </html>

OUTPUT:

RESULT
Thus, the above program is executed successfully.

You might also like