Scribd
Upload
64 views32 pages

Static Webpage Design for Bookstore

Uploaded by

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

Static Webpage Design for Bookstore

Uploaded by

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

Experiment No: 1

Objective: Design the following static webpages required for an online book store website.

HOMEPAGE:
● The static home page must contain three frames.
● Top frame: Logo and the college name and links to Homepage, Login page, Registration page,
Catalogue page and Cart page (the description of these pages will be given below).
For example: 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 Website Name


Home Login Registration No Catalogue Cart
CSE
ECE Description of the website
EEE
CIVIL

Software Required: Notepad, Web Browser

DESCRIPTION: In this program the entire web paged are created by using basic
HTML tags. Home page is divided into 3 frames by using <frameset> and <frame> tags.
A frame is used to display a web page within a web page.
<frameset>:
● The <frameset> tag defines a frameset.
● The <frameset> element holds one or more <frame> elements.
● Each <frame> element can hold a separate document.
● The <frameset> element specifies HOW MANY columns or rows there will
be in the frameset, and HOW MUCH percentage/pixels of space will occupy
each of them.
<frame>:
● The <frame> tag defines one particular window (frame) within a <frameset>.
● Each <frame> in a <frameset> can have different attributes, such as border,
scrolling, the ability to resize, etc.
Program:

Homepage
<head>
<frameset rows="20%,*">
<frame src="[Link]"name="f1">
<frameset cols="20%,*">
<frame src="[Link]"name="f2">
<frame src="[Link]"name="f3">
</frameset>
</frameset>
</head>
Top frame:
<html>
<body>
<p>
<img src="C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\[Link]"
align=left width=100 height=100">
<h1 align=center>Online book store</h1>
</p>
<br>
<p>
<h2>&nbsp;nbsp;&nbsp;&nbsp;
<a href="[Link]" target=_parent>
Home
</a>
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
<a href="[Link]" target="f3">
login
</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="[Link]" target="f3">
registration
</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;nbsp;&nbsp;&nbsp;
<a href="[Link]" target="f3">
Catalogue
</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="[Link]" target="f3">
Cart
</a>
&nbsp;
</h2>
</p>
</body>
</html>
Left frame:
<html>
<body>
<a href=[Link] target="f3"><h3>CSE</h3> </a><br><br><br><br><br>
<a href=[Link] target="f3"><h3>ECE</h3></a><br><br><br><br><br>
<a href=[Link] target="f3"><h3>EEE</h3></a><br><br><br><br><br>
<a href=[Link] target="f3"><h3>Civil</h3></a>
</body>
</html>
Right frame:
<html>
<body bgcolor="pink">
<p>
<h2 align="center"> <font face="times new roman" color="green" >Online book store information </font>
</h2>

<h3> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<font face="monotype corsiva" color=blue> This is the online
book store developed by students of [Link] contains book catalogue of various branches like cse,ece,eee,civil
</font></h3>
</p>
</body>
</html>

OUTPUT:
Experiment No: 2

Objective: Design the following static webpages required for an online book store website.

LOGINPAGE:
This page looks like below:

Logo Website Name


Home Login Registration No Catalogue Cart
CSE
ECE Login Page
EEE User Name:
CIVIL Passwords:

Submit Reset

Software Required: Notepad, Web Browser


Program:

<html>
<center>
<head>
<title> Login Page </title>
</head>
<body>
<form name="login"> <br>
Homepage-
<html>
<frameset rows="15%,9%,70%" bordercolor="black">
<frameset cols="15%,85%" bordercolor="black">
<frame src="[Link]" scrolling="no">
<frame src="[Link]" >
</frameset>
<frame src="[Link]" name="f2" scrolling="no">
<frameset cols="15%,85%" bordercolor="black">
<frame src="[Link]" name="f31">
<frame src="[Link]" name="f32">
</frameset>
</frameset>
</html>

Logo-
<html>
<body>
<center>
<img src="C:\Users\91639\Downloads\[Link]" align="center" width="90"
height="80">
</center></body>
</html>

