Problem

In this chapter’s case study you will use the existing JavaJam website (Chapter 9) as a st...

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

JavaJam site map.

You have four tasks in this case study:

1. Create a new folder for this JavaJam case study.
2. Modify the style sheet (javajam.css) to configure style rules for the new Jobs page.
3. Create the Jobs page: jobs.html. Your new page will be similar to Figure 10.38 when you have completed this step.
4. Configure HTML5 form control features on the Jobs page.

The new JavaJam Jobs page.

Task 1: Create a folder called chlOjavajam to contain your JavaJam Coffee House website files. Copy the files from the Chapter 9 Case Study ch9javajam folder to your new chlOjavajam folder.
Task 2: Configure the CSS. Review Figure 10.38 and the wireframe in Figure 10.39. 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 javajam.css in a text editor. Place your cursor on a new blank line above the media queries.
The sketch of the form.
1. Configure a label element selector. Set left float, block display, right alignment for text, and assign a width of 120 pixels, and an appropriate amount of right padding.
2. Configure the input element and textarea element selectors. Set block display and 20 pixels of bottom margin.
3. 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 javajam.css file.
Task 3: Create the Jobs Page. Use the Menu page as the starting point for the Jobs page. Launch a text editor and open menu.html. Save the file as jobs.html. Modify yourjobs.html file to look similar to the Jobs page (shown in Figure) as follows:
1. Change the page title to an appropriate phrase.
2. Replace the text contained within the
tags with “Jobs at JavaJam”.
3. The Jobs page will contain a paragraph and a form in the content div. Delete the table in the content div. Add a paragraph that contains the following text: "Want to work at JavaJam? Fill out the form below to start your application.”
4. Prepare to code the HTML for the form area. Begin with a form element that uses the post method and the action attribute to invoke server-side processing. Unless directed otherwise by your instructor, configure the action attribute to send the form data to http://webdevbasics.net/scripts/javajam.php.
5. Configure the form control for the Name information. Create a label element that contains the text “Name:”. Create a text box configured with “myName” as the value of the id and name attributes. Use the for attribute to associate the label element with the form control.
6. Configure the form control for the E-mail information. Create a label element that contains the text “E-mail:”. Create a text box configured with “myEmail” as the value of the id and name attributes. Use the for attribute to associate the label element with the form control.
7. Configure the Experience area on the form. Create a label element that contains the text “Experience:”. Create a textarea element configured with “myExperience” as the value of the id and name attributes, rows set to 2, and cols set to 20. Use the for attribute to associate the label element with the form control.
8. Configure the submit button. Code an input element with type="submit" and value="Apply Now".
9. Code an ending tag on a blank line after the submit button.
Save your file and test your web page 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 serverside script configured in the form 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 Jobs page to use HTML5 attributes and values. Modify thejobs.html file in a text editor.
1. Add the following sentence to the paragraph above the form: “Required fields are marked with an asterisk *”.
2. Use the required attribute to require the name, e-mail, and experience 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. Code a label element containing the text “Start Date” that is associated with a calendar form control to accept the date that the applicant is available to start the job (use type = "date").
Save your file and display your web page in a 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 Jobs page rendered in the Firefox browser with an incorrectly formatted e-mail address.
The Jobs page with HTML5 form controls.
Task 4 in this case study provided you with additional practice using the 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.