Transcript Chapter 4 Notes

Ch. 4 Web Page Design Forms
Mr. Ursone
Understanding Forms
 Form: Interactive
elements that provide a
way for the Web site
visitor to interact with
the site
 Web Master: person
who runs the website
How do you (Web Master) receive this
information???
 3 Ways



Get Method: sends data with URL. Not widely
used – format and amount of info issues
Post Method: sends data to the application
with no limits. Data is invisible to the visitor
E-mail Method: Data is sent to an email
account. This is what we will use.
Form Tags
 <input> tag: collects data from check boxes,
radio buttons, single-line text fields,
form/image buttons, and passwords.
 <select> tag: collects data from lists and popup menus.
 <textarea> tag: collects the data from
multiline text fields.
Property Inspector Form Properties
 Form Name: Name
 Action: Contains the mailto address
 Target: Specifies the window or frame in which to display the
data after processing.




Blank: opens the link in a new browser window
Self: opens the destination document (link) in the same window
Parent & Top are other options (We will discuss in the future)
Can also be used for internal and external links
 Method: Method by which the form data is transferred to the server
 ENCTYPE: We will use text/plain. It enables the data to be
transmitted in a readable format instead of as one long string.
Forms and Web Pages
 A typical form is composed of form objects

Form objects: text box, check box, radio
buttons, list, menu, or other buttons.

Other Buttons
 Submit
 Reset
 Command
Insert Bar Forms Tab
Check
Form
Jump
Box
Menu
Radio
Group
Text
Text
Area
File
Field
List/ Image
Menu Field
Field
Radio
Button
Button
Buttons on the Inset Bar Form Category
Buttons on the Insert Bar Forms Tab
Buttons on the Insert Bar Forms Tab




Form: Inserts a form into the Document window
Text Field: Accepts any type of alphanumeric text entry
Text Area: Provides a multiline text entry field
Check box: Allows multiple responses in a single group
of options, letting the user select as many options as
apply
 Radio Button: Represents an exclusive choice; only one
item in a group of buttons can be selected
 Radio Group: Represents a group of radio buttons
 List/Menu: List displays option values within a scrolling
list that allows users to select multiple options; Menu
displays the option values in a pop-up menu that allows
users to select only a single item.
Buttons on the Insert Bar Forms Tab
 Jump Menu: Special form of a pop-up menu that lets




the viewer link to another document or file
Image Field: Creates a custom, graphical button
Button: Performs actions when clicked; Submit and
Reset buttons send data to the server and clear the
form fields
File Field: Allows users to browse to a file on their
computers and upload the file as form data
Label: Provides a way to associate the text label for a
field with the field structurally
Text Field Property Inspector
The Property Inspector changes for each Form element.
Here is what it looks like for a text field element.
Character Width
Field Type
Class
Text
field
name
Maximum
characters
Initial
Value
Text Field Property Inspector
 A form object in which users enter a response
 Char Width: max number of characters that can be
displayed
 Max Chars: max number of characters that can be
entered.
 Type: Can be single-line, multiple-line, or password


Single-line: single word or short phrase response
Multiple-line: Provides a larger text area to enter a response. You
can change settings to meet your needs

Password: single line. When a user types in a password field,
asterisks or bullets replace the text as a security precaution.
 Init Val: Assigns the value that is displayed in the field
when the form first loads
 Class: Establishes an attribute used with CSS
Horizontal Rule
 Horizontal rule (or line) is useful for
organizing information and visually separating
text and objects.
 The HTML tag for a horizontal rule is <hr>
 To insert a horizontal rule
 Go to the Insert Menu – HTML – Horizontal
rule
 You can change attributes for the rule in the
Property inspector.
Good To Know
 An underscore is an acceptable special
character in a form naming convention.
 Forms can contain various objects that
enable user interaction and are the
mechanisms that allow users to input data.
 If the Max Chars field is left blank, a user can
enter any amount of text in a text field.
 The Char Width field default for text boxes is
20 characters.
Good To Know
 You can use a jump menu to create links to




documents in your Web site, graphics, documents on
other Web sites, email links, or any file that can be
opened in a browser.
Pop-up menu (Drop-down menu): Offers visitors a
range of choices.
The Action text box of the Property Inspector contains
the mailto address or specifies the URL to the
dynamic page or script that will process the form.
The Submit button on a form will process a script.
The Reset button on a form will clear the form.