Top-
<html>
<body>
<font size="60" color="sky blue">
<center> <strong> ONLINE BOOK SHOP </strong> </font></center>
</body>
</html>

Top-
<html>
<body>
<table width="100%">
<tr>
<td> <a href="[Link]" target="f32">Home </a></td>
<td> <a href="[Link]" target="f32">Login </a></td>
<td> <a href="[Link]" target="f32">Registration</a></td>
<td> <a href="[Link]" target="f32">Catalogue </a></td>
<td> <a href="[Link]" target="f32">Cart </a></td>
</tr>
</table>
</body>
</html>

Left-
<html>
<table cellspacing=15>
<tr><td><a href="[Link]" target="f32" >CSE </a></td></tr>
<tr><td><a href="[Link]" target="f32"> ECE </a> </td></tr>
<tr><td><a href="[Link]" target="f32">EEE </a></td></tr>
<tr><td><a href="[Link]" target="f32"> Civil </a> </td></tr>
</table>
Login Page:
<h3> <u> Login Page </u> </h3>
username: <input type="text" name="uname" ><br><br>
password: <input type="password" name="pwd" ><br><br>
<input type="submit" value="Submit" >
<input type="reset" value="reset">
</center>
</form>
</body>
</center>
</html>
Output-
Experiment No: 3
Objective: Design the following static webpages required for an online book store website.
CATOLOGUE PAGE: The catalogue page should contain the details of all the books available in the
website in a table. The details should contain the following:
1. Snap shot of Cover Page.
2. Author Name.
3. Publisher.
4. Price.
5. Add to cart button

Software Required: Notepad, Web Browser

Program:

<!DOCTYPE html>
<html>
<body>
<center>
<table border=1>
<tr>
<th> Book Preview </th>
<th> Book Details </th>
<th> Price </th>
<th> Payment </th>
</tr>
<tr>
<td> <img src="C:\Documents and Settings\All users\My Documents\My Pictures\[Link]" width=100 height=50>
</img>
</td>
<td>
<pre>
<font face="comic sans ms" size=4 color="green" >
book:XML Bible
Author:winston
Publisher:Wiesley
</font>
</pre>
</td>
<td>&nbsp;$40 &nbsp; </td>
<td> &nbsp; &nbsp; <a href="[Link]" target="_blank">
<img src="C:\Documents and Settings\All users\My Documents\My Pictures\[Link]" width="150"
height="100"></img>
</a> &nbsp; &nbsp;
</td>
</tr>
<tr>
<td> <img src="C:\Documents and Settings\All users\My Documents\My Pictures\[Link]" width=100 height=50>
</img>
</td>
<td>
<pre>
<font face="comic sans ms" size=4 color="green" >
book:Java 2
Author:Watson
Publisher:BPB publications
</font>
</pre>
</td>
<td>&nbsp; $40 &nbsp;</td>
<td> &nbsp; &nbsp; <a href="[Link]" target="_blank">
<img src="C:\Documents and Settings\All users\My Documents\My Pictures\[Link]" width="150"
height="100"></img>
</a> &nbsp; &nbsp;
</td>
</tr>
</table> </center>
</body>
</html>

OUTPUT:

22
Experiment No: 4
Objective: CARTPAGE: The cart page contains the details about the books which are added to the cart.
The cart page should look like this:

Software Required: Notepad, Web Browser

Program:

<html>
<center>
<head>
<title>
cart Page
</title>
</head>
<body>
<table border=1 cellpadding=center width=40%>
<thead>
<tr>
<th>Book Name</th>
<th> Price</th>
<th> Quantity</th>
<th> Amount</th>
<tr>
<thead>
<tr>
<td>java 2</td>
<td>$35.5</td>
<td>2</td>
<td>$70</td>
</tr>
<tr>
<td> XML bible</td>
<td> $40.5</td>
<td> 2</td>
<td> $90</td>
</tr>
<th colspan=4>
total amount=$160
</th>
</tr>
</body>
</center>
</html>

