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 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 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 tag pair to create form elements: –Used to create input fields that users interact with –Displays choices in a drop-down menu or scrolling list known as a selection list –Used to create a text field in which users can enter multiple lines of information

Working with Forms in JavaScript Input Fields – 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: Name Address City, State, Zip

Working with Forms in JavaScript Input Fields –Password Boxes An 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 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 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 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 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 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 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 – tag is used to create a field in which users can enter multiple lines of information –Known as: Multiline text fields Text areas