Scribd Logo
Upload

Welcome to Scribd!

  • Experiment 2

    Uploaded by

    rathna
    1 views4 pages
    f3

    Original Title

    EXPERIMENT 2

    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
    f3

    Copyright:

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

    Experiment 2

    Uploaded by

    rathna
    f3

    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 4

    ATHEESH A

    953622205012

    EXPERIMENT 2
    FORM VALIDATION USING JAVASCRIPT
    FORM.HTML:
    <!DOCTYPE html> <label
    for="confirmPassword">Confirm
    <html lang="en">
    Password:</label>
    <head>
    <input type="password"
    <meta charset="UTF-8"> id="confirmPassword" required>

    <meta name="viewport"
    content="width=device-width, initial-
    <label for="dob">Date of
    scale=1.0">
    Birth:</label>
    <title>Registration Form</title>
    <input type="date" id="dob" required>
    <link rel="stylesheet" href="style.css">
    </head>
    <label for="gender">Gender:</label>
    <body>
    <select id="gender" required>
    <div class="container">
    <option value="">Select</option>
    <h2>Registration Form</h2>
    <option
    <form id="registrationForm" value="male">Male</option>
    onsubmit="submitForm(event)">
    <option
    <label for="fullName">Full value="female">Female</option>
    Name:</label>
    <option
    <input type="text" id="fullName" value="other">Other</option>
    required>
    </select>

    <label for="email">Email
    <button
    Address:</label>
    type="submit">Register</button>
    <input type="email" id="email"
    </form>
    required>
    </div>

    <label
    for="password">Password:</label> <script src="script.js"></script>
    <input type="password" </body>
    id="password" required>
    </html>
    ATHEESH A
    953622205012

    STYLE.CSS:
    body { }
    font-family: Arial, sans-serif;
    margin: 0; input, select {
    padding: 0; width: 100%;
    display: flex; padding: 8px;
    justify-content: center; margin-bottom: 10px;
    align-items: center; border: 1px solid #ccc;
    height: 100vh; border-radius: 3px;
    background-color: #f2f2f2; box-sizing: border-box;
    } }

    .container { button {
    background-color: #fff; width: 100%;
    padding: 20px; padding: 10px;
    border-radius: 5px; border: none;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 3px;
    } background-color: #007bff;
    color: #fff;
    h2 { cursor: pointer;
    text-align: center; }
    }
    button:hover {
    label { background-color: #0056b3;
    display: block; }
    margin-bottom: 5px;
    ATHEESH A
    953622205012

    SCRIPT.JS:
    function submitForm(event) { // Validation example (you can
    customize it further)
    event.preventDefault();
    if (password !== confirmPassword) {
    const fullName =
    document.getElementById('fullName').val alert("Passwords don't match");
    ue;
    return;
    const email =
    }
    document.getElementById('email').value;
    const password =
    document.getElementById('password').val // You can perform further actions like
    ue; sending data to server, etc.
    const confirmPassword = console.log("Full Name:", fullName);
    document.getElementById('confirmPassw
    ord').value; console.log("Email Address:", email);

    const dob = console.log("Password:", password);


    document.getElementById('dob').value; console.log("Date of Birth:", dob);
    const gender = console.log("Gender:", gender);
    document.getElementById('gender').value;
    }

    OUTPUT:
    ATHEESH A
    953622205012

    You might also like