Forms
E03a - Form Assignment
- Note: Inspect the code in the form in the example form on the previous page for information on how to write the code for the form you will make in this assignment.
- Your table will look different than mine because mine has css applied to it.
- Reminder: To view a web page's code, use the browser's View menu and select View Source, Page Source, or something similar, or right click on a part of the web page that does not have an image or Flash on it and select Page Source, depending on the browser.
- Create a new html file.
- Save the file as:
yourlastname_E03a.html
- Create a form tag.
- Add the action attribute with this value (include quotes due to spaces being used):
"mailto:dan@gottheknack.com?subject=coursenumber yourlastname - Forms 3a&body=Data from form submission:"
- Replace coursenumber and yourlastname with the course number you have used in your email subject lines and use your last name.
- Put a table inside the form tags.
- Add enough rows to hold the objects listed below, in a style similar the example form.
- Have two cells per row.
- Put terms such as First Name, Last Name, and so forth, in the left column (first cell of each row) in bold letters.
- The form objects (text areas, radio buttons, and so forth) go in the right column (second cell of each row).
- In the steps below, please:
- The items go in the rows from top to bottom as listed, one object per row.
- For example, First name would be in the row above Last name.
- Provide both the name and id attributes in the manner of the example form, but use the terms specified below.
- The name and id must be the same. For example: name=pastry id=pastry
- First name - text object, size: 15, maximum length: 25 (name & id: first)
- Last name - text object, size: 15, maximum length: 25 (name & id: last)
- Address 1 - text object, size: 20, maximum length: 30 (name & id: adr1)
- Address 2 - text object, size: 20, maximum length: 30 (name & id: adr2)
- City - text object, size: 20, maximum length: 30 (name & id: city)
- State - make a selection menu (name & id: state) with these five options and values and a height of 3:
- Arizona (value: az)
- California (value: ca)
- Colorado (value: co)
- Nevada (value: nv)
- New Mexico (value: nm)
- Zip - text object with both a 5 character limit and 5 character maximum length. (name & id of zip)
- Radio Button group:
- Your favorite sport
- Provide options for these three sports, each with name & id attributes of sport:
- Baseball (value: base)
- Basketball (value: bskt)
- Football (value: foot)
- Give each label tags.
- Test that the buttons are mutually exclusive (which is the expected behavior with radio buttons).
- If they are not, then you are not using the same name and id with each.
- Test that clicking on each radio button and also on each of the label texts will select the button.
- Checkbox group (I'm trying to be funny here, a desperate attempt!):
- Who are your favorite Czechs?
- Provide check boxes for each of the following,, each with name & id attributes of cz:
- Alexander Dubcek (value: adu)
- Antonin Dvorak (value: adv)
- Milos Forman (value: mfo)
- Vaclav Havel (value: vha)
- Give each a label tag and a label using their full name.
- Test that the checkboxes are not mutually exclusive.
- Test that clicking in the checkbox and also on the label text will select the checkbox.
- Password style:
- Put in a password text box so for the viewer's "code name".
- Using an image to submit a form:
- Put the following in the left column.
- Use the following image as a way to submit the form, see example code. Right-click on it and save it in the same folder as your html file. Note that a submit button is often used instead of this, but I want you to be familiar with this method:
- Add a reset button in the same row as the submit button, but in the second (right column) cell.
- Please send me the file.
