Scribd Logo
Upload

Welcome to Scribd!

  • 21203B0010 PR6 - CSS

    Uploaded by

    shujaa.2003
    6 views7 pages
    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.

    Original Description:

    Original Title

    21203B0010 PR6_CSS

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

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

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    6 views7 pages

    21203B0010 PR6 - CSS

    Uploaded by

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

    Copyright:

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