In-Class exercise: HTML, Forms, and HTTP

HTML

1. Create an HTML page on your local machine named foo.html. At a minimum, it should have HTML and BODY tags.
2. Open the page in your browser.
   • What is the URL of the page?
   • What is the protocol of that URL?
3. Edit the page so that its title is HTML and Forms and that is has an H1 header that is the same.
   • Where does the title of the page appear in the browser?
   • Where does the H1 header of the page appear in the browser?

Forms and HTTP

1. Create a form in your HTML page.

   Make the action for the form be https://www.cs.hmc.edu/~rhodes/cgi-bin/query.py. The form should have two groups of radio buttons: one for color, and the other for compass direction. In addition, it should have a group of three checkboxes.

   It should have two input fields, one to enter a name, and the other to enter an age.

   Finally, it should contain a submit button.

2. Open the Chrome Developer Tools (View/Developer/Developer Tools) and select the Network pane.
3. Enter information into the form and click the submit button.
   • When you submit this form, what URL does the browser request?
   • How are the values in the form sent to the server?
   • Where does the "Submitted Form Data" page (displayed after you click the submit button) come from?
4. Change the form tag in your HTML page so that the values in the form are sent using a POST method rather than a GETmethod.
   • When you submit this form, what URL does the browser request?
   • How are the values in the form sent to the server?
5. Try adding a date input type to the form.
   • Does it have special UI on Firefox? On Chrome? On Safari?
   • How does the UI degrade for browsers that don't support it?
6. Make sure that the form is easy to use. Ensure there are labels, that the two radio groups are separate, and that tabbing tabs through the input fields appropriately.
   • What does the for attribute of a label do?
   • Why is the UI element called a radio button?
   • How can you preselect one of the radio buttons?
7. Copy your html page to a server so that you can access it using the html protocol rather than the file protocol.
   Use Github Pages to host your html page.
   1. Create a Github repo named username.github.io
   2. Create a file (using the Github web interface) and copy the contents of your html page to it.
   3. Commit the file contents.
   4. Your webpage will be available within a minute or two at https://username.github.io/file.html where file.html is the name of the file you created in step 2.
8. Open that URL on your phone.
   • Does the date input type have a special UI?
   • What about the age field? What kind of keyboard should come up when the user taps on that field?
9. Update the form, if necessary, so that an appropriate keyboard is displayed when the user edits the age field.
   • What other keyboards can you make appear (based on different input types)?