ITSE 1411 Beginning Web
HTML Module 4 Assignment

Assignment
- Continue your Portfolio
- Copy all your files that pertain to your portfolio from your module3 folder to your module4 folder.
- Open your home.htm page from your module4 folder.
- Add multi-media of your choice to a page in your project. You may choose from any of the examples in Chapter 11. Please choose anything except Flash since Flash doesn't work on all devices.
- The form requirement for this module will come from the JavaScript text.
- Forms -- CV Tech site(JavaScript)
- Get CVTech files Chapter 5 from your instructor (in instructor files from publisher), and unzip them into your module4 folder. The publisher included the PSD (Photoshop) files. You do not need to make any changes to those files.
- Add the validation image links to all html pages so that you can test your html and css.
- Follow the steps for starting the subscription page and adding the submit and reset buttons, page 255, 1-4
- Follow the steps for adding text <input> elements to the Subscription form, pages 260 - 262, 1-5
- Follow the steps for adding a function etc., pages 263 - 264, 1-5
- Follow the steps for adding a password to the Subscription form, page 265, 1 - 3
- Follow the steps for adding a password confirmation to the Subscription form, page 266, 1-4
- Follow the steps to add radio buttons to the Subscription form, pages 269 - 270, 1 - 5
- Follow the steps to add month and yearly radio buttons to the Subscription form, pages 271 - 272, 1 - 5
- Be sure to add link to validation.js to the bottom of the page.
- Save the document as subscription1.htm. You will continue to save the document with different names in case you make an error and you have a backup. If you copy over your subscription pages, you do not need to redo.
- subscription2 page -- Check Box Practice
- If necessary, open subscription1.htm from your module4 folder in your editor.
- Add the coding from page 274 of your JavaScript text.
- Save the document as subscription2.htm.
- Compare your page to figure 5-13 page 274.
- subscription3 page -- Using DOM to Copy Elements
- You should not require the user to enter the same data rather ask them if the data is the same and copy it for them when it is.
- If necessary, open your subscription2.htm page in your editor.
- Add the coding from pages 275 - 276 of your JavaScript text.
- Save the document as subscription3.htm.
- subscription4 page -- Selection Lists
- Selection lists give users a list of options from which to choose. One advantage to using a selection list is that the responses are limited and cannot be mis-keyed. The select element must be contained within a block-level element. You can control the number of options that are listed or use a drop-down list or use a combination of both.
- If necessary, open your subscription3.htm page in your editor.
- Save as subscription4.htm.
- Add the coding from page 279 of the text. The option element is the menu option of the selection list.
- Save the document.
- subscription5 page -- Adding Options
- Adding Options to a Selection is not consistent among different browsers. Use it with care.
- If necessary, open your subscription4.htm page in your editor.
- Save as subscription5.htm.
- Add the coding from pages 283 - 284 of the text.
- Save the document.
- subscription6 page -- Removing Options
- A single opting can be removed from a selection list by using the index of that option. Remaining elements will be reordered. To remove all options, use the length property.
- If necessary, open your subscription5.htm page in your editor.
- Save as subscription6.htm.
- Add the coding from pages 285 - 286 of the text.
- Save the document.
- subscription7 page -- Changing Options
- To change an option in a list, assign a new value to the option.
- If necessary, open your subscription6.htm page in your editor.
- Save as subscription7.htm.
- Add the coding from page 289 of the text.
- Save the document.
- subscription8 page -- Submitting and Resetting Forms
- Click on FormProcessorExplanation.html
- Right click on FormProcessorExplanation.html.
- How do you get to this page? From another page that sends you. The input type submit (from a form, not on this page) creates a submit button that is used with the form's action attribute. You may use the value attribute to indicate what is displayed on the button, or use the default "Submit Query". To use an image for the submit button create an input type image and include the src attribute to show the path of the image.
- View Source.
- Save as FormProcessorExplanation.html.
- If necessary, open your subscription7.htm page in your editor.
- Save as subscription8.htm.
- Add the coding from pages 291 - 292 of the text.
- Save the document.
- subscription9 page -- Validation
- FYI: The onsubmit event handler (when used) is executed when the submit button is pressed. The onsubmit event handler is usually used to first call a function to validate the values entered by the user before the page is subsequently submitted to the server or to another page.
- If necessary, open your subscription8.htm page in your editor.
- Save as subscription9.htm.
- The onsubmit and onreset buttons are contained in step 3 on page 292. You can wait to add that coding in the next step.
- In the confirmReset() function notice that the author puts
if(resetForm == true)return true;
return false;
This is a bit "silly" unless resetForm has not been assigned a value when it is false. It makes a little more sense to just say:
return resetForm;
In that case, either a true or false is returned depending on the value of resetForm. There is no need to say, if you are true, return a true. In all other cases, return false.
- subscription10 page -- Validating Text and Password Boxes
- If necessary, open your subscription9.htm page in your editor.
- Save as subscription10.htm.
- Add the coding from pages 293 - 294 of the text.
- Save the document.
- subscription11 page -- Validating Radio Buttons
- If necessary, open your subscription10.htm page in your editor.
- Save as subscription11.htm.
- Add the coding from pages 295 - 296 of the text.
- The first text paragraph on page 297 says "subscription check boxes". Should say "technology check boxes".
- Save the document.
- subscription12 page--Validating Selection Lists
- If necessary, open your subscription11.htm page in your editor.
- Save as subscription12.htm.
- Add the coding from page 298 of the text.
- Save the document.
- Upload the module4 folder containing all relevant pages to your module4 folder on your site.
- Using http, go to cois-linux.austincc.edu/~login/module4/home.htm (where login is the login name posted in Blackboard). Test that your multi-media page validates in both HTML5 and CSS.
- If there are any errors, correct, reupload, and test.
- Test that your Add Journal, Delete Journal, Clear List, and Change Journal buttons work.
- Test to make sure that your zip codes and phone numbers test to make sure the fields are numeric.
- Test to make sure that your password validation works.