1. Fluency with Information Technology INFO100 and CSE100 Katherine Deibel 2012-05-02Katherine Deibel, Fluency in Information Technology1

2.  We have used alert() and confirm() to communicate with users  But that is very crude interaction  We can create greater interactivity through JS and XHTML forms  Create buttons, textboxes, and lists  Input, manipulate, and output data 2012-05-02Katherine Deibel, Fluency in Information Technology2

3.  2012-05-02Katherine Deibel, Fluency in Information Technology3

4.  form a FORM!  Notice that FORM contains different types of widgets  Part of fluency is knowing the names of the various widgets 2012-05-02Katherine Deibel, Fluency in Information Technology4

5.  Form widgets cannot exist on their own and Must be located between  Multiple forms can be on a single page  Place associated widgets in the same form  Easier to use tags to separate individual widgets (see later slides) 2012-05-02Katherine Deibel, Fluency in Information Technology5

6.  The tag is generally invisible to the user  Only a container for the widgets  Can be styled with CSS form { background-color: lightgray; } 2012-05-02Katherine Deibel, Fluency in Information Technology6

7.  Require attribute: action  Tells the browser where the program is that will process the form  JSP file, ASP file, Java App, etc.  We don't need it!  Since it is required, we use the empty string for its specification: 2012-05-02Katherine Deibel, Fluency in Information Technology7

8.  Most form widgets are created by the tag  Text fields  Password fields  Radio buttons  Checkboxes  File chooser  Buttons ●●●● ●●●●● 2012-05-02Katherine Deibel, Fluency in Information Technology8

9.  The tag gives a label to an tag  Clicking on the label gives that widget the current focus  To meet accessibility standards, all inputs (except buttons) require a label  Also true for other form widgets ●●●● ●●●●● 2012-05-02Katherine Deibel, Fluency in Information Technology9

10.  's attributes:  type: kind of input widget (e.g., button)  id: unique identifier for the widget  name: identifier for a group of widgets  value: optional, used only for some types  's attributes  for: the id of the input the tag labels 2012-05-02Katherine Deibel, Fluency in Information Technology10

11.  The tag gives a label to an tag  Clicking on the label gives that widget the current focus  To meet accessibility standards, the 95% rule is that all inputs (except buttons) require a label  Also true for other form widgets ●●●● ●●●●● 2012-05-02Katherine Deibel, Fluency in Information Technology11

12. 2012-05-02Katherine Deibel, Fluency in Information Technology12 ●●●● ●●●●● First Name:

13.  type="text"  Creates a textbox / text field that allows for a single line of text  Default width is 20 characters  type="password"  Creates the same as "text" but characters are hidden (circles, asterisks, etc.) when typed 2012-05-02Katherine Deibel, Fluency in Information Technology13

14.  Requires the value attribute  value should reflect the checkbox's purpose  Use name to associate related checkboxes 2012-05-02Katherine Deibel, Fluency in Information Technology14 Cats Dogs

15.  Radio buttons allow only one option to be selected at a time  Each option gets its own tag and value  Group related radio buttons by name 2012-05-02Katherine Deibel, Fluency in Information Technology15 Male Female

16.  Creates a combined textfield and button to let the user select a local file on the user's computer 2012-05-02Katherine Deibel, Fluency in Information Technology16 ●●●● ●●●●● Resume:

17.  actually offers several types of buttons  reset: clears each widget in the form  submit: sends form data to the location specified at  button: a generic button  We will use only reset and button in this class 2012-05-02Katherine Deibel, Fluency in Information Technology17

18.  All button types require the value attribute  value is the text displayed on the button 2012-05-02Katherine Deibel, Fluency in Information Technology18 ●●●● ●●●●●

19.  The CSS only changed the colors and font-weight  Browsers have default styling for widgets  Note the rounded corners on Submit button  CSS can deactivate the default styles (GRRR!) 2012-05-02Katherine Deibel, Fluency in Information Technology19

20. 2012-05-02Katherine Deibel, Fluency in Information Technology20 ●●●● ●●●●● (border around form) Example Form I NEED THIS JOB! … (border around form)

21. Adding Events 2012-05-02Katherine Deibel, Fluency in Information Technology21

22.  After drawing a page, browsers sit idle waiting for something to happen  When we give input, it cause events  Processing the input is the task of an event handler  Event types  onclick  onchange  onmouseover In the tag an event handler gives the processing needed for the task using JavaScript 2012-05-02Katherine Deibel, Fluency in Information Technology22

23.  For event handlers like onclick you must  Treat them like attributes:  so you will type: onclick=" … "  Put inside the quotes the operations to be performed when the event happens … this will be standard JavaScript  No script tags required  Follow usual JS rules 2012-05-02Katherine Deibel, Fluency in Information Technology23

24.  onclick is an event that is triggered when a widget is clicked on (as in clicking on a button) <input type="button" value="Hit The button!" onclick="document.forms[0].dataOut.value = 'Ouch!'" /> <input type="button" value="Hit The button!" onclick="document.forms[0].dataOut.value = 'Ouch!'" /> 2012-05-02Katherine Deibel, Fluency in Information Technology24

25.  We use an assignment to change the text box's value <input type="button" value="Hit The button!" onclick="document.forms[0].dataOut.value = 'Ouch!'" /> refers to the current web page refers to the 1 st form says we want to change value in window refers to text window of this name 2012-05-02Katherine Deibel, Fluency in Information Technology25

26.  Linked on Calendar for today  Looked at the HTML and JS for this page and pay attention to the following:  The layout of the 3 text fields and button  The button's use of  How the JS gets the values in the first two text boxes  How JS multiplies the values  How JS puts the product in the last text box 2012-05-02Katherine Deibel, Fluency in Information Technology26

27.  Consider the form and the data stored in  What will trigger the browser to do something  that is the event  When the vent happens, ask yourself: "What should the computer do when that "event happens?"  that is handling the event 2012-05-02Katherine Deibel, Fluency in Information Technology27

28. document.write() 2012-05-02Katherine Deibel, Fluency in Information Technology28

29.  document.write() is a function that puts text into the Web page as it is being created  It works because the browser runs all of the JS before displaying the page, thus allowing JS to create HTML on the fly  Can even put document.write() in a script in the head of a page 2012-05-02Katherine Deibel, Fluency in Information Technology29

30. var school=confirm("Are you a Husky?"); if (school == 1) { document.write(" HUSKIES!!! "); document.bgColor = 'purple'; document.fgColor = 'gold'; } else { document.write(" Cougars.... yay "); document.bgColor = 'red'; document.fgColor = 'white'; } 2012-05-02Katherine Deibel, Fluency in Information Technology30

31.  By deciding before the page is set- up, the whole look and feel can be controlled! 2012-05-02Katherine Deibel, Fluency in Information Technology31

32.  Forms are the basis for interaction on web pages  Events, event handlers, and JavaScript are the means by which the interaction occurs  Lots of options for creating dynamic web pages 2012-05-02Katherine Deibel, Fluency in Information Technology32