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"
this is what I have so far
<!DOCTYPE html>
<html>
<head>
<h1>Lab 5</h1>
<h2>Part 1</h2>
</head>
<body>
<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>
</body>
</html>
Code :
<!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 3 steps with 4 images
