HTML Form Widgets

Review: HTML Forms HTML forms are used to create web pages that accept user input Forms allow the user to communicate information back to the web server Forms allow web servers to generate “dynamic” web pages, and to “personalize” pages for the individual user Forms contain labels, text boxes, buttons, etc.

Review: CGI Programs After the user enters the information, they press the “submit” button to send the information to the web server The attribute tells the web browser where to send the information The action URL is the address of a CGI program that is running on a web server The CGI program reads the user input sent by the browser, and then sends a dynamically generated HTML page back to the browser

Client-side Scripting Not all HTML forms contact a CGI program on a web server These forms execute entirely on the client computer The “program” is included as part of the HTML page that contains the form, and is executed by the browser This program is sometimes called a “script”, and is written in a programming language named JavaScript Many web sites use a combination of CGI programs and client-side scripting

Pizza Order Demo

HTML Form Widgets Text Box Button Check Box Radio Buttons Text Area Selection List

Text Box Attributes –size (the width of the text box in characters) –maxlength (the maximum number of characters the user is allowed to type in the text box) –name (the name of the variable used to reference the text box from JavaScript) –value (the string currently in the text box)

Text Box Demo Text Box Title:

Button Attributes –value (string label on the button) –name (the name of the variable used to reference the button from JavaScript)

Button Demo Button

Check Box Attributes –checked (if this attribute is present, the box will be checked when the form loads) –name (the name of the variable used to reference the check box from JavaScript)

Check Box Demo Check Box US Citizen:

Radio Buttons Attributes –checked (if this attribute is present, the radio button will be selected when the form loads) –name (the name of the variable used to reference the radio button from JavaScript) NOTE: All radio buttons in the same group must be given the same name

Radio Buttons Demo Radio Buttons Freshman Sophomore Junior Senior

Text Area The value string goes here between the tags Attributes –cols (the width of the text area in characters) –rows (the height of the text area) –name (the name of the variable used to reference the text area from JavaScript)

Text Area Demo Text Area Type your address here.

Selection List Option 1 Option 2 …

Selection List Attributes –size (the number of options that should be visible) –name (the name of the variable used to reference the selection list from JavaScript) Attributes –selected (if this attribute is present, the option will be selected when the form loads)

Selection List Demo Selection List red green blue cyan magenta yellow

Event Handling Now that we have this nice form, there’s only one problem – it doesn’t do anything!

Event Handling We add behavior to HTML forms by adding “event handlers” to widgets An event handler is a little program that is run whenever a particular event occurs in a widget Examples of events: onclick for buttons, onchange for text boxes Example event handler: When this button is clicked, compute the tax and total for the order

Event Handling Each type of HTML form widget has “event handler attributes” The value of an event handler attribute is a JavaScript program that describes the actions to be performed when that particular event occurs in the widget

Event Handling Demo Text Box Title: Button

Event Handling We’ll learn a lot more about event handling in a future lecture, but first we need to learn the basics of JavaScript programming Once we’ve learned about JavaScript, we’ll be able to add interesting behavior to our HTML forms