HTML Form Widgets. Review: HTML Forms. Review: CGI Programs

Transcription

1 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 <form action= URL > 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 1

2 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 Text Box Button HTML Form Widgets Check Box Radio Buttons Text Area Selection List 2

3 Text Box <input type= text > 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) reference the text box from JavaScript) value (the string currently in the text box) Text Box Demo <td><h2>text Box</h2></td> <td>title: <input type="text" size="20" maxlength="30" name="title" value=""></td> Button <input type= button > value (string label on the button) reference the button from JavaScript) 3

4 Button Demo <td><h2>button</h2></td> <td><input type= button" value= GO! name= go"></td> Check Box <input type= checkbox > checked (if this attribute is present, the box will be checked when the form loads) reference the check box from JavaScript) Check Box Demo <td><h2>check Box</h2></td> <td>us Citizen: <input type= checkbox name= citizen checked= ></td> 4

5 Radio Buttons <input type= radio > checked (if this attribute is present, the radio button will be selected when the form loads) reference the radio button from JavaScript) NOTE: All radio buttons in the same group must be given the same name Radio Buttons Demo <td><h2>radio Buttons</h2></td> <td> Freshman<input type="radio" name="year" checked=""> Sophomore<input type="radio" name="year"> Junior<input type="radio" name="year"> Senior<input type="radio" name="year"> </td> Text Area <textarea>the value string goes here between the tags</textarea> cols (the width of the text area in characters) rows (the height of the text area) reference the text area from JavaScript) 5

6 Text Area Demo <td><h2>text Area</h2></td> <td><textarea cols="20" rows="10" name="address">type your address here.</textarea></td> <select> <option>option 1 <option>option 2 </select> Selection List <select> Selection List size (the number of options that should be visible) reference the selection list from JavaScript) <option> selected (if this attribute is present, the option will be selected when the form loads) 6

7 Selection List Demo <td><h2>selection List</h2></td> <td> <select name="color" size="1"> <option selected="">red <option>green <option>blue <option>cyan <option>magenta <option>yellow </select> </td> 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 7

8 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 <td><h2>text Box</h2></td> <td>title: <input type="text" size="20" maxlength="30" name="title" value="" onchange="window.alert(demoform.title.value)" > </td> <td><h2>button</h2></td> <td><input type="button" value="go!" name="go" onclick="window.alert(demoform.title.value)" > </td> 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 8