tutorial 6 forms section a - working with forms in javascript
TRANSCRIPT
![Page 1: Tutorial 6 Forms Section A - Working with Forms in JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649d9f5503460f94a8ad9b/html5/thumbnails/1.jpg)
Tutorial 6
Forms
Section A - Working with Forms in JavaScript
![Page 2: Tutorial 6 Forms Section A - Working with Forms in JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649d9f5503460f94a8ad9b/html5/thumbnails/2.jpg)
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
![Page 3: Tutorial 6 Forms Section A - Working with Forms in JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649d9f5503460f94a8ad9b/html5/thumbnails/3.jpg)
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
![Page 4: Tutorial 6 Forms Section A - Working with Forms in JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649d9f5503460f94a8ad9b/html5/thumbnails/4.jpg)
![Page 5: Tutorial 6 Forms Section A - Working with Forms in JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649d9f5503460f94a8ad9b/html5/thumbnails/5.jpg)
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
![Page 6: Tutorial 6 Forms Section A - Working with Forms in JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649d9f5503460f94a8ad9b/html5/thumbnails/6.jpg)
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
![Page 7: Tutorial 6 Forms Section A - Working with Forms in JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649d9f5503460f94a8ad9b/html5/thumbnails/7.jpg)
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.
![Page 8: Tutorial 6 Forms Section A - Working with Forms in JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649d9f5503460f94a8ad9b/html5/thumbnails/8.jpg)
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
![Page 9: Tutorial 6 Forms Section A - Working with Forms in JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649d9f5503460f94a8ad9b/html5/thumbnails/9.jpg)
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
![Page 10: Tutorial 6 Forms Section A - Working with Forms in JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649d9f5503460f94a8ad9b/html5/thumbnails/10.jpg)
![Page 11: Tutorial 6 Forms Section A - Working with Forms in JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649d9f5503460f94a8ad9b/html5/thumbnails/11.jpg)
![Page 12: Tutorial 6 Forms Section A - Working with Forms in JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649d9f5503460f94a8ad9b/html5/thumbnails/12.jpg)
![Page 13: Tutorial 6 Forms Section A - Working with Forms in JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649d9f5503460f94a8ad9b/html5/thumbnails/13.jpg)
![Page 14: Tutorial 6 Forms Section A - Working with Forms in JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649d9f5503460f94a8ad9b/html5/thumbnails/14.jpg)
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
![Page 15: Tutorial 6 Forms Section A - Working with Forms in JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649d9f5503460f94a8ad9b/html5/thumbnails/15.jpg)
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
![Page 16: Tutorial 6 Forms Section A - Working with Forms in JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649d9f5503460f94a8ad9b/html5/thumbnails/16.jpg)
![Page 17: Tutorial 6 Forms Section A - Working with Forms in JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649d9f5503460f94a8ad9b/html5/thumbnails/17.jpg)
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>
![Page 18: Tutorial 6 Forms Section A - Working with Forms in JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649d9f5503460f94a8ad9b/html5/thumbnails/18.jpg)
![Page 19: Tutorial 6 Forms Section A - Working with Forms in JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649d9f5503460f94a8ad9b/html5/thumbnails/19.jpg)
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
![Page 20: Tutorial 6 Forms Section A - Working with Forms in JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649d9f5503460f94a8ad9b/html5/thumbnails/20.jpg)
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
![Page 21: Tutorial 6 Forms Section A - Working with Forms in JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649d9f5503460f94a8ad9b/html5/thumbnails/21.jpg)
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)
![Page 22: Tutorial 6 Forms Section A - Working with Forms in JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649d9f5503460f94a8ad9b/html5/thumbnails/22.jpg)
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
![Page 23: Tutorial 6 Forms Section A - Working with Forms in JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649d9f5503460f94a8ad9b/html5/thumbnails/23.jpg)
![Page 24: Tutorial 6 Forms Section A - Working with Forms in JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649d9f5503460f94a8ad9b/html5/thumbnails/24.jpg)
![Page 25: Tutorial 6 Forms Section A - Working with Forms in JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649d9f5503460f94a8ad9b/html5/thumbnails/25.jpg)
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
![Page 26: Tutorial 6 Forms Section A - Working with Forms in JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649d9f5503460f94a8ad9b/html5/thumbnails/26.jpg)
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
![Page 27: Tutorial 6 Forms Section A - Working with Forms in JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649d9f5503460f94a8ad9b/html5/thumbnails/27.jpg)
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
![Page 28: Tutorial 6 Forms Section A - Working with Forms in JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649d9f5503460f94a8ad9b/html5/thumbnails/28.jpg)
![Page 29: Tutorial 6 Forms Section A - Working with Forms in JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649d9f5503460f94a8ad9b/html5/thumbnails/29.jpg)
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
![Page 30: Tutorial 6 Forms Section A - Working with Forms in JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649d9f5503460f94a8ad9b/html5/thumbnails/30.jpg)
![Page 31: Tutorial 6 Forms Section A - Working with Forms in JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649d9f5503460f94a8ad9b/html5/thumbnails/31.jpg)
![Page 32: Tutorial 6 Forms Section A - Working with Forms in JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649d9f5503460f94a8ad9b/html5/thumbnails/32.jpg)
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
![Page 33: Tutorial 6 Forms Section A - Working with Forms in JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062321/56649d9f5503460f94a8ad9b/html5/thumbnails/33.jpg)