Scribd Logo
Upload

Welcome to Scribd!

  • Exp 6

    Uploaded by

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

    Original Description:

    Original Title

    exp-6

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    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

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    2 views5 pages

    Exp 6

    Uploaded by

    durgeshkhade001
    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

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    of 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