I need to make this code look like the image I am sending. I've attached a photo of the directions and what the outcome should be. <!DOCTYPE HTML><html lang="en"><head> <meta charset="utf-8"> <title>Complete a Form</title> <style> * { margin: 0; padding: 0; } body { font: 87.5% Arial, Helvetica, sans-serif; width: 500px; margin: 20px auto; padding: 20px; border: 2px solid blue; } h1 { color: blue; font-size: 140%; } h2 { font-size: 115%; padding: .5em 0; } label { color: blue; float: left; width: 8em; font-weight: bold; text-align: left; } input { width: 15em; margin: 0 0 .5em 1em; } #button, #reset { width: 7em; background-color: silver; box-shadow: 2px 2px 0 blue; } #button { margin-left: 9em; } </style></head><body><h1>Please complete our survey</h1><form id="myform" action="survey.php" method="post"> <h2>Contact information</h2> <label for="email">Email address:</label> <input type="email" name="email" id="email"><br> <label for="firstname">First name:</label> <input type="text" name="firstname" id="firstname"><br> <label for="lastname">Last name:</label> <input type="text" name="lastname" id="lastname"><br> <h2>Thank you for taking our survey!</h2> <input type="submit" name="button" id="button" value="Submit"> <inputtype="reset"name="reset"id="reset"></form></body></html> Please complete our surveyContact informationEmail address:First name:Last name:Geographic information181-4....jpgState:Zip code:Two charactersFive digitsHow did you hear about us?Web Search:0000Facebook:Twitter:Email message: OThank you for taking our survey!Submit1. Open this HTML file and run it to see that it already provides the first two headings, the firstthree fields, the last heading, and the two buttons:Resetshort_exercises\town_hall\c13x_forms.html2. Modify the attributes for the form so it uses the "get" method and submits the form to the filenamed survey data html Then test the submission of the completed form This shouldIMG_1124.jpg 1. Open this HTML file and run it to see that it already provides the first two headings, the firstthree fields, the last heading, and the two buttons:short_exercises\town_hall\c13x_forms.html2. Modify the attributes for the form so it uses the "get" method and submits the form to the filenamed survey_data.html. Then, test the submission of the completed form. This shoulddisplay a page that shows the submitted data.3. Add the autofocus attribute to the first field and the required attribute to all three of the fields.Then, test to make sure the data validation works.4. Add the "Geographic information" heading and fields. These fields should also be requiredand they should have the placeholders that are shown above. To validate the state and zipcode fields with regular expressions, you can use these patterns:[A-Za-Z] (2) and \d (5)Add the "How did you hear about us" heading and checkbox fields.5.6. Enhance the CSS in the HTML file so the form looks like the one above. In particular, youwill need to change the width of the checkboxes so they will align right.7. Do a final test to make sure everything works as it should.

HTML CODE <!DOCTYPE html> <html lang="en"> <head> <meta…

Answered: I need to make this code look like the…

Database System Concepts

7th Edition

ISBN:9780078022159

Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan

Publisher:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan

Chapter1: Introduction

Section: Chapter Questions

Problem 1PE

See similar textbooks

Related questions

Question

I need to make this code look like the image I am sending. I've attached a photo of the directions and what the outcome should be.

<!DOCTYPE HTML>

<head>

<title>Complete a Form</title>

<style>

* {

margin: 0;

padding: 0;

}

body {

font: 87.5% Arial, Helvetica, sans-serif;

width: 500px;

margin: 20px auto;

padding: 20px;

border: 2px solid blue;

}

h1 {

color: blue;

font-size: 140%;

}

h2 {

font-size: 115%;

padding: .5em 0;

}

label {

color: blue;

float: left;

width: 8em;

font-weight: bold;

text-align: left;

}

input {

width: 15em;

margin: 0 0 .5em 1em;

}

#button, #reset {

width: 7em;

background-color: silver;

box-shadow: 2px 2px 0 blue; }

#button {

margin-left: 9em;

}

</style>

</head>

<body>

<h1>Please complete our survey</h1>

<h2>Contact information</h2>

<label for="email">Email address:</label>

<label for="firstname">First name:</label>

<h2>Thank you for taking our survey!</h2>

<inputtype="reset"name="reset"id="reset">

</form>

</body>

</html>

Please complete our survey
Contact information
Email address:
First name:
Last name:
Geographic information
181-4....jpg
State:
Zip code:
Two characters
Five digits
How did you hear about us?
Web Search:
0000
Facebook:
Twitter:
Email message: O
Thank you for taking our survey!
Submit
1. Open this HTML file and run it to see that it already provides the first two headings, the first
three fields, the last heading, and the two buttons:
Reset
short_exercises\town_hall\c13x_forms.html
2. Modify the attributes for the form so it uses the "get" method and submits the form to the file
named survey data html Then test the submission of the completed form This should
IMG_1124.jpg

Expert Solution

Step by step

Solved in 3 steps with 2 images

SEE SOLUTION Check out a sample Q&A here

Knowledge Booster

Learn more about

Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.

I need to make this code look like the image I am sending. I've attached a photo of the directions and what the outcome should be. Complete a Form Please complete our survey Contact information Email address: First name: Last name: Thank you for taking our survey!