HTML Forms Tutorial
The main focus of this quarter will be on adding interactive elements to a Web Site.  Interactivity via the mouse will be accomplished by JavaScript.  Keyboard interactivity will be added by a combination of HTML "Forms" and CGI, possibly with some JavaScript thrown in to mediate. It will be a little while before we get to JavaScript and CGI, but this week we get will started designing the forms for data input in HTML. 

We will start with a few tutorial chapters from the Case Western Reserve tutorials we've used in the past.  Read  Chapter 4,  and take the Quiz.  Raise your hand when you're done, and we'll come around to record your score. Go through Chapter 5, take the chapter 5 Quiz (raise your hand when done), and do Chapter 5 Exercises 1 and 2 (honor system).  Finally go through Chapter 6 and take the Quiz (raise your hand when done).  You do not need to do the Chapter 6 Exercises. To get started, point your browser to:  http://www.cwru.edu/help/interHTML/ch4.html

 Designing HTML Forms in Front Page
In this exercise, we will create a simple form to gather user feedback.  You can add whatever text you want, and format this page to look any way you want it to, but make sure to include all the elements discussed below.

  1. Open Microsoft Front Page.  Open a new page.
  2. Type in and format a couple of sentences that invite users to submit their feedback.  
  3. Go to the Insert Menu and choose Form.  Move the cursor to before the Submit Button. Type in 5 or 6 Returns to give you some room to work with.
  4. Go up to the top line of the form, and type in "Enter Name" and insert a few spaces.
  5. Go to the Insert Menu and choose Form/One-line Text Box.
  6. Click on the HTML tab to view the source. Change the name attribute to "name", and change the size to "40".  
  7. On a new line, repeat steps 4-7, substituting "Email" for "Name".
  8. On a new line, type in "How much did you like my Web Site?" and insert a few spaces.
  9. Go to the Insert Menu and choose Form/Drop Down Menu.  
  10. Right-click on the arrow of the  Drop Down Menu, and choose Form Field Properties.
  11. Change the Name to "opinion".
  12. Click on Add to add a new choice.
  13. Type in "I liked it a lot" and Click OK.
  14. Click on Add to add a new choice.  Type in "It was OK" and Click OK.
  15. Click on Add to add a new choice.  Type in "I didn't like it much" and Click OK.
  16. Click on Add to add a new choice.  Type in "It was awful" and Click OK.
  17. When you are done, click OK.
  18. On a new line, type in "Any comments about this Site?" followed by a few spaces.
  19. Go to the Insert Menu and choose Form/Scrolling Text Box.
  20. Right-click on the Text Box, and choose Form Field Properties.
  21. Change the Name to "comments".
  22. Change the width to 40 and the number of lines to 10.
  23. Be sure to save your file as instructed in class if you would like to receive credit for your work.