PART 3 Divs to the rescue! Setting Up: 1. Add the following HTML after the color picker form created in Part 2 of this lab Part 3 2. Copy the form from Part 1 and paste it under Part 3 Directions: The backend developer has added a requirement to the User registration form. They would like an optional piece of data called "Bio" added to the form. "Bio" should be a multiline string/text. 1. Add elements to the form that satisfy the backend developers requirement. After adding these elements, the form should look a little cluttered. The problem is that many elements in this form are inline elements. 2. Use the Content Division element to group inline elements together in this form so that pairs of labels and fields display on new lines. 3. Use the Line Break element so that each input element is on a new line after its respective label element.
what I have so far
<!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>
<h2>Part 3</h2>
</body>
</html>
<!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>
<h2>Part 3</h2>
<form>
<div>
<label> Firstname </label> <br>
<input type="text" name="firstname" size="15" required /> <br> <br>
<label> Lastname: </label> <br>
<input type="text" name="lastname" size="15" required /> <br> <br>
<label> Email: </label> <br>
<input type="email" id="email" name="email" required /> <br>
<br> <br>
</label> Password: </label> <br>
<input type="Password" id="pass" name="pass" required> <br>
<br> <br>
</label> Bio: </label> <br>
<textarea rows="5" cols="60" name="text" placeholder="Bio"></textarea>
</div>
</form>
</body>
<!-- Please add email so can be contacted -->
</html>
Step by step
Solved in 3 steps with 3 images
