Scribd
Upload
6 views5 pages

Exp 6

The document contains examples of HTML forms and JavaScript programs for: 1) Creating a registration form with inputs for name, email, password and buttons to create an account or reset the form 2) Evaluating which checkboxes are selected from a list of options and displaying the selection 3) Changing the source image of an HTML image element by modifying the 'src' attribute value with a click of a button

Uploaded by

durgeshkhade001
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
6 views5 pages

Exp 6

The document contains examples of HTML forms and JavaScript programs for: 1) Creating a registration form with inputs for name, email, password and buttons to create an account or reset the form 2) Evaluating which checkboxes are selected from a list of options and displaying the selection 3) Changing the source image of an HTML image element by modifying the 'src' attribute value with a click of a button

Uploaded by

durgeshkhade001
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/ 5

Program:

<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 Form</title>
</head>
<body>
<h2>Gmail Registration Form</h2>
<form id="registrationForm" onsubmit="registerAccount(event)">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name" required><br><br>

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

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

<button type="submit">Create Account</button>


</form>

<script>
function registerAccount(event) {
event.preventDefault();

const name = document.getElementById('name').value;


const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
console.log('Name:', name);
console.log('Email:', email);
console.log('Password:', password);

alert('Account created successfully!');


}
</script>
</body>
</html>

2)Write a JavaScript program for evaluating checkbox selection.

<html>
<html>
<head>
<title>Checkbox Evaluation</title>
</head>
<body>
<h2>Select your preferences:</h2>
<label>
<input type="checkbox" id="option1"> Option 1
</label><br>
<label>
<input type="checkbox" id="option2"> Option 2
</label><br>
<label>
<input type="checkbox" id="option3"> Option 3
</label><br><br>
<button onclick="evaluateSelection()">Evaluate Selection</button>

<script>
function evaluateSelection() {
const option1Checkbox = document.getElementById('option1');
const option2Checkbox = document.getElementById('option2');
const option3Checkbox = document.getElementById('option3');

let selectedOptions = [];

if (option1Checkbox.checked) {
selectedOptions.push('Option 1');
}

if (option2Checkbox.checked) {
selectedOptions.push('Option 2');
}

if (option3Checkbox.checked) {
selectedOptions.push('Option 3');
}

if (selectedOptions.length === 0) {
alert('Please select at least one option.');
} else {
alert('Selected options: ' + selectedOptions.join(', '));
}
}
</script>
</body>
</html>

3)Write a JavaScript program for Changing Attribute Values Dynamically.

<html>
<html>
<head>
<title>Change Attribute Values Dynamically</title>
</head>
<body>
<h2>Click the button to change the attribute value:</h2>
<button onclick="changeImageSrc()">Change Image Src</button>

<img id="imageElement" src="original_image.jpg" alt="Original Image">

<script>
function changeImageSrc() {
const imageElement = document.getElementById('imageElement');

// Change the 'src' attribute value of the image element


imageElement.src = 'new_image.jpg';
}
</script>
</body>
</html>

You might also like