Transcript CIS101 week 08 honors

CIS101
Introduction to Computing
Week 08
Agenda






Your questions
JavaScript text
Resume project
HTML Project Six
This week online
Next class
CIS101 JavaScript Text


JavaScript Text is in the PLV bookstore
Bring it to class next week
The resume project





Final resume due next class meeting
Counts as 10% of final grade
Will be graded on A, B, C scale
Complete resume along with any
required image files must be uploaded
to your personal Web space
Link from index.htm to your resume
What to hand in

Submit printout of html code


Submit Printout of resume


Open resume code in 1st page 2000 then
select File, print
Open resume in browser then select File,
print
Include your name on all printouts!
Discussion board


This week:
Chandra and Melissa are moderating
the discussion
HTML Project Six






Describe the different form controls
Use the <FORM> tag
Use the <INPUT> tag
Create radio buttons
Create a text field
Create a textarea field
Project six cont.






Use the <SELECT> tag
Use the <OPTION> tag
Create a selection menu
Insert options into a selection menu
Create a Submit button
Create a Reset button
What are forms?


Forms allow Web sites to collect and submit
information in an automated standardized
way
Forms interact with Web page visitors in a
variety of ways:




Get feedback about the Web page
Find out who is visiting the Web page
Sell products or services
Act as a guestbook
Creating Web Page forms

A Web page form has three
components



FORM tag, which contains the information
necessary to process the form
Input controls
Submit button, which sends the data to be
processed
Input controls



An input control is a type of input
mechanism on a form
A data input control allows a user to
simply make a selection
A text input control allows the user to
enter text into the control (see table 6-1
on p. 6.06)
Input controls

Each input control has the following one or
two attributes




NAME: Identifies the specific information that is
being sent
All controls have a NAME
VALUE: The data that is contained in the named
input control
When user clicks submit button, NAME and
VALUE are sent

See figure 6-18 on p. 6-18 for sample of data
submitted from form
Start project six


Create project six folder on your
desktop
Copy the following files into project six
folder from f: drive



survey1.htm
survey2.htm
Start 1st Page 2000 and open
survey1.htm for editing
<FORM> Attributes


METHOD specifies how the form’s data
is sent to the server
METHOD=POST sends a separate data
file to the URL


another option is METHOD=GET, we won’t
use it
This project will utilize the POST
method
<FORM> Attributes cont.




ACTION: specifies the action that will be
taken when the form is submitted
For this project data will be sent via e-mail
Another alternative is to send data to Web
server (see p. 6.11)
Web sites can process information from forms
using Common Gateway Interface (CGI)
scripting
Adding Radio Buttons



Project has two sets of radio buttons to
allow the visitor to select only one
option from a list of options
Visitors can select only one item per
group
Radio buttons that have the same name
belong to the same group (see p. 6.13)
Submit and reset buttons


Submit sends a file like the one
displayed in figure 6-18 (p. 6.18) to the
specified e-mail address
Reset clears data from form fields
Using Selection Menus



The SELECT control creates a selection
menu
This control only allows the visitor to
choose pre-defined choices
There are four types of selection menus
(see p. 6.23 for examples)
Open up survey2.htm



Save survey1.htm
Open up survey2.htm using 1st Page
2000
You will add selection menus to this
Web page



Radio buttons p. 6.26
Selection controls and menu p. 6.27
Add submit and reset buttons p. 6.30
Testing the Submit Buttons



SUBMIT currently sends file to pretend e-mail
address ([email protected])
To test out your code, replace [email protected]
with your e-mail address in both survey1.htm
and survey2.htm
Then test the page:




Open it in a browser
Enter values in all controls
Click the Submit button
Check your e-mail to see if file arrived
This week online

Readings



Concepts Chapter 7, “Storage”
HTML Project Six
This week’s Quiz

Concepts Chapter 7, “Storage”
Next class meeting


Bring your JavaScript book to class
We will begin new topic in class next
week