Scribd Logo
Upload

Welcome to Scribd!

  • US001-Customer Registration UI

    Uploaded by

    amrutha Kumar0030
    5 views5 pages
    Customer registration page in UI.

    Original Title

    US001-Customer Registration UI (1)

    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
    Customer registration page in UI.

    Copyright:

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

    US001-Customer Registration UI

    Uploaded by

    amrutha Kumar0030
    Customer registration page in UI.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 5

    US001-Customer Registration UI

    Code:-
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
    </title>
    </head>
    <body>
    <h2>Enter below details for registering</h2>
    <form id="registerationForm">
    <label for="ssn">SSN ID:</label>
    <input type="text" id="ssn" name="ssn" required>

    <label for="fname">First Name:</label>


    <input type="text" id="fname" name="fname" required>

    <label for="lname">Last Name:</label>


    <input type="text" id="lname" name="lname" required>

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

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

    <label for="confirmPassword">Confirm Password:</label>


    <input type="text" id="confirmPassword" name="confirmPassword"
    required>

    <label for="address">Address:</label>
    <input type="text" id="address" name="address" required>

    <label for="contact">Contact Number:</label>


    <input type="text" id="contact" name="contact" required>

    <button type="submit" id="Submit">Submit!</button>

    </form>

    <script>
    // alert("hello");

    document.getElementById("registerationForm").addEventListener("submit",
    function(event){
    event.preventDefault();
    console.log("sfsfsdf")
    var ssn = document.getElementById("ssn").value;
    var fname = document.getElementById("fname").value;
    var lname = document.getElementById("lname").value;
    var email = document.getElementById("email").value;
    var password = document.getElementById("password").value;
    var confirmPassword =
    document.getElementById("confirmPassword").value;
    var address = document.getElementById("address").value;
    var contact = document.getElementById("contact").value;
    var phoneno =/^\d{10}$/;

    if(password!=confirmPassword)
    {
    //alert("hi")
    alert("Password do not match!");
    return;
    }
    if(!contact.match(phoneno))
    {
    alert("Please enter correct Contact Number");
    return;
    }
    else{
    alert("You've successfully registered!");
    }
    });
    </script>

    <style>
    body{
    margin:0;
    padding: 0;
    font-family: Arial, Sans-Serif;
    background-image: linear-gradient(#BED7DC, #F1EEDC);
    }
    h2{
    text-align: center;
    margin-top:50px
    }
    form{
    max-width: 400px;
    margin: 50px auto;
    padding: 20px;
    background: #fff;
    border: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    input[type="text"], input[type="email"], input[type="password"],


    textarea{
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 1px;
    }
    button[type="submit"]{
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    }

    button[type="submit"]:hover{
    background-color: #45a049;
    }
    </style>
    </body>
    </html>

    Output:

    Email :
    Contact Number:

    Password do not match


    Successfully registered:

    You might also like