1 / 33

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

warner
Download Presentation

Tutorial 6 Forms Section A - Working with Forms in JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

More Related