Scribd Logo
Upload

Welcome to Scribd!

  • 02 235182 041 7744466240 01112020 095008pm

    Uploaded by

    mahrukh saeed
    6 views9 pages
    The document contains HTML and CSS code to create a registration form with various input fields like name, email, password etc. and validation for these fields using JavaScript. The form uses flexbox for layout and has styling for inputs, labels, buttons. On submitting the form, JavaScript code validates that required fields are entered and passwords match before allowing submission.

    Original Description:

    Original Title

    02-235182-041-7744466240-01112020-095008pm

    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 contains HTML and CSS code to create a registration form with various input fields like name, email, password etc. and validation for these fields using JavaScript. The form uses flexbox for layout and has styling for inputs, labels, buttons. On submitting the form, JavaScript code validates that required fields are entered and passwords match before allowing submission.

    Copyright:

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

    02 235182 041 7744466240 01112020 095008pm

    Uploaded by

    mahrukh saeed
    The document contains HTML and CSS code to create a registration form with various input fields like name, email, password etc. and validation for these fields using JavaScript. The form uses flexbox for layout and has styling for inputs, labels, buttons. On submitting the form, JavaScript code validates that required fields are entered and passwords match before allowing submission.

    Copyright:

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

    ITL-226:

    Web Systems & Technologies Lab


    Semester BS IT – 05

    CODE
    <!DOCTYPE html>
    <html>
    <script type="text/javascript">
    function matchpass(){
    var firstpassword=document.f1.password.value;
    var secondpassword=document.f1.password2.value;

    if(firstpassword==secondpassword){
    return true;
    }
    else{
    alert("password must be same!");
    return false;
    }
    }
    </script>
    ITL-226:
    Web Systems & Technologies Lab
    Semester BS IT – 05

    <head>
    <meta charset="utf-8">
    <style>
    body {
    margin: 0;
    }
    .page-content {
    width: 100%;
    margin: 0 auto;
    background: #5eb2b3;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    -o-justify-content: center;
    -ms-justify-content: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -o-align-items: center;
    -ms-align-items: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    }
    .form-v5-content {
    background: #fff;
    width: 670px;
    border-radius: 8px;
    -o-border-radius: 8px;
    -ms-border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    margin: 175px 0;
    font-family: 'Roboto', sans-serif;
    color: #333;
    font-weight: 400;
    position: relative;
    font-size: 18px;
    }
    .form-v5-content .form-detail {
    padding: 30px 45px 30px 45px;
    position: relative;
    }
    .form-detail h2 {
    font-weight: 700;
    font-size: 25px;
    text-align: center;
    position: relative;
    padding: 3px 0 20px;
    margin-bottom: 40px;
    }
    .form-detail h2::after {
    background: #3786bd;
    ITL-226:
    Web Systems & Technologies Lab
    Semester BS IT – 05

    width: 50px;
    height: 2px;
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    }
    .form-detail .form-row {
    position: relative;
    }
    .form-detail .form-row-last {
    text-align: center;
    }
    .form-detail label {
    display: block;
    font-size: 18px;
    padding-bottom: 10px;
    }
    .form-detail .input-text {
    margin-bottom: 26px;
    }
    .form-detail input {
    width: 94.5%;
    padding: 10.5px 15px;
    border: 1px solid #e5e5e5;
    appearance: unset;
    -moz-appearance: unset;
    -webkit-appearance: unset;
    -o-appearance: unset;
    -ms-appearance: unset;
    outline: none;
    -moz-outline: none;
    -webkit-outline: none;
    -o-outline: none;
    -ms-outline: none;
    border-radius: 4px;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 18px;
    }
    .form-detail input:focus {
    border: 1px solid #b3b3b3;
    }
    ITL-226:
    Web Systems & Technologies Lab
    Semester BS IT – 05

    .form-detail .register {
    font-size: 18px;
    color: #fff;
    background: #3786bd;
    border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    width: 180px;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.2);
    -o-box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.2);
    -ms-box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.2);
    border: none;
    margin: 19px 0 40px;
    cursor: pointer;
    }
    .form-detail .register:hover {
    background: #2f73a3;
    }
    .form-detail .form-row-last input {
    padding: 14px;
    }
    .form-detail i {
    font-size: 14px;
    color: #999;
    right: 15px;
    top: 50%;
    transform: translateX(-50%);
    position: absolute;
    }
    input::-webkit-input-placeholder {
    color: #999;
    font-size: 16px;
    }
    input::-moz-placeholder {
    color: #999;
    font-size: 16px;
    }
    input:-ms-input-placeholder {
    color: #999;
    font-size: 16px;
    }
    input:-moz-placeholder {
    color: #999;
    font-size: 16px;
    }

    /* Responsive */
    @media screen and (max-width: 767px) {
    ITL-226:
    Web Systems & Technologies Lab
    Semester BS IT – 05

    .form-v5-content {
    margin: 175px 20px;
    }
    }

    </style>

    </head>
    <body class="form-v5">
    <div class="page-content">
    <div class="form-v5-content">
    <form class="form-detail" action="#" name="f1" method="post" onSubmit="return matchpass()">
    <h2>Register</h2>
    <div class="form-row">
    <label for="full-name">Full Name</label>
    <input type="text" name="full-name" id="full-name" class="input-text" placeholder="Your Name" required>
    <i class="fas fa-user"></i>
    </div>
    <div class="form-row">
    <label for="your-email">Your Email</label>
    <input type="text" name="your-email" id="your-email" class="input-text" placeholder="Your Email" required
    pattern="[^@]+@[^@]+.[a-zA-Z]{2,6}">
    <i class="fas fa-envelope"></i>
    </div>
    <div class="form-row">
    <label for="password">Password</label>
    <input type="password" name="password" id="password" class="input-text" placeholder="Your Password"
    required>
    <i class="fas fa-lock"></i>
    </div>
    <div class="form-row">
    <label for="password"> Comfirm Password</label>
    <input type="password" name="password2" id="password2" class="input-text" placeholder="Your Password"
    required>
    <i class="fas fa-lock"></i>
    </div>
    <div class="form-row-last">
    <input type="submit">
    </div>
    </form>
    </div>
    </div>
    </body>
    </html>

    Output
    ITL-226:
    Web Systems & Technologies Lab
    Semester BS IT – 05
    ITL-226:
    Web Systems & Technologies Lab
    Semester BS IT – 05

    CODE
    <html>
    <head>
    <title>Form Validation</title>
    <script type = "text/javascript">
    function validate() {

    if( document.myForm.Name.value == "" ) {


    alert( "Please provide your name!" );
    document.myForm.Name.focus() ;
    return false;
    }
    if( document.myForm.EMail.value == "" ) {
    alert( "Please provide your Email!" );
    document.myForm.EMail.focus() ;
    return false;
    }
    if( document.myForm.Zip.value == "" || isNaN( document.myForm.Zip.value ) ||
    document.myForm.Zip.value.length != 5 ) {

    alert( "Please provide a zip in the format #####." );


    ITL-226:
    Web Systems & Technologies Lab
    Semester BS IT – 05

    document.myForm.Zip.focus() ;
    return false;
    }
    if( document.myForm.Country.value == "-1" ) {
    alert( "Please provide your country!" );
    return false;
    }
    return( true );
    }

    </script>
    </head>

    <body >
    <div style="border:#000 solid">
    <h2>Test Javascript Form Validation</h2>
    <form action="#" name = "myForm" onsubmit = "return(validate());">

    <label>Name<samp style="color:#F00">*</samp></label>
    <input type = "text" name = "Name" /><samp style="color:#F00">Please enter your
    name!</samp><br><br>

    <label>Address</label>
    <input type = "text" name = "Address" /><br><br>

    <label>Zip Code<samp style="color:#F00">*</samp></label>


    <input type = "text" name = "Zip" /><samp style="color:#F00">5-digit
    number</samp><br><br>

    <label>Country<samp style="color:#F00">*</samp></label>

    <select name = "Country">


    <option value = "-1" selected>[choose yours]</option>
    <option value = "1">USA</option>
    <option value = "2">UK</option>
    <option value = "3">PAKISTAN</option>
    </select><br><br>

    <label>Gender<samp style="color:#F00">*</samp></label>
    <input type="radio" name="Male" value="Male" /><span>Male</span>
    <input
    type="radio" name="Female" value="Female" /><span>Female</span> <br><br>

    <label>Preferences<samp style="color:#F00">*</samp></label>
    ITL-226:
    Web Systems & Technologies Lab
    Semester BS IT – 05

    <input
    type="checkbox" name="en" value="en" checked /><span>English</span>
    <input
    type="checkbox" name="nonen" value="noen" /><span>Non English</span><br><br>

    <label>Phone<samp style="color:#F00">*</samp></label>
    <input type="number" name =
    "phone" /><samp style="color:#F00">(XXXX-XXXXXXX)</samp><br><br>

    <label>EMail<samp style="color:#F00">*</samp></label>
    <input type = "text" name = "EMail"
    /><br><br>

    <label>Password(6-8 characters)<samp style="color:#F00">*</samp></label>


    <input type = "password" name = "EMail" /><br><br>

    <label>Verify password<samp style="color:#F00">*</samp></label>


    <input type = "password" name = "password1" /><br><br>
    <input type = "submit" value = "SEND" />
    <input type = "submit" value = "CLEAR" />
    </form>
    </div>
    </body>
    </html>
    Output

    You might also like