Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
45 views

Lab1 HTML

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,

Uploaded by

Rheny Bondoc
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
45 views

Lab1 HTML

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,

Uploaded by

Rheny Bondoc
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 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