Lab 2: Creating Two Forms for Steve’s Screen Services
Problem: You work for a screening company called Steve’s Screen Services that specializes
in screening, cleaning, and repairing screened patios. The company has asked you to create
a responsive website. You have already created the website, but now need to create the Quote
and Contact Us pages. You add and style a form for both pages. Style the webpages as shown
in Figure 8–66 and Figure 8–67 for mobile, tablet, and desktop viewports.

Instructions: Perform the following tasks:
1. Open your text editor, open the stevescreen.html template file in the lab2 folder, and then use
    it to create the contact.html file.
2. In the contact.html document, update the comment at the top of the page to include today’s
    date, and then create an paragraph element within the main element:

     <p>For more information about our services, please complete the form below.</p>.

3. Create the following form below the paragraph element within the main element:

<form>
<label for="fName">First Name:</label>
<input type="text" name="fName" id="fName">
<label for="lName">Last Name:</label>
<input type="text" name="lName" id="lName">

<label for="email">Email Address:</label>
<input type="email" name="email" id="email">
<label for="phone">Phone Number:</label>
<input type="tel" name="phone" id="phone">
<label for="reference">Referral Source:</label>
<select name="reference" id="reference">
<option value="ad">Coupon</option>
<option value="friend">Friend</option>
<option value="google">Google</option>
<option value="social">Social Media</option>
<option value="other">Other</option>
</select>

<label for="questions">Questions:</label>
<textarea id="questions" name="questions" rows="3" cols="25"></textarea>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>

4. Create a new paragraph element below the form element, <p>Our office number is
(555)555-2564 and our email address is steve@screen.net</p>.

5. In the screenstyles.css file, modify the comment at the top of the page to include today’s date.
6. In the screenstyles.css file, create the following new style rules above the media queries and
    include comments for each:

input, select, textarea {
display: block;
margin-bottom: 1em;
}
label {
display: block;
}

7. In the screenstyles.css file, create the following new style rules within the tablet the media
query and include a comment:

label {
float: left;
padding-right: 0.5em;
text-align: right;
width: 8em;
}

8. Save all fles and open the contact.html page within a browser and view the page in all three
    viewports, as shown in Figure 8–66.
9. Open your text editor, open the stevescreen.html template file in the lab2 folder, and then use
     it to create the quote.html file.

10. In the quote.html document, update the comment at the top of the page to include today’s date,
     and then create an paragraph element within the main element: <h3>We provide free,
    no-obligation quotes. Complete the form below and we will contact you within 24 hours with your free quote.</h3>.
11. Create the following form below the paragraph element within the main element.

<form>
<label for="fName">First Name:</label>
<input type="text" name="fName" id="fName">
<label for="lName">Last Name:</label>
<input type="text" name="lName" id="lName">

<label for="email">Email Address:</label>
<input type="email" name="email" id="email">
<label for="phone">Phone Number:</label>
<input type="tel" name="phone" id="phone">
<label for="area">Patio Size:</label>
<textarea name="area" id="area" rows="2" cols="15"></textarea>
<p>Please indicate the type of service needed:</p>
<ul>
<li><input type="checkbox" name="ns" id="ns" value="ns"
class="svc">New Screen Patio</li>
<li><input type="checkbox" name="srepair" id="srepair"
value="srepair" class="svc">Small Repair</li>

<li><input type="checkbox" name="lrepair" id="lrepair"
value="lrepair" class="svc">Large Screen Repair</li>
<li><input type="checkbox" name="hw" id="hw" value="hw"
class="svc">Door and Hardware Replacement</li>
</ul>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>

12. In the screenstyles.css file, create the following new style rules above the media queries and
      include comments for each:

form ul {
list-style-type: none;
}
.svc {
display: inline-block;
}

13. Save all fies, open the quote.html page within a browser, and then view the page in all three
      viewports, as shown in Figure 8–67.
14. Validate your HTML code and fix any errors.
15. Validate your CSS code and fix any errors.
16. Submit your assignment in the format specified by your instructor.
17. Research the requirements to submit a form to a server for processing and provide a
       summary of your findings.