Problem

In this chapter’s case study you will use the existing Pacific Trails website (Chapter 9)...

In this chapter’s case study you will use the existing Pacific Trails website (Chapter 9) as a starting point. You will add a new page to the Pacific Trails website—the Reservations page. Refer back to the site map for the Pacific Trails website in Figure. The Reservations page will use the same page layout as the other Pacific Trails web pages. You’ll apply your new skills from this chapter and code a form in the content area of the Reservations page.

Pacific Trails Resort site map.

You have four tasks in this case study:

1. Create a folder for the Pacific Trails website.
2. Modify the CSS to configure style rules needed for the Reservations page.
3. Create the Reservations page: reservations.html. Your new page will be similar to Figure when you have completed this step.
4. Configure FITML5 form control features on the Reservations page.

The new Pacific Trails Reservations page.

Task 1: Create a folder called chlOpacific to contain your Pacific Trails Resort website files. Copy the files from the Chapter 9 Case Study ch9pacific folder to your new chlOpacific folder.
Task 2: Configure the CSS. Review Figure and the wireframe in Figure. Notice how the text labels for the form controls are on the left side of the content area but contain right-aligned text. Notice the empty vertical space between each form control. Open pacific.css in a text editor. Place your cursor on a new blank line above the media queries.
a. Configure a label element selector. Set left float, block display, right alignment for text, a width of 120 pixels, and an appropriate amount of right padding.
b. Configure the input element and textarea element selectors. Set block display and 20 pixels of bottom margin.
c. Configure style rules to optimize the display on smartphone-sized mobile devices by rendering the label text above each form control. Add the following style rule to the media query that targets a maximum width of 480 pixels:
label { float: none;text-align: left; }
Save the pacific.css file.
The sketch of the form.
Task 3: Create the Reservations Page. A productivity technique is to create new pages based on existing pages so you can benefit from your previous work. Your new Reservations page will use the index.html page as a starting point. Open the index.html page for the Pacific Trails Resort website in a text editor. Select File > Save As and save the file with the new name of reservations.html in the chlOpacific folder.
Now you are ready to edit the reservations.html file.
1. Modify the page title. Change the text contained between the and tags to “Pacific Trails Resort :: Reservations”.
2. Replace the text contained within the
tags with “Reservations at Pacific Trails”.
3. Delete the image, the paragraph, and the unordered list. Do not delete the logo, navigation, contact information, or footer areas of the page.
4. Position your cursor on a blank line below the h2 element. Configure an h3 element with the following text: “Contact Us Today!”
5. Position your cursor on a blank line under the h3 element. You are ready to configure the form. Begin with a
tag that uses the post method and the action attribute to invoke server-side processing. Unless directed otherwise by your instructor, use http://webdevbasics.net/scripts/pacific.php as the value of the action attribute.
6. Configure the form control for the First Name information. Create a element that contains the text “First Name:”. Create a text box configured with “myFName” as the value of the id and name attributes. Use the for attribute to associate the label element with the form control.
7. In a similar way, configure form controls and label elements to collect the following information: Last Name, E-mail Address, and Phone Number. Use myLName, myEmail, and myPhone as the id and name values for the last name, e-mail, and phone form controls. Also set the size of the e-mail text box to 40 and the maxlength of the phone text box to 12.
8. Configure the Comments area on the form. Create a label element that contains the text “Comments:”. Create a textarea element configured with “myComments” as the value of the id and name attributes, rows set to 2, and cols set to 32. Use the for attribute to associate the label element with the form control.
9. Configure the submit button on the form. Code an input element with type="submit" and value="Submit".
10. Code an ending
tag on a blank line after the submit button.
Save your reservations.html page and test it in a browser. It should look similar to the page shown in Figure. If you are connected to the Internet, submit the form. This will send your form information to the server-side script configured in the
tag. A confirmation page similar to Figure will be displayed that lists the form control names and the values you entered.
The form confirmation page.
Task 4: Configure the Form with HTML5 Attributes and Values. Get more practice with the new HTML5 elements by modifying the form on the Reservations page to use HTML5 attributes and values. You’ll also improve the form by adding form controls to accept the date and number of nights. Modify the reservations.html file in a text editor.
1. Add a paragraph above the form to indicate: “Required fields are marked with an asterisk *”
2. Use the required attribute to require the first name, last name, e-mail, and comments form controls to be entered. Add an asterisk at the beginning of each label text.
3. Configure the input element for the e-mail address with type="email".
4. Configure the input element for the phone number with type="tel".
5. Code a label element containing the text “Arrival Date” that is associated with a calendar form control to accept a reservation arrival date (use type="date").
6. Code a label element containing the text “Nights” that is associated with a spinner form control to accept a value between 1 and 14 to indicate the number of nights for the length of stay (use type="number"). Use the min and max attributes to configure the range of values.
Save your file. Display your web page in browser. Submit the form with missing information or only a partial e-mail address. Depending on the browser’s level of HTML5 support, the browser may perform form validation and display an error message Figure shows the Reservations page rendered in the Google Chrome browser with an incorrectly formatted e-mail address.
Task 4 in this case study provided you with additional practice using new HTML5 attributes and values. The display and functioning of browsers will depend on the level of HTML5 support.
See http://www.standardista.com/html5/html5-web-forms for an HTML5 browser support list.
HTML5 attributes and values are coded in the form.