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>
Using form tag and input tag we can create . in Input tag the file type is chosen as file so that
The input will be file . All fields are mandatory to fill on submit it will make post request to url and post request use query to post.here default submission is prevented by using jquery event.
Platform used vs code.
Step by step
Solved in 2 steps with 1 images
