HTML Forms Assignment #5 Solution

Before you begin this assignment, you should download the assignment’s submission file, “YourName-html-a5.docx”, from Canvas. This is the file you will be working on and eventually submitting into Canvas. It is a Microsoft Word 2013 file, so you must have access to Word in order to edit that assignment file.

Part 1: “HTML 5 Forms” YouTube Video on Creating a Feedback Form Page

1) Before the video:

For this part of the assignment, you are asked to watch, listen, and perform the same steps as are done in the video. To do so, you will need to have a set of data files ready for your own use to match those that are being used at the start of the video. Those data files are available within Canvas on the Assignment page’s downloads for assignment 5 (“html-a5p1.zip”). Download the video starter zip file and extract the folder of files within it.

Note that the editor being used in this video is Brackets, which (optionally) can be downloaded here.

2) During the Video

The link to this YouTube video appears below. By doing what the video does, you will be building a feedback form page. Your work can be saved on any storage medium and folder that you like. Your feedback form page should begin and end exactly like the one created in the video. After the video, you will be asked to make some changes to your page before submitting your assignment. But for now, just try to follow along and make the exact work shown in the video.

“HTML 5 Forms” video link: https://www.youtube.com/watch?v=wVD6SbVTMls (39 min video)

Note that closed-captioned capabilities are built into this video, it just needs to be turned on at YouTube.

3) After the Video

After completing your work from the hybrid video, make the following changes to your feedback page:

As usual, your full name should appear instead of “Joe Student” everywhere that it exists within the feedback page (in the title, h1, and footer areas).
Add an option for “Pricing” into the “Your Feedback is Regarding” select list. Place it just above the “Other” option. Use all appropriate HTML for this new option like the others around it.
Make the “Name” text box a required form entry (like the feedback comments were in the video.)
Add placeholders into both of the required fields that says “** Required Entry **” (without the quotes) so that users know they must fill those out before submitting.
Adjust the feedback comments area so that it will hold up to five lines of text before needing a vertical scroll bar.
Using CSS, increase the width of the "Email" text box to at least 250 pixels (even more as needed so that it can fully display your complete rcc email address.) You will be asked to fill in your email address into that text box before your screen shot is taken below. To do so, use that text box's "id" of "emailaddy" to make a proper CSS selector in the provided "form.css" stylesheet file and set an appropriate width, such as: #emailaddy { width: 250px;}
Screenshot Needed: When your “feedback form” page is complete with all of the above steps, preview it in the browser. Then while in the browser, do the following to the form elements before taking your screen shot:

Leave the “Comments” area empty (so the placeholder text is still showing)
Choose “Pricing” from the “regarding” select drop down list
Leave the “Name” text box empty (so the placeholder text is still showing)
Check only the “Email” check box (leave the others unchecked)
Leave the “Phone” area empty (so the placeholder text is still showing)
Fill in your actual rcc student email into the “Email” field (it must fit in there completely)
Reduce the width of your browser window as needed until there is not much wasted space
Make sure that the entire form is visible in the browser window (or use 2 screen shots)



Now you are ready to take your screen shot. It should include only the browser window (in Windows, you can use “ALT-PrintScreen” key combination to get that done. Or you can use the “Snipping Tool” from the “Accessories Group” to capture the area around the browser. Paste your screenshot(s) into your Word document in the indicated area for part 1 of this assignment.




HTML Code Needed: With your completed feedback form page (“feedback.html”) open in your editor (such as Brackets), copy and paste all of the HTML code from your editor into the “part 1 HTML code” area of the Word document you will be submitting for this assignment. Adjust the font of this code to “Courier New” or another monospace font and bold it if that helps to make it more readable. Make sure all of your code is visible within the Word document after pasting.







Part 2: Textbook Chapter 6: Creating a Form On A Web Page

Read and follow along the steps and instructions given within chapter 6 (pages 283 - 314) using the link below to obtain the chapter 6 starter files. In completing these pages from your book, you will create a Web page form for "Blue Wav Music". The form is intended to be used for customers to fill out online to indicate the types of music they like to hear the most. To create the proper form page and produce the right items to submit, keep the following items in mind.




Obtain the chapter 6 files you’ll need for this part of the assignment by downloading the “zip” file below. The book will assume you have these files.

Data files link: http://www.faculty.rcc.edu/mcleod/html/handouts/a5p2.zip
After you download the given zip file, you should extract the folder and 2 files within it and use them as you work through the tutorial in your textbook. The actions you need to take (from the book) will be indicated by the red circled and numbered steps.
There is an error in the HTML code provided by the textbook publisher that you need to fix. Notice on line 14 that the line ends with "</td" even though there is no surrounding table. Remove that closing "td" tag, leaving the "img" tag to its left and the surrounding "header" tags intact.
When you get to step 1 on page 295, and are entering the paragraph text shown in table 6-4 for line 17, enter your own full name instead of the word "We" at the beginning of the paragraph. For example, if your name is "Joe Student" the paragraph would begin with... "Joe Student would like to know...".
When you get to the part of the form where you are creating checkboxes for the "types of music that you prefer", create a checkbox for "jazz" (code it like the other existing checkboxes) and maintain the alphabetical order of these checkboxes by putting "jazz" between the existing "folk" and "Latin" checkboxes. (And if your own favorite music genre is not listed, feel free to add a checkbox in there for it too, but if you do it must be coded correctly and placed alphabetically.)
When you get to the part of the form where you are creating the select list for "Favorite Internet radio station" choices, add "Spotify" to the list of choices (code it like the other existing select list options). Note: do not add Spotify to the group of radio buttons, add Spotify to the select list of options. Place it into the list at the end so that the alphabetical list is maintained. (And if your own favorite Internet radio station is not listed, feel free to add it to the list too, but if you do it must be coded correctly and placed alphabetically.)
Test your form page thoroughly in the browser making sure it functions as intended.
Screenshot Needed: When your “Blu Wav Music” form page is complete, capture a screen shot of your page displaying in the browser so that the entire page is showing up. Your screen shot should capture just the browser at a reasonable size (so that no other parts of the screen are showing outside of the browser window and so that the browser window itself is only as wide as needed to fit the form information appropriately.) Use 2 screenshots if you cannot capture it all with one -- I need to see the full form to give you full credit. To capture a screen shot in windows, you can use the “Snipping Tool” from the “Accessories Group” or the “ALT-PrintScreen” key combination. Paste your screenshot(s) into your Word document in the indicated area.



HTML Code Needed: With your completed “Blu Wav Music” form page (“bluwavform.html”) open in your editor, copy and paste all of the HTML code from your editor into the “part 2 HTML code” area of the Word document you will be submitting for this assignment. Adjust the font of this code to “Courier New” or another monospace font and bold it if that helps to make it more readable. Make sure all of your code is visible within the Word document after pasting.



That concludes the work for this assignment. Save your Word file, make sure your own name is part of the file’s name. After saving, exit Word, and then submit your Word file (the one containing the screen shots and the HTML code for both parts of this assignment. You should submit just this one Word file. Do not submit other files. Submit only once, when you are all done. Remember that lateness deductions will occur if it is after the deadline so get it in on time if you can.