Complete the following Exercise Tasks 1 Using the included validate html file as the starting point, complete the following a Make the title of the web page Login Form b Insert the proper tag to include the utf 8 character set c Insert the proper attributes in the opening tag (1) the action should be process php (2) the method should be post (3) the name and id should both be loginform d Both the username and password input fields should be required e The Submit button should say Log In f For this task, add a pattern attribute to the password input element that uses a regex Use this link as a reference https www w3schools com tags att input pattern asp Lets implement slightly more robust password requirements in our exercise The regex should check, at a minimum, that the input contains 15 or more characters that include least one number, one uppercase latter, one lowercase letter, and one special character ( , $, , or ) Refer to the examples on the reference site and add the proper pattern attribute and regex to the password input field 2 Style the HTML file using the included css txt file a Create a element section in the proper place in the validate html file b Copy and paste all the content in the completed css txt file into the section 3 Complete the validation script using the included validation txt file a Create a element section just above the closing tag in the validate html file b Copy and paste all the content in the incomplete validation txt file into the section c Where directed in the comments, create a variable called letter and assign it the html element with the id letter d Where directed in the comments, create a variable called capital and assign it the html element with the id capital e Where directed in the comments, create a variable called number and assign it the html element with the id number f Where directed in the comments, create a variable called special and assign it the html element with the id special g Where directed in the comments, create a variable called length and assign it the html element with the id length h Where directed in the comments, replace uuuu with the property that triggers an event when the password input box receives focus i Where directed in the comments, replace vvvv with the property that triggers an event when the password input box loses focus j Where directed in the comments, replace wwww with the property that triggers an event when the user releases a key in the input box k Where directed in the comments, replace xxxx with the proper regex pattern to match the special characters l Where directed in the comments, replace yyyy with the correct value to check the string length css txt below Style all input fields input width 100 padding 12px border 1px solid ccc border radius 4px box sizing border box margin top 6px margin bottom 16px Style the submit button sub background color 4CAF50 color white Style the container for inputs container width 300px margin 0 auto background color f1f1f1 padding 20px The message box is shown only when the user clicks on the password field message display none width 300px margin 0 auto background f1f1f1 color 000 position relative padding 20px margin top 10px message p padding 10px 35px font size 18px Add a green text color when the requirements are right valid color green Add a red text color when the requirements are wrong invalid color red validation txt below var myInput document getElementById( psw ) TASK c create a variable called letter and assign it the html element with the id letter TASK d create a variable called capital and assign it the html element with the id capital TASK e create a variable called number and assign it the html element with the id number TASK f create a variable called special and assign it the html element with the id special TASK g create a variable called length and assign it the html element with the id length When the user clicks on the password field, show the message box TASK h replace uuuu with the property that triggers an event when the password input box receives focus myInput uuuu function() document getElementById( message ) style display block When the user clicks outside of the password field, hide the message box TASK i replace vvvv with the property that triggers an event when the password input box loses focus myInput vvvv function() document getElementById( message ) style display none When the user starts to type something inside the password field TASK j replace wwww with the property that triggers an event when the user releases a key in the input box myInput wwww function() Validate lowercase letters var lowerCaseLetters a z g if(myInput value match(lowerCaseLetters)) letter classList remove( invalid ) letter classList add( valid ) else letter classList remove( valid ) letter classList add( invalid ) Validate capital letters var upperCaseLetters A Z g if(myInput value match(upperCaseLetters)) capital classList remove( invalid ) capital classList add( valid ) else capital classList remove( valid ) capital classList add( invalid ) Validate numbers var numbers 0 9 g if(myInput value match(numbers)) number classList remove( invalid ) number classList add( valid ) else number classList remove( valid ) number classList add( invalid ) Validate special characters TASK k replace xxxx with the proper regex pattern to match the special characters var specialCharacters xxxx g if(myInput value match(specialCharacters)) special classList remove( invalid ) special classList add( valid ) else special classList remove( valid ) special classList add( invalid ) Validate length TASK l replace yyyy with the correct value to check the string length if(myInput value length yyyy) length classList remove( invalid ) length classList add( valid ) else length classList remove( valid ) length classList add( invalid ) Here is what I have so far Login Form Style all input fields input width 100 padding 12px border 1px solid ccc border radius 4px box sizing border box margin top 6px margin bottom 16px Style the submit button sub background color 4CAF50 color white Style the container for inputs container width 300px margin 0 auto background color f1f1f1 padding 20px The message box is shown only when the user clicks on the password field message display none width 300px margin 0 auto background f1f1f1 color 000 position relative padding 20px margin top 10px message p padding 10px 35px font size 18px Add a green text color when the requirements are right valid color green Add a red text color when the requirements are wrong invalid color red User name User password var myInput document getElementById( psw ) TASK c create a variable called letter and assign it the html element with the id letter TASK d create a variable called capital and assign it the html element with the id capital TASK e create a variable called number and assign it the html element with the id number TASK f create a variable called special and assign it the html element with the id special TASK g create a variable called length and assign it the html element with the id length When the user clicks on the password field, show the message box TASK h replace uuuu with the property that triggers an event when the password input box receives focus myInput uuuu function() document getElementById( message ) style display block When the user clicks outside of the password field, hide the message box TASK i replace vvvv with the property that triggers an event when the password input box loses focus myInput vvvv function() document getElementById( message ) style display none When the user starts to type something inside the password field TASK j replace wwww with the property that triggers an event when the user releases a key in the input box myInput wwww function() Validate lowercase letters var lowerCaseLetters a z g if(myInput value match(lowerCaseLetters)) letter classList remove( invalid ) letter classList add( valid ) else letter classList remove( valid ) letter classList add( invalid ) Validate capital letters var upperCaseLetters A Z g if(myInput value match(upperCaseLetters)) capital classList remove( invalid ) capital classList add( valid ) else capital classList remove( valid ) capital classList add( invalid ) Validate numbers var numbers 0 9 g if(myInput value match(numbers)) number classList remove( invalid ) number classList add( valid ) else number classList remove( valid ) number classList add( invalid ) Validate special characters TASK k replace xxxx with the proper regex pattern to match the special characters var specialCharacters xxxx g if(myInput value match(specialCharacters)) special classList remove( invalid ) special classList add( valid ) else special classList remove( valid ) special classList add( invalid ) Validate length TASK l replace yyyy with the correct value to check the string length if(myInput value length yyyy) length classList remove( invalid ) length classList add( valid ) else length classList remove( valid ) length classList add( invalid )

