Colorful Interactions Setting Up: 1. Add the following HTML after the form created in Part 1 of this lab Part 2 2. Add the following Script element inside of the Head element in form.html: 3. Add the following Script element above the closing tag of the Body element: Directions: Not all forms need to interact with a server. In this section, you will create a form that changes the background color of the Body element in forms.html. HTML Element Requirements: • 1x Form • 1x Fieldset • 1x Legend • 1x Input You will need to add the correct attributes to this form's elements for this to work. When you have finished, the user should be able to select a color from a color picker widget. After selection has been made (and the user clicks outside of the color picker), the background of forms.html should change color. Hint: • The JavaScript in the Body element is looking for an element with an id of "color"
Colorful Interactions Setting Up: 1. Add the following HTML after the form created in Part 1 of this lab Part 2 2. Add the following Script element inside of the Head element in form.html: 3. Add the following Script element above the closing tag of the Body element: Directions: Not all forms need to interact with a server. In this section, you will create a form that changes the background color of the Body element in forms.html. HTML Element Requirements: • 1x Form • 1x Fieldset • 1x Legend • 1x Input You will need to add the correct attributes to this form's elements for this to work. When you have finished, the user should be able to select a color from a color picker widget. After selection has been made (and the user clicks outside of the color picker), the background of forms.html should change color. Hint: • The JavaScript in the Body element is looking for an element with an id of "color"
Computer Networking: A Top-Down Approach (7th Edition)
7th Edition
ISBN:9780133594140
Author:James Kurose, Keith Ross
Publisher:James Kurose, Keith Ross
Chapter1: Computer Networks And The Internet
Section: Chapter Questions
Problem R1RQ: What is the difference between a host and an end system? List several different types of end...
Related questions
Question
what I have so far
<!DOCTYPE html>
<html>
<head>
<h1>Lab 5</h1>
<h2>Part 1</h2>
</head>
<body bgcolor="Lightskyblue">
<br>
<br>
<form>
<label> Firstname </label>
<input type="text" name="firstname" size="15"/> <br> <br>
<label> Lastname: </label>
<input type="text" name="lastname" size="15"/> <br> <br>
Email:
<input type="email" id="email" name="email"/> <br>
<br> <br>
Password:
<input type="Password" id="pass" name="pass"> <br>
<br> <br>
</form>
</body>
</html>
</body>
</html>
Transcribed Image Text:Colorful Interactions
Setting Up:
1. Add the following HTML after the form created in Part 1 of this lab
<h2>Part 2</h2>
2. Add the following Script element inside of the Head element in form.html:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
3. Add the following Script element above the closing tag of the Body element:
<script>
$ ("#color").change ( function () {
$ ("body").css ('background', $(this).val());
}) ;
</script>
Directions:
Not all forms need to interact with a server. In this section, you will create a form that changes
the background color of the Body element in forms.html.
HTML Element Requirements:
• 1x Form
• 1x Fieldset
• 1x Legend
• 1x Input
You will need to add the correct attributes to this form's elements for this to work. When you
have finished, the user should be able to select a color from a color picker widget. After
selection has been made (and the user clicks outside of the color picker), the background of
forms.html should change color.
Hint:
• The JavaScript in the Body element is looking for an element with an id of "color"
Expert Solution
Code of Program
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<h1>Lab 5</h1>
<h2>Part 1</h2>
</head>
<body bgcolor="Lightskyblue">
<br>
<br>
<form>
<label> Firstname </label>
<input type="text" name="firstname" size="15" /> <br> <br>
<label> Lastname: </label>
<input type="text" name="lastname" size="15" /> <br> <br>
Email:
<input type="email" id="email" name="email" /> <br>
<br> <br>
Password:
<input type="Password" id="pass" name="pass"> <br>
<br> <br>
</form>
<h2> Part 2</h2>
<form>
<fieldset>
<legend>Color Picker Legend Tag here:</legend>
<label for="color">Background Chooser:</label>
<input type="color" class="theme" id="color" />
</fieldset>
</form>
<script>
$("#color").change(function () {
$("body").css("background", $(this).val());
});
</script>
</body>
</html>
Step by step
Solved in 4 steps with 3 images
Recommended textbooks for you
Computer Networking: A Top-Down Approach (7th Edi…
Computer Engineering
ISBN:
9780133594140
Author:
James Kurose, Keith Ross
Publisher:
PEARSON
Computer Organization and Design MIPS Edition, Fi…
Computer Engineering
ISBN:
9780124077263
Author:
David A. Patterson, John L. Hennessy
Publisher:
Elsevier Science
Network+ Guide to Networks (MindTap Course List)
Computer Engineering
ISBN:
9781337569330
Author:
Jill West, Tamara Dean, Jean Andrews
Publisher:
Cengage Learning
Computer Networking: A Top-Down Approach (7th Edi…
Computer Engineering
ISBN:
9780133594140
Author:
James Kurose, Keith Ross
Publisher:
PEARSON
Computer Organization and Design MIPS Edition, Fi…
Computer Engineering
ISBN:
9780124077263
Author:
David A. Patterson, John L. Hennessy
Publisher:
Elsevier Science
Network+ Guide to Networks (MindTap Course List)
Computer Engineering
ISBN:
9781337569330
Author:
Jill West, Tamara Dean, Jean Andrews
Publisher:
Cengage Learning
Concepts of Database Management
Computer Engineering
ISBN:
9781337093422
Author:
Joy L. Starks, Philip J. Pratt, Mary Z. Last
Publisher:
Cengage Learning
Prelude to Programming
Computer Engineering
ISBN:
9780133750423
Author:
VENIT, Stewart
Publisher:
Pearson Education
Sc Business Data Communications and Networking, T…
Computer Engineering
ISBN:
9781119368830
Author:
FITZGERALD
Publisher:
WILEY