Tutorial 6 Forms Section A - Working with Forms in JavaScript

1. Tutorial 6FormsSection A - Working with Forms in JavaScript

2. 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

3. 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

5. 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

6. 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

7. 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.

8. 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

9. 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

14. 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

15. 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

17. 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>

19. 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

20. 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

21. 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)

22. 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

25. 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

26. 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

27. 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

29. 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

32. 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