Forms, Widgets and Event Handling
advertisement
Lecture # 6 Forms, Widgets and Event Handling Today 1. 2. 3. 4. 5. 6. Questions: From notes/reading/life? Share Personal Web Page (if not too personal) Introduce: How do we make web pages interactive? Explain: Forms, Widgets and Event Handling Demo: Interactive Web pages – follow along on laptop Practice: Your group will create an interactive web page Evaluate: Share and evaluate web pages Re-practice: Create your own web page with Lab # 3 Preview Lab # 3 Review Data Representation Understand Understand how web searching works Today 1. 2. 3. 4. 5. 6. Questions: From notes/reading/life? Share Personal Web Page (if not too personal) Introduce: How do we make web pages interactive? Explain: Forms, Widgets and Event Handling Demo: Interactive Web pages – follow along on laptop Practice: Your group will create an interactive web page Evaluate: Share and evaluate web pages Re-practice: Create your own web page with Lab # 3 Preview Lab # 3 Review Data Representation Understand Understand how web searching works How does a web page… • • • • Accept user input Include buttons, text boxes, labels, etc. Send information in a URL link Dynamically respond to the user Answer: Forms Forms Forms - requests to a web-site • • • • How to get information from the user When to send the request Where to send the request How to send the user’s information with the request <body> <h1>Example form</h1> <form action="http://students.cs.byu.edu/cgi/findMe"> First name <input name=firstName size=20 value="Phred"> <p> Last name <input name=lastName size=20 value="Phinster"> <p> <input type="submit" value="Find Me"> </form> </body> Labels <body> <h1>Example form</h1> <form action="http://students.cs.byu.edu/cgi/findMe"> First name <input name=firstName size=20 value="Phred"> <p> Last name <input name=lastName size=20 value="Phinster"> <p> <input type="submit" value="Find Me"> </form> </body> Labels How to get info from the user <body> <h1>Example form</h1> <form action="http://students.cs.byu.edu/cgi/findMe"> First name <input name=firstName size=20 value="Phred"> <p> Last name <input name=lastName size=20 value="Phinster"> <p> <input type="submit" value="Find Me"> </form> </body> Parts to an input tag • <input name=“N” size=20 value=“Q”> • Name - the name that this input information will be given • Size - the number of characters that the user can type • Value – what initially appears in the input When to send the request <body> <h1>Example form</h1> <form action="http://students.cs.byu.edu/cgi/findMe"> First name <input name=firstName size=20 value="Phred"> <p> Last name <input name=lastName size=20 value="Phinster"> <p> <input type="submit" value="Find Me"> </form> </body> When to send the request Where to send the request <body> <h1>Example form</h1> <form action="http://students.cs.byu.edu/cgi/findMe"> First name <input name=firstName size=20 value="Phred"> <p> Last name <input name=lastName size=20 value="Phinster"> <p> <input type="submit" value="Find Me"> </form> </body> How to send the user information in a URL <body> <h1>Example form</h1> <form action="http://students.cs.byu.edu/cgi/findMe"> First name <input name=firstName size=20 value="Phred"> <p> Last name <input name=lastName size=20 value="Phinster"> <p> <input type="submit" value="Find Me"> </form> </body> http://students.cs.byu.edu/cgi/findMe?firstName=Phred&lastName=Phinster How to send the user information in a URL <body> <h1>Example form</h1> <form action="http://students.cs.byu.edu/cgi/findMe"> First name <input name=firstName size=20 value="Phred"> <p> Last name <input name=lastName size=20 value="Phinster"> <p> <input type="submit" value="Find Me"> </form> </body> http://students.cs.byu.edu/cgi/findMe?firstName=Phred&lastName=Phinster How to send the user information in a URL <body> <h1>Example form</h1> <form action="http://students.cs.byu.edu/cgi/findMe"> First name <input name=firstName size=20 value="Phred"> <p> Last name <input name=lastName size=20 value="Phinster"> <p> <input type="submit" value="Find Me"> </form> </body> http://students.cs.byu.edu/cgi/findMe?firstName=Phred&lastName=Phinster Forms - How does the server respond? • Not every URL refers to a page • CGI - Common Gateway Interface • You can give a server a program and place it at a URL. • The server will then run the program and return its result rather than fetch a page 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 • This is what Google does when you do a Google search Server-side Scripting • Information is sent to the web server, often through the URL • There is a CGI program running on the web server • The CGI program runs using the user input • The server sends a dynamically generated HTML page back to the client browser Client-side Scripting • Not all HTML forms contact a CGI program on a web server • Some 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 HTML Form Widgets Pizza Order Demo HTML Form Widgets • • • • • • Text Box Button Check Box Radio Buttons Text Area Selection List Text Box • <input type=“text”> • 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) Problem: What if we want to put text boxes, buttons, check boxes, etc. in nice, neat rows and columns? How can we do this? Text Box Demo <tr> <td><h2>Text Box</h2></td> <td>Title: <input type="text" size="20" maxlength="30" name="title" value=""></td> </tr> Button • <input type=“button”> • Attributes – value (string label on the button) – name (the name of the variable used to reference the button from JavaScript) Button Demo <tr> <td><h2>Button</h2></td> <td><input type=“button" value=“GO!” name=“go"></td> </tr> Check Box • <input type=“checkbox”> • 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 <tr> <td><h2>Check Box</h2></td> <td>US Citizen: <input type=“checkbox” name=“citizen” checked=“”></td> </tr> Radio Buttons • <input type=“radio”> • 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 <tr> <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> </tr> Text Area • <textarea>The value string goes here between the tags</textarea> • 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 <tr> <td><h2>Text Area</h2></td> <td><textarea cols="20" rows="10" name="address">Type your address here.</textarea></td> </tr> Selection List <select> <option>Option 1 <option>Option 2 … </select> Selection List • <select> • Attributes – size (the number of options that should be visible) – name (the name of the variable used to reference the selection list from JavaScript) • <option> • Attributes – selected (if this attribute is present, the option will be selected when the form loads) Selection List Demo <tr> <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> </tr> 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 <form name=demoform> <tr> <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> </tr> <tr> <td><h2>Button</h2></td> <td><input type="button" value="GO!" name="go" onClick="window.alert(demoform.go.value)" > </td> </tr> </form> Event Handling • We’ll learn a lot more about event handling in a future lecture, when we learn the basics of JavaScript programming • Once we’ve learned about JavaScript, we’ll be able to add interesting behavior to our HTML forms Today 1. 2. 3. 4. 5. 6. Questions: From notes/reading/life? Share Personal Web Page (if not too personal) Introduce: How do we make web pages interactive? Explain: Forms, Widgets and Event Handling Demo: Interactive Web pages – follow along on laptop Practice: Your group will create an interactive web page Evaluate: Share and evaluate web pages Re-practice: Create your own web page with Lab # 3 Preview Lab # 3 Review Data Representation Understand Understand how web searching works Personal Exercise • Create a Text Box with a Title and a Label that looks like this: • And a button with a Title and a Label that looks like this: • Type Hi in the text box and make sure that works • When you click on the “BYE” button, make the Text Box say “BYE” • You have 10 minutes Problem: Searching the Internet • How do you find a web page if you don’t know the URL? • One of the more popular search engines is Google Search • How do we describe the page that we want? Search • How does Google know where that page is? • WEB CRAWLERS: – Find as many web pages as you can – For each web page prepare a list of words on that page – For each word in all of the web keep a list of pages that have that word How does your browser ask for the search Problems with word searches • Search for “doctor” • • • • • What about pages with the word “doctors”? What about pages with the word “physicians”? What about pages about “witch doctors”? What if the page only has a picture of a doctor? What if the only use of the word doctor is in a picture? Blocking pornography • The reverse of the search problem • I don’t want pages that have this – How do you describe what you don’t want? Blocking pornography • Keep a list of all bad sites – If site is on the black list then refuse to make an Internet connection – What if someone creates a new site? • Keep a list of bad words and block any URL or page that has those words – – – – What about “Middlesex, England”? What about “breast cancer”? What about slang words? What about pictures? Summarize • It is hard to find all the pages someone might be interested in • It is hard to NOT find pages someone is never interested in • Mistakes are often made, you can’t be 100% right Static vs. Dynamic • Sometimes the information we want displayed on a web page varies from time to time and from user to user • So far, all our web pages have been static, i.e. always looks the same • Some web pages, like a Google result page, are dynamic, i.e. different each time
