Lecture # 6 Forms, Widgets and Event Handling. Today Questions: From notes/reading/life? Share...

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

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


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



</form></body>

How to send the user informationin a URL


First name <input name=firstName size=20 value="Phred">



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

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

Lecture # 6 Forms, Widgets and Event Handling. Today Questions: From notes/reading/life? Share...

Documents

Transcript of Lecture # 6 Forms, Widgets and Event Handling. Today Questions: From notes/reading/life? Share...