HTML Forms

Exam 2

In class, 4/25 (practice exam). Print your summary.html page in class 4/23 and bring it with you to the exam.
How to study:

1. read the text,
2. complete the labs,
3. take the practice exam,
4. complete and style your summary.html page, and
5. review the Bullet Points sections of the text.

Tools

HTML to PDF translator: Prince 8.0 download or online converter.

Lab 14

The Head First Contest

1. Fill out the contest form and enter the contest.
2. View the source for the contest form with your browser.
3. View the server code used to process contest entries.

The Bean Machine

1. Create a LAB14 sub-directory of you LABS directory.
2. Down and unzip LAB14.zip in that sub-directory.
3. Follow the instructions in the text to complete the Starbuzz Bean Machine order form. In form.html in the starbuzz directory:
   • Create a form element with action attribute http://www.starbuzzcoffee.com/processorder.php and method attribute POST.
   • Add text input elements for the name and address controls.
   • Add tel input and submit input elements for phone number and order controls.
   • Create a drop-down menu to choose a blend of coffee.
   • Add radio input elements to choose between whole and ground.
   • Add a Boolean checked attribute to the ground radio button.
   • Add number input and date input elements to get amount and arrival date controls.
   • Add checkbox input elements for Extras.
   • Add a textarea element for comments.
4. Style this form as directed in the text.
5. Edit the index.html file in your LABS directory to have a link to the form.html page in the starbuzz sub-directory of your LAB14 directory.
6. Examine and understand the styledform.html and styledform.css files.
7. Examine and understand the accessform.html and accessform.css files.

Pocket Calculator

1. Edit the calculator.html page you created in the last lab.
2. Wrap the table element with the opening and closing tags of a form element. (This form won't need action or method attributes.)
3. In the cell comprising the first row of the table, put a text input element with id attribute display.
4. Convert the remaining cells in the table to button input elements with appropriate value attributes.
5. View the source of calc.js in a browser
6. Save this file in your PROJECT directory.
7. Attach this file to your calculator.html page: in the head element add a script element with no content. In the opening tag of this element, set the src attribute to be the path to your calc.js file.
8. Make a working calculator by adding onclick attributes to each of the td elements that represent calulator keys. The value of these attributes should be a call to the appropriate function defined in calc.js.
9. Warning: if your calculator does not work, the problem might be a bug in my JavaScript code.

Always turn off your computer and screen before leaving the room.