Output-
Experiment No: 5
Objective: Write JavaScript to validate the following fields of the Registration page
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)

Software Required: Notepad, Web Browser


DESCRIPTION: In order to validate the fields of login and registration pages JavaScript is used.
JavaScript is programming code that can be inserted into HTML pages. JavaScript inserted into HTML
pages, can be executed by all modern web browsers. JavaScript is mainly used for validating the
elements in a form submitted by the user. This JavaScript code can react to user events.

Program:

<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>
<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="March">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>
<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>
OUTPUT:
Experiment No: 6

Objective: 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).

Software Required: Notepad, Web Browser

DESCRIPTION: In order to validate the fields of login and registration pages JavaScript is
used. JavaScript is programming code that can be inserted into HTML pages. JavaScript
inserted into HTML pages, can be executed by all modern web browsers. JavaScript is mainly
used for validating the elements in a form submitted by the user. This JavaScript code can
react to user events.

Program:
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Page</title>
<script>
[Link]('DOMContentLoaded', function () {
// Function to validate the name field
function validateName() {
var nameInput = [Link]('name');
var nameValue = [Link]();
// Check if the name contains only alphabets and has a minimum length of 6 characters
var nameRegex = /^[a-zA-Z]{6,}$/;
if (![Link](nameValue)) {
alert('Name should contain alphabets only and have a minimum length of 6 characters.');
return false;
}
return true;
}
// Function to validate the password field
function validatePassword() {
var passwordInput = [Link]('password');
var passwordValue = [Link]();

// Check if the password has a minimum length of 6 characters


if ([Link] < 6) {
alert('Password should have a minimum length of 6 characters.');
return false;
}
return true;
}
// Function to handle form submission
function validateForm() {
// Perform individual field validations
var isNameValid = validateName();
var isPasswordValid = validatePassword();
// If all validations pass, allow form submission
if (isNameValid && isPasswordValid) {
alert('Registration successful!');
} else {
// Prevent form submission if any validation fails
[Link]();
}
}
// Attach the validateForm function to the form's submit event
var registrationForm = [Link]('registrationForm');
[Link]('submit', validateForm);
});
</script>
</head>
<body>
<form id="registrationForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<button type="submit">Register</button>
</form>
</body>
</html>
OUTPUT:
Experiment No: 7

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

Software Required: Notepad, Web Browser


DESCRIPTION: In order to validate the fields of login and registration pages JavaScript
is used. JavaScript is programming code that can be inserted into HTML pages. JavaScript
inserted into HTML pages, can be executed by all modern web browsers. JavaScript is
mainly used for validating the elements in a form submitted by the user. This JavaScript
code can react to user events.

Program:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Page</title>
<script>
[Link]('DOMContentLoaded', function () {
// Function to validate the name field
function validateName() {
var nameInput = [Link]('name');
var nameValue = [Link]();

// Check if the name contains only alphabets and has a minimum length of 6 characters
var nameRegex = /^[a-zA-Z]{6,}$/;
if (![Link](nameValue)) {
alert('Name should contain alphabets only and have a minimum length of 6 characters.');
return false;
}

return true;
}

// Function to validate the password field


function validatePassword() {
var passwordInput = [Link]('password');
var passwordValue = [Link]();

// Check if the password has a minimum length of 6 characters


if ([Link] < 6) {
alert('Password should have a minimum length of 6 characters.');
return false;
}

return true;
}

// Function to validate the email field


function validateEmail() {
var emailInput = [Link]('email');
var emailValue = [Link]();

// Check if the email follows the standard pattern


var emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
if (![Link](emailValue)) {
alert('Invalid email address. Please use a valid email format (e.g., name@[Link]).');
return false;
}

return true;
}

// Function to validate the phone number field


function validatePhoneNumber() {
var phoneInput = [Link]('phoneNumber');
var phoneValue = [Link]();

// Check if the phone number contains 10 digits only


var phoneRegex = /^\d{10}$/;
if (![Link](phoneValue)) {
alert('Phone number should contain 10 digits only.');
return false;
}

return true;
}

// Function to handle form submission


function validateForm() {
// Perform individual field validations
var isNameValid = validateName();
var isPasswordValid = validatePassword();
var isEmailValid = validateEmail();
var isPhoneNumberValid = validatePhoneNumber();

// If all validations pass, allow form submission


if (isNameValid && isPasswordValid && isEmailValid && isPhoneNumberValid) {
alert('Registration successful!');
} else {
// Prevent form submission if any validation fails
[Link]();
}
}

// Attach the validateForm function to the form's submit event


var registrationForm = [Link]('registrationForm');
[Link]('submit', validateForm);
});
</script>
</head>
<body>
<form id="registrationForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

<label for="password">Password:</label>
<input type="password" id="password" name="password" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="phoneNumber">Phone Number:</label>


<input type="tel" id="phoneNumber" name="phoneNumber" pattern="[0-9]{10}" required>

<button type="submit">Register</button>
</form>
</body>
</html>

OUTPUT:
Experiment No: 8
Objective: Develop and demonstrate the usage of inline, internal and external style sheet
using 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 your pages, you refer to these selectors to activate the styles.
2) Set a background image for both the page and single elements on the page.

Software Required: Notepad, Web Browser


Program:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Demo</title>
<link rel="stylesheet" href="[Link]">
<style>
/* Inline Style */
p{
color: blue;
font-style: italic;
}
</style>
</head>
<body>
<h1 class="internal-style">Internal Style</h1>
<p>Some text with <span style="color: green; font-weight: bold;">inline
styles</span>.</p>
<div class="external-style">
<h2>External Style</h2>
<p>This paragraph has external styles applied.</p>
</div>

<p class="external-style">Another paragraph with external styles.</p>

<div class="background-example">
<h2>Background Example</h2>
<p>This div has a background image.</p>
</div>
</body>
</html>
/* Internal Style */
.internal-style {
font-family: 'Arial', sans-serif;
font-size: 24px;
}

/* External Style */
.external-style {
color: red;
font-family: 'Courier New', monospace;
}

/* Background Example */
.background-example {
background-image: url('[Link]');
background-size: cover;
color: white;
}
OUTPUT:
Experiment No: 9
Objective: CSS:
1) Control the repetition of the image with the background-repeat property.
2) Define styles for links as
 A:link
 A:visited
 A:active
 A:hover

Software Required: Notepad, Web Browser

PROGRAM:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Background Image and Link Styles</title>

<style>

/* Task 1: Control the repetition of the image with the background-repeat


property */

body {

background-image: url('[Link]'); /* Replace 'your-image-


[Link]' with the path to your image */

background-repeat: no-repeat;

background-size: cover; /* Adjust as needed: cover, contain, etc. */

margin: 0;

padding: 0;

font-family: Arial, sans-serif;

}
/* Task 2: Define styles for links */

a:link {

color: #0077cc; /* Link color for unvisited links */

text-decoration: none; /* Remove underline */

a:visited {

color: #4c2a85; /* Link color for visited links */

a:active {

color: #ff0000; /* Link color for active links (clicked) */

a:hover {

color: #009900; /* Link color on hover */

text-decoration: underline; /* Underline on hover */

/* Additional styling for demonstration purposes */

.container {

max-width: 800px;

margin: 50px auto;

padding: 20px;

background-color: rgba(255, 255, 255, 0.9);

border-radius: 10px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

}
</style>

</head>

<body>

<div class="container">

<h1>Welcome to My Website</h1>

<p>This is a sample webpage with a background image and styled


links.</p>

<p>Check out the <a href="#" target="_blank">sample link</a>.</p>

</div>

</body>

</html>

Output:
Experiment No: 10

Objective: Consider a small topic of your choice on which you can develop static Webpages and
try to implement all topics of html, CSS and Js within the topic.

Choose any one topic.

1. Survey Form

Software Required: Notepad, Web Browser


Program:

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

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Build a Survey Form using HTML and CSS
</title>

<style>
/* Styling the Body element i.e. Color,
Font, Alignment */
body {
background-color: #05c46b;
font-family: Verdana;
text-align: center;
}

/* Styling the Form (Color, Padding, Shadow) */


form {
background-color: #fff;
max-width: 500px;
margin: 50px auto;
padding: 30px 20px;
box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.5);
}

/* Styling form-control Class */


.form-control {
text-align: left;
margin-bottom: 25px;
}

/* Styling form-control Label */


.form-control label {
display: block;
margin-bottom: 10px;
}
/* Styling form-control input,
select, textarea */
.form-control input,
.form-control select,
.form-control textarea {
border: 1px solid #777;
border-radius: 2px;
font-family: inherit;
padding: 10px;
display: block;
width: 95%;
}

/* Styling form-control Radio


button and Checkbox */
.form-control input[type="radio"],
.form-control input[type="checkbox"] {
display: inline-block;
width: auto;
}

/* Styling Button */
button {
background-color: #05c46b;
border: 1px solid #777;
border-radius: 2px;
font-family: inherit;
font-size: 21px;
display: block;
width: 100%;
margin-top: 50px;
margin-bottom: 20px;
}
</style>
</head>

<body>
<h1>GL BAJAJ Survey Form</h1>

<!-- Create Form -->


<form id="form">

<!-- Details -->


<div class="form-control">
<label for="name" id="label-name">
Name
</label>

<!-- Input Type Text -->


<input type="text" id="name" placeholder="Enter your name" />
</div>

<div class="form-control">
<label for="email" id="label-email">
Email
</label>

<!-- Input Type Email-->


<input type="email" id="email" placeholder="Enter your email" />
</div>

<div class="form-control">
<label for="age" id="label-age">
Age
</label>

<!-- Input Type Text -->


<input type="text" id="age" placeholder="Enter your age" />
</div>

<div class="form-control">
<label for="role" id="label-role">
Which option best describes you?
</label>

<!-- Dropdown options -->


<select name="role" id="role">
<option value="student">Student</option>
<option value="intern">Intern</option>
<option value="professional">
Professional
</option>
<option value="other">Other</option>
</select>
</div>

<div class="form-control">
<label>
Would you recommend GeeksforGeeks
to a friend?
</label>

<!-- Input Type Radio Button -->


<label for="recommed-1">
<input type="radio" id="recommed-1" name="recommed">Yes</input>
</label>
<label for="recommed-2">
<input type="radio" id="recommed-2" name="recommed">No</input>
</label>
<label for="recommed-3">
<input type="radio" id="recommed-3" name="recommed">Maybe</input>
</label>
</div>

<div class="form-control">
<label>Languages and Frameworks known
<small>(Check all that apply)</small>
</label>
<!-- Input Type Checkbox -->
<label for="inp-1">
<input type="checkbox" name="inp">C</input></label>
<label for="inp-2">
<input type="checkbox" name="inp">C++</input></label>
<label for="inp-3">
<input type="checkbox" name="inp">C#</input></label>
<label for="inp-4">
<input type="checkbox" name="inp">Java</input></label>
<label for="inp-5">
<input type="checkbox" name="inp">Python</input></label>
<label for="inp-6">
<input type="checkbox" name="inp">JavaScript</input></label>
<label for="inp-7">
<input type="checkbox" name="inp">React</input></label>
<label for="inp-7">
<input type="checkbox" name="inp">Angular</input></label>
<label for="inp-7">
<input type="checkbox" name="inp">Django</input></label>
<label for="inp-7">
<input type="checkbox" name="inp">Spring</input></label>
</div>

<div class="form-control">
<label for="comment">
Any comments or suggestions
</label>

<!-- multi-line text input control -->


<textarea name="comment" id="comment" placeholder="Enter your comment here">
</textarea>
</div>

<!-- Multi-line Text Input Control -->


<button type="submit" value="submit">
Submit
</button>
</form>
</body>

</html>
OUTPUT

You might also like