Scribd Logo
Upload

Welcome to Scribd!

  • 17 views

    Lab1 HTML

    Uploaded by

    Rheny Bondoc
    The document contains the source code for an HTML registration form with the following key elements: - It includes input fields for collecting a user's first name, last name, email, password, and confirmation of password. Each field has a character limit. - A JavaScript function called textCounter is used to display the remaining character count for each field as the user types. - There is a terms and conditions checkbox that must be checked to enable the submit button. - Styling is added using CSS to control layout, colors, fonts and make the form visually appealing. The form allows users to input their details within the specified character limits and agrees to terms before submitting their information. HTML,

    Copyright:

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

    You might also like

    Lab1 HTML

    Uploaded by

    Rheny Bondoc
    17 views9 pages
    The document contains the source code for an HTML registration form with the following key elements: - It includes input fields for collecting a user's first name, last name, email, password, and confirmation of password. Each field has a character limit. - A JavaScript function called textCounter is used to display the remaining character count for each field as the user types. - There is a terms and conditions checkbox that must be checked to enable the submit button. - Styling is added using CSS to control layout, colors, fonts and make the form visually appealing. The form allows users to input their details within the specified character limits and agrees to terms before submitting their information. HTML,

    Original Description:

    Original Title

    Lab1.html

    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 the source code for an HTML registration form with the following key elements: - It includes input fields for collecting a user's first name, last name, email, password, and confirmation of password. Each field has a character limit. - A JavaScript function called textCounter is used to display the remaining character count for each field as the user types. - There is a terms and conditions checkbox that must be checked to enable the submit button. - Styling is added using CSS to control layout, colors, fonts and make the form visually appealing. The form allows users to input their details within the specified character limits and agrees to terms before submitting their information. HTML,

    Copyright:

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

    Lab1 HTML

    Uploaded by

    Rheny Bondoc
    The document contains the source code for an HTML registration form with the following key elements: - It includes input fields for collecting a user's first name, last name, email, password, and confirmation of password. Each field has a character limit. - A JavaScript function called textCounter is used to display the remaining character count for each field as the user types. - There is a terms and conditions checkbox that must be checked to enable the submit button. - Styling is added using CSS to control layout, colors, fonts and make the form visually appealing. The form allows users to input their details within the specified character limits and agrees to terms before submitting their information. HTML,

    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 9

    Rheny Jay Q.

    Bondoc BSIT-3

    1. Explain the script character limit and count that you created in your laboratory.

    - Limit the character I use maxlength attribute so that I can specify what is my desire number of
    characters allowed to input.

    2. Explain the bone structure of HTML.


    -The bone structure of HTML has three tags. The <html> tag serves an indicator that the content of the
    file is in HTML Language and all the text and HTML elements in your web page should be placed within
    the beginning and ending HTML tags. But the first line of the code must have an indicator which means
    we must put DOCTYPE identifier because it defines the HTML version that defines specification. The
    <head> tag is a container for the tags that contain information about the page, in this portion we will
    put the title of our page. The <body> tag is the structure of HTML where we put the content of our page
    like the the text or other content that we want to put so that so that we can design our page according
    to our desire.

    3. Why do HTML and CSS exist in creating a website by implementing Javascript or Jquery?

    -HTML and CSS exist in creating a website by implementing Javascript or Jquery because HTML is the
    structure of the website where we can put our content or any information that we want to send to
    audience or visitor of our website and CSS helps the HTML to be more attractive and elegant when it
    appears in the website so that we can put right fonts or colors to the website to make the website
    presentable and and information is readable and to make website interactive to the visitor or user of
    the page we implement Javascript or Jquery so that the website can response to the action of the
    user/visitor.
    Output
    Source Code

    <!DOCTYPE html>

    <head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Registration Form</title>

    <style>

    @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

    *{

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    body{

    font-family: 'poppins';

    background-color: #ECEDEF;

    color: #fff;

    line-height: 1.8;

    a{

    text-decoration: none;
    }

    #container{

    margin: 30px auto;

    max-width: 430px;

    padding: 20px;

    .form-wrap{

    background-color: #fff;

    padding: 15px 25px;

    color: #333;

    border-top: 4px solid #49c1a2;

    border-radius: 05px;

    .form-wrap h1,

    .form-wrap p{

    text-align: center;

    .form-wrap .form-group{

    margin-top: 15px;

    }
    .form-wrap .form-group label{

    display: block;

    color: #666;

    .form-wrap .form-group input{

    width: 100%;

    padding: 10px;

    border: #ddd 1px solid;

    border-radius: 5px;

    .form-wrap button{

    display: block;

    width: 100%;

    padding: 10px;

    margin-top: 20px;

    background-color: #49c1a2;

    color: #fff;

    cursor: pointer;

    border: 1px solid #49c1a2;

    font-family: 'poppins';

    font-size: 15px;

    transition: 1s;

    }
    .form-wrap button:hover{

    background-color: #37a08e;

    transition: 1s;

    .form-wrap .bottom-text{

    font-size: 13px;

    margin-top: 20px;

    .fn_counter{

    font-size: 11px

    footer {

    text-align: center;

    margin-top: 10px;

    color: #333;

    </style>

    </head>

    <body>

    <div id="container">

    <div class="form-wrap">

    <h1>Sign Up</h1>
    <p> Please Fill the Forms below.</p>

    <form>

    <div class="form-group">

    <label for="first-name">First Name</label>

    <input type="text" name="firstname" id="first-name" maxlength="50" placeholder="First Name"


    onkeyup="textCounter(this,'fn_counter',50);">

    <input disabled maxlength="3" size="3" value="50" id="fn_counter">

    </div>

    <div class="form-group">

    <label for="last-name">Last Name</label>

    <input type="text" name="firstname" id="last-name" maxlength="50" placeholder="Last Name"


    onkeyup="textCounter(this,'ln_counter',50);">

    <input disabled maxlength="3" size="3" value="50" id="ln_counter">

    </div>

    <div class="form-group">

    <label for="email">Email</label>

    <input type="email" name="email" id="email" maxlength="50" placeholder="qwerty@yahoo.com"


    onkeyup="textCounter(this,'e_counter',50);">

    <input disabled maxlength="3" size="3" value="50" id="e_counter">

    </div>

    <div class="form-group">

    <label for="password">Password</label>

    <input type="password" name="firstname" id="first-name" maxlength="16"


    onkeyup="textCounter(this,'pass_counter',16);">
    <input disabled maxlength="3" size="3" value="16" id="pass_counter">

    </div>

    <div class="form-group">

    <label for="cpass">Confirm Password</label>

    <input type="password" name="firstname" id="first-name" maxlength="16"


    onkeyup="textCounter(this,'cpass_counter',16);">

    <input disabled maxlength="3" size="3" value="16" id="cpass_counter">

    </div>

    <script>

    function textCounter(field,field2,maxlimit)

    var countfield = document.getElementById(field2);

    if ( field.value.length > maxlimit ) {

    field.value = field.value.substring( 0, maxlimit );

    return false;

    } else {

    countfield.value = maxlimit - field.value.length;

    </script>

    <form method="post">

    <div>

    <label for="terms_and_conditions">I agree to the Terms & Conditions.</label>

    <input type="checkbox" id="terms_and_conditions" value="1" />


    </div>

    <div>

    <button type="submit" id="submit_button" disabled>Sign Up</button>

    </div>

    </form>

    </body>

    </html>

    You might also like