The Answer is in the image, click to view ...

Question: Complete the following Exercise Tasks 1. Using the included validate.html file as the starting point, complete the following a. Make the title of the web

Complete the following Exercise Tasks

1. Using the included validate.html file as the starting point, complete the following

a. Make the title of the web page Login Form

b. Insert the proper tag to include the utf-8 character set

c. Insert the proper attributes in the opening

tag

(1) the action should be process.php

(2) the method should be post

(3) the name and id should both be loginform

d. Both the username and password input fields should be required

e. The Submit button should say Log In

f. For this task, add a pattern attribute to the password input element that uses a regex. Use this link as a reference: https://www.w3schools.com/tags/att_input_pattern.asp. Lets implement slightly more robust password requirements in our exercise. The regex should check, at a minimum, that the input contains 15 or more characters that include least one number, one uppercase latter, one lowercase letter, and one special character (_, $, ^, or !). Refer to the examples on the reference site and add the proper pattern attribute and regex to the password input field.

2. Style the HTML file using the included css.txt file

a. Create a element section in the proper place in the validate.html file

b. Copy and paste all the content in the completed css.txt file into the User name: User password:

Step by Step Solution

There are 3 Steps involved in it

1 Expert Approved Answer

Step: 1 Unlock blur-text-image

Question Has Been Solved by an Expert!

Get step-by-step solutions from verified subject matter experts

Step: 2 Unlock

Step: 3 Unlock

Students Have Also Explored These Related Databases Questions!

Complete the following Exercise Tasks 1 . Using the included validate.html file as the starting point, complete the following a . Make the title of the web page Login Form b . Insert the proper tag...

Complete the following Exercise Tasks 1 . Using the included validate.php file asthe starting point, complete the following: a . Upload the validate.php file into the PHPSandbox.io online editor...

University of Lincoln Assessment Framework Assessment Briefing Template 2021-2022 Module Code & Title: CMP9133M Advanced Programming Contribution to Final Module Mark: 100% Description of Assessment...

Design a web application for "Muscat Road Runners with the following specifications (Use Bootstrap in all the pages. This project aims at maintaining all the information pertaining to the site's...

VIEW THE STEP-BY-STEP SOLUTION TO: Title: ABC Appliance Inherent Risk and Control Design Assessment Prepare Inherent Risks and Control Design Assessment. This course project/case... I.Title: ABC...

Assessment Details Qualification Code/Title ICT50220 Diploma of Information Technology Assessment Type Assessment -01 (Written Questions) Time allowed Due Date Location AHIC Term / Year Unit of...

Hello ther, I need help with my finance case study (Ramsey Co. Case study). Please see the attachments for details and instructions. Thanks, Ramsey Inc. 2013 Purchase Order Register March 1, 2013 -...

Please help with this. none of it is making sense to me Lolita's Lovely Locks ACCT 1060_Payroll Accounting Assignment 9_Payroll Project Narrative Introduction In this assignment you are going to...

Use the what, who, where, when, and how questions to make improvements in problem 10. In problem 10 Using the correct symbols, draw a flowchart of the following processes: a. Preparing yourself for a...

1. Kobe, aged 73, is a resident of Simcoe, Ontario. He spends five months in Arizona each winter where he owns a condominium. On March 25th of this year, Kobe died from a stroke; his lawyer Jill was...

Financial firms ( banks , insurers, financial advisers, superannuation trustees, responsible entities, lenders, brokers etc. ) should not act in theinterests of their legal beneficiaries. True or...

Case analysis for ducati Strategic management

2. Describe the challenges incurred in the training and development process at Witness.org.pg 87

4. Discuss four types of technology Wilson could use to deliver training.pg 87

2. Explain what specific training tools and processes you would use to implement a know, show, do training approach.pg 87