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