Tutorial 6 Forms Section A - Working with Forms in JavaScript.
-
Upload
katrina-haynes -
Category
Documents
-
view
220 -
download
0
Transcript of Tutorial 6 Forms Section A - Working with Forms in JavaScript.
Tutorial 6
Forms
Section A - Working with Forms in JavaScript
Tutorial 6A Topics
• Section A - Working with Forms in JavaScript– How to use HTML forms– About the Common Gateway Interface– How to use the <FORM> tag– About form elements– How to create and use input fields– How to create selection lists– How to create multiline text fields
Working with Forms in JavaScript
• Overview of Forms– Form
• Used to collect information for some subsequent processing
– Information may be used for some further interaction with the Web page or be sent to a server for processing
» Server processing may include CGI, ASP, ISPI, etc.
» Server processing may also include interaction with a DB
Working with Forms in JavaScript
• The Common Gateway Interface– Simple protocol that allows Web pages
to communicate with Web-server-based programs
– Function:• Start a Web-server-based program • Pass environment variables to it• Receive environment variables from it
Working with Forms in JavaScript
• The Common Gateway Interface– Environment variables
• Part of an operating system, not just part of a function or program, as are JavaScript variables
• Example:– server_name
» Contains the domain name or IP address of a Web server
Working with Forms in JavaScript
• The Common Gateway Interface– CGI Script or Program
• Web-server-based application that processes CGI environment variables
• Separate from the CGI protocol• Can be written in:
– AppleScript, Perl, TCL, C++, VB, Java, etc.
Working with Forms in JavaScript
• The Common Gateway Interface– Process:
• HTML form elements passes information entered in the form into CGI environment variables
• Then CGI environment variables are then sent to a CGI script running on a server
• The CGI script performs some action (e.g., database access) and either:
– Sends response back to the Web page– Generates a new HTML document
Working with Forms in JavaScript
• The <form> Tag– Designates a form within an HTML
document and contains all text and tags that make up the form
– Multiple forms can be included in a document• Forms cannot be nested
Working with Forms in JavaScript
• Form Elements: An Overview– There are three tags used within <form> tag
pair to create form elements:• <input>
– Used to create input fields that users interact with
• <select>– Displays choices in a drop-down menu or scrolling list
known as a selection list
• <textarea>– Used to create a text field in which users can enter
multiple lines of information
Working with Forms in JavaScript
• Input Fields– <input> tag is used to create input
fields that use different types of interface elements to gather information
– Attributes are available to characterize the input field
Working with Forms in JavaScript
• Input Fields– Example:<form action=http://example_url/cgi-bin/cgi_program method=“post”
name=“exampleForm”>Name<br><input type=“text” name=“name” value=“The White House”
size=50><br>Address<br><input type=“text” name=“address” value=“1600 Pennsylvania Ave.”
size=50><br>City, State, Zip<br><input type=“text” name=“city” value=“Washington” size=38><input type=“text” name=“state” value=“DC” size=2 maxlength=2><input type=“text” name=“zip” value=“20500” size=5 maxlength=5></form>
Working with Forms in JavaScript
• Input Fields– Password Boxes
• An <input> tag with type = password– Each character the user types in the text field
shows up as an asterisk (*) to hide it from onlookers
• Can include other attributes– NAME, VALUE, MAXLENGTH and SIZE
Working with Forms in JavaScript
• Input Fields– Radio Buttons
• An <input> tag with type = radio• Used to create a group of buttons from
which only one button can be selected– Mutually exclusive
• Can specify a default value using the CHECKED attribute
• Only one name=value pair is submitted with form data
Working with Forms in JavaScript
• Input Fields– Check Boxes
• An <input> tag with type = checkbox• Used to create a box that can be set to yes
(checked) or no (unchecked)• Can specify default state using CHECKED attribute• Only name=value pair from checked boxes is
submitted with form data• Can be grouped (although not mutually
exclusively)
Working with Forms in JavaScript
• Input Fields– Reset Buttons
• An <input> tag with type = reset• Clears all form entries and resets each form
element to its initial value specified by the VALUE attribute
• Default label (Reset) appears if the VALUE attribute is not included
Working with Forms in JavaScript
• Input Fields– Command Buttons
• An <input> tag with type = button• Use an onClick event handler to execute
JavaScript code that performs some type of function (e.g., a calculation)
• Default value set with the VALUE attribute is transmitted along with the form data when submitted
Working with Forms in JavaScript
• Input Fields– Submit Buttons
• An <input> tag with type = submit• Submits the form to a CGI script on a server• Default label (Submit Query) appears if the
VALUE attribute is not included
Working with Forms in JavaScript
• Input Fields– Image Submit Buttons
• An <input> tag with type = image• Displays a graphical image and submits the
form to a CGI script on a server• Use SRC attribute to specify image to be
displayed on the button
Working with Forms in JavaScript
• Selection Lists– Creates a selection list that presents
users with fixed lists of values from which to choose
– Can appear as:• List of choices• Drop-down menu
– Can also have a scroll bar
Working with Forms in JavaScript
• Multiline Text Fields– <textarea> tag is used to create a field
in which users can enter multiple lines of information
– Known as:• Multiline text fields • Text areas