HTML Forms

This exercise is intended to familiarize you with HTML forms. I will acquaint you with the code and then you will modify some of it.

Forms are usually used to send data to servers and often to request a response in return based on the the information sent. Sending data alone is called the POST method and sending a request for return information is called the GET method. They use different means for conveying data.

The main things to know about HTML form code:

• Forms consist of "objects" such as checkboxes, radio buttons, and the submit button.
• All form objects are nested within a pair of FORM tags.
• Each object in a form has a name attribute that is used for database purposes. The label text that appears visible to the viewer need not conform to the name attribute.
• When a form object is selected by a viewer or has text entered into it, that information is coupled with the name attribute when it is sent to the server. The result: a name-value pair. This is a term that is often referred to in the world of databases on the Web. For those familiar with databases, it's the equivalent of a field and a specific record's entry into that field. An example would be: name=Dan
• As you will see, there are different types of form entries possible. In the code, their names and associated code are fairly obvious. They are often referred to as INPUT TYPE. Many have additional attributes available. As you look at the code you will probably figure them out.

The more common form objects:

• TEXT means a single row text box
• TEXTAREA means a multi-row text box
• SELECT is a selection list that uses a pulldown menu. Each choice is an OPTION.
• RADIO is a radio button (the round things; normally you can only select one at a time)
• CHECKBOX is just what its name implies

Your exercise includes modifying the form choices below. This form is also designed to send the data entered into it to anyone with an email account. You will be modifying the code so that you can send the form information to your own email account. You may find this useful for your own Web site.

Your exercise:

1. Save this file as H01_yourlastname.html
2. Modify the code from the form below to include the following. You should be able to figure out how to do this by looking at the existing code:
   1. Add an additional meal time of your choice: give it a unique "value" and label.
   2. Change "spicy" to "HOT", changing both the label and the value.
   3. Add an additional dietary restriction of your choosing: give it its own "value" (but reuse the attribute name: restrict) and its own text label.
   4. Find the email address in the opening FORM tag. Change it to your own email address.
   5. Modify the value of the submit button so that the button reads: "Submit Information" instead of "Submit-Merci".
3. Save the file and open it in your browser.
4. Fill out the form, selecting the new items you created as your choices.
5. Press the submit button and see if you can submit the information. If so, you will get the form's results in your email. NOTE: there may be restrictions on your network that prevent this. Successfully sending the email is not required.
6. Online students: send me the file.

Chef Charles's Chapeau Club

© 2008 Dan Vaughan