Introduction to the Internet-lesson 7- Obtain maps and destination information- Locate people and businesses.

Lesson 7
Learning Outcomes
This lesson will introduce you to information resources on the Web. We will also learn another new HTML command: the form. It is expected that you will use previously learned HTML commands and practices and that the new commands will build towards subsequent lessons in HTML.
When you have completed this lesson, you should be able to:
Find current news.
Get up-to-date weather information.
Obtain maps and destination information.
Locate people and businesses.
Purchase items online.
Understand copyrights, fair use, public domain, and plagiarism.
Learn how to cite Web resources.
Find library and text resources on the Web.
Locate multimedia elements on the Web, including images, audio, and video.
Create a simple Web page using a form which includes the following tags: action, method, input, submit, and select (HTML Practice Exercise #7).
Textbook Readings
Please keep in mind the preceding intended learning outcomes while reading the assigned chapters from The Internet, 9th Edition, Schneider/Evans, Course Technology, Cengage Learning.

Tutorial 4: Information Resources on the Web
SAMS Reading
This reading will prepare you for the HTML Practice exercises that accompany the first eight lessons and Assignment #5, your Web site, by explaining the basic concepts and tools that are needed to create Web pages.
OLD BOOK
REVIEW HOUR 22: Working with Web-based Forms

NEW BOOK
Chapter 26: Working with Web-Based Forms
HTML Practice Exercise #7

Since Lesson 1, you have been expanding your knowledge of HTML codes through a series of HTML practice exercises.  These exercises, used in conjunction with the assignments, will culminate in a complete Web site.

In this exercise, you will add a form to the Web site that you are working on for Assignment #5.

Forms

Forms are a method of creating interactive pages where the reader can answer questions and send their response to you. Forms are a very complex topic, and cannot be fully covered in one brief period, so this will just be a very basic introduction.

At the start of any form area, you must declare that you are making a form, and give some information to the browser about what to do with it. This is done in the form tag, through the two required parameters, action and method.

Important information:
To create a form which uses the mailto action:
murphyn@uwindsor.ca” method=”post”>
To create a form which uses a CGI script as its action:
http://www2.uwindsor.ca/cgi-bin/FormMail.pl/” method=”post”>

For the purposes of the final project, DO NOT USE the cgi-bin program but set the enctype equal to text plain.

Your code will look like this:
userid@uwindsor.ca” method=”post” enctype=”text/plain”>
The action parameter specifies where the results from the form will be sent, and the method parameter specifies how that information will be sent there. At the end of the form, you must close the form tag ().

Inside the Form

Inside the form, you can specify any kind of HTML codes you wish, but the only ones which will be important for the form are theinput types and the submit tags. The name parameter are the headings that appear on the form and help to organize the data therein.

The following are different input types:

radio – click the appropriate choice of button, ONLY ONE CAN BE CHOSEN
checkbox – click as many as you want, MULTIPLE CAN BE CHOSEN

An example of a radio box:

Do you like this example?
Yes
No
The coding that created the above radio form:

<input type=”radio” name=”vote” value=”yes” />Yes<br />
<input type=”radio” name=”vote” value=”no” />No<br />

An example of a checkbox:
Do you like?
Peanut Butter

Jelly

Tuna

Cheese

The coding that created the above checkbox form:

<input type=”checkbox” name=”multivote” value=”pb” />Peanut Butter&lt;br />
<input type=”checkbox” name=”multivote” value=”j” />Jelly<br />
<input type=”checkbox” name=”multivote” value=”tna” />Tuna&lt;br />
<input type=”checkbox” name=”multivote” value=”che” />Jelly&lt;br />
An example of a name input:

Enter Your First Name:
The coding that created the above name entry blank:
<textarea name=”firstname” rows=”1″ cols=”35″>Enter Your First Name:</textarea>

35 is the number of characters wide the input box is created.

An example of a textarea input:

Further Comments:

<– visualize this box as 50 wide and 5 rows

The coding that created the above textarea input box:
<textarea name=”comments” rows=”5″ cols=”50″>Further comments:</textarea>

Further Comments:

The box is 5 rows top to bottom, 50 columns left to right. Note that the textarea must be closed afterwards.

Select – gives you a menu list to choose from. An example:

Your overall impression of this course was:

The coding that created the above menu selection:
<select>
<option value=”Very Useful”>Very Useful</option>
<option value=”Somewhat Useful”>Somewhat Useful</option>
<option value=”Below Expectations”>Below Expectations</option>
<option value=”You Really Don’t Want To Know”>You Really Don’t Want To Know</option>
</select>

Please note that the option tag is closed at the end of each choice, and the select tag is closed at the end of all the choices. The value parameter is the text printed in the menu choices.

Submit buttons – are used to send the information off to wherever it is going. Likewise the reset button clears any entered data.

<– This is supposed to be submit button    <– This is supposed to be a reset button (Blackboard is giving me a difficult time!)

The coding that created the above submit and reset buttons:
<input type=”submit” value=”submit” />
<input type=”reset” value=”reset” />

Next Step

If you can meet the objectives stated at the beginning of Lesson 7, you are ready to proceed to the next lesson. Keep in mind the weekly schedule recommended in the course syllabus.

Please post to the Discussion area of this course Web site any questions or comments related to this lesson. Only emergency and private messages should be sent through the E-mail Instructor component of the site.

Assignment

Please complete Assignment #4 and continue working on Assignment #5. Details can be found on the course Web site under the Assignments portion.