Scribd
Upload
17 views

21203B0010 PR6 - CSS

The document describes a laboratory experiment conducted by a computer engineering student. The goal of the experiment was to create a webpage using form elements. The student created a registration form with various input fields like text, password, radio buttons, checkboxes and a dropdown menu. The student was then asked to write additional JavaScript programs - one to create a Gmail registration form with validation, another to evaluate checkbox selections, and a third to dynamically change an image source attribute value.

Uploaded by

shujaa.2003
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
17 views

21203B0010 PR6 - CSS

The document describes a laboratory experiment conducted by a computer engineering student. The goal of the experiment was to create a webpage using form elements. The student created a registration form with various input fields like text, password, radio buttons, checkboxes and a dropdown menu. The student was then asked to write additional JavaScript programs - one to create a Gmail registration form with validation, another to evaluate checkbox selections, and a third to dynamically change an image source attribute value.

Uploaded by

shujaa.2003
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
You are on page 1/ 7

DEPARTMENTOFCOMPUTERENGINEERING

Course: Computer Engineering Class: CO5IB

Semester: 5 Course: Client-Side Scripting (22519)


Laboratory No: L001 Name of Subject Teacher: Prof. Omkar

Name of Student: Dhriti Pandya Roll Id: 21203B0010

Experiment No: 6
Title of Create a webpage using form elements.
Experiment
• Program Code:
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<form name="MyForm" method="post" action="">
<h2>Register your account</h2>
Enter your Firstname: <input type="text" name="FName" id="FName"><br><br>
Enter Your Lastname: <input type="text" name="LName" id="LName"><br><br>
Enter your Username: <input type="text" name="UName" id="UName"><br><br>
Enter your Password: <input type="password" name="pass" id="pass"><br><br>
Enter you Gender: <input type="radio" name="Gender" id="Male">Male
<input type="radio" name="Gender" id="Female">Female<br><br>
Your Hobbies? <input type="checkbox" name="Hobbies" id="Cricket">Cricket
<input type="checkbox" name="Football" id="Cricket">Football<br><br>
Select your city: <select name="City">
<option name="Mumbai">Mumbai</option>
<option name="Pune">Pune</option>
<option name="Nagpur">Nagpur</option>
<option name="Ahmedabad">Ahmedabad</option>
</select><br><br>
<input type="submit"> <input type="reset">
</form>
</body>
</html>
• Exercise:

1) Write a program to create the registration form for creating gmail account.
<html>
<head>
<title>Gmail Registration</title>
<style>
body {
font-family: Arial, sans-serif;
}
form {
max-width: 400px;
margin: 0 auto;
}
</style>
</head>
<body>
<h1>Create a Gmail Account</h1>
<form id="registrationForm" onsubmit="return validateForm()">
<label for="firstName">First Name:</label>
<input type="text" id="firstName" required><br>

<label for="lastName">Last Name:</label>


<input type="text" id="lastName" required><br>
<label for="email">Email:</label>
<input type="email" id="email" required><br>
<label for="password">Password:</label>
<input type="password" id="password" required><br>
<label for="confirmPassword">Confirm Password:</label>
<input type="password" id="confirmPassword" required><br>
<input type="submit" value="Create Account">
</form>
<script>
function validateForm() {
var password = document.getElementById("password").value;
var confirmPassword = document.getElementById("confirmPassword").value;
if (password !== confirmPassword) {
alert("Passwords do not match");
return false;
}
alert("Account created successfully!");
return true;
}
</script>
</body>
</html>
2) Write a JavaScript program for evaluating checkbox selection.
<html>
<head>
<title>Checkbox Selection</title>
</head>
<body>
<h1>Select your favourite game? [Checkbox Selection]</h1>
<form id="checkboxForm">
<input type="checkbox" id="checkbox1" name="checkbox" value="Counter Strike "> Counter
Strike
<input type="checkbox" id="checkbox2" name="checkbox" value="Valorant"> Valorant
<input type="checkbox" id="checkbox3" name="checkbox" value="BGMI"> BGMI
<p>Selected options: <span id="selectedOptions"></span></p>
<input type="button" value="Evaluate Selection" onclick="evaluateSelection()">
</form>
<script>
function evaluateSelection() {
const checkboxes = document.getElementsByName("checkbox");
const selectedOptions = [];
for (let i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
selectedOptions.push(checkboxes[i].value);
}
}
const selectedOptionsText = selectedOptions.join(', ');
document.getElementById("selectedOptions").textContent = selectedOptionsText;
}
</script>
</body>
</html>
3) Write a JavaScript program for Changing Attribute Values Dynamically.
<html>
<head>
<title>Change Attribute Value Dynamically</title>
</head>
<body>
<h1>Change Attribute Value Dynamically</h1>
<img id="myImage" src="original-image.jpg" alt="Original Image">
<p>
<label for="newImageUrl">New Image URL: </label>
<input type="text" id="newImageUrl" placeholder="Enter new image URL">
<button onclick="changeImageSrc()">Change Image</button>
</p>
<script>
function changeImageSrc() {
const newImageUrl = document.getElementById("newImageUrl").value;
const imageElement = document.getElementById("myImage");
if (newImageUrl) {
imageElement.src = newImageUrl;
imageElement.alt = "Updated Image";
}
}
</script>
</body>
</html>

You might also like