Lecture # 6 Forms, Widgets and Event Handling

Today Questions: From notes/reading/life? Share Personal Web Page (if not too personal) 1.Introduce: How do we make web pages interactive? 2.Explain: Forms, Widgets and Event Handling 3.Demo: Interactive Web pages – follow along on laptop 4.Practice: Your group will create an interactive web page 5.Evaluate: Share and evaluate web pages 6.Re-practice:Create your own web page with Lab # 3 Preview Lab # 3 Review Data Representation Understand Understand how web searching works

Today Questions: From notes/reading/life? Share Personal Web Page (if not too personal) 1.Introduce: How do we make web pages interactive? 2.Explain: Forms, Widgets and Event Handling 3.Demo: Interactive Web pages – follow along on laptop 4.Practice: Your group will create an interactive web page 5.Evaluate: Share and evaluate web pages 6.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

Example form First name Last name

Labels Example form First name Last name

Labels

How to get info from the user Example form First name Last name

Parts to an input tag 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 Example form First name Last name

When to send the request

Where to send the request Example form First name Last name

How to send the user information in a URL Example form First name Last name

How to send the user information in a URL Example form First name Last name

How to send the user information in a URL Example form First name Last name

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 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 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 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, 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 Questions: From notes/reading/life? Share Personal Web Page (if not too personal) 1.Introduce: How do we make web pages interactive? 2.Explain: Forms, Widgets and Event Handling 3.Demo: Interactive Web pages – follow along on laptop 4.Practice: Your group will create an interactive web page 5.Evaluate: Share and evaluate web pages 6.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