PART 4 Files Setting Up 1. Add the following HTML after the form element created in Part 3 of this lab Part 4 Directions: For this last section, we are going to create a form that interacts with a real server-side application and that includes both client-side and server-side validation. 1. Create the following form using HTML in forms.html - Upload Lab 5- Name: Sevan Golnazarian Choose File No file chosen submit 2. This form must make a POST request to https://www.sevanbadal.com/api/lab 3. Use feedback from the server to correct attributes on your form elements 4. All inputs (other than the submit input) should be required on the client device Hint: review slide 38 in week_5.pptx
this is 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>
<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>
<h2>Part 4</h2>
</body>
</html>
Step by step
Solved in 4 steps with 3 images
