View
214
Download
0
Category
Preview:
Citation preview
JavaScript FormsOne Step Closer to Your Own Phishing Site
Fluency with Information Technology
INFO100 and CSE100
Katherine Deibel
2012-05-02 Katherine Deibel, Fluency in Information Technology 1
Dynamic Web Pages
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-02 Katherine Deibel, Fluency in Information Technology 2
New HTML Tags!
<form></form> <label></label> <input/> <fieldset></fieldset> <legend></legend> <textarea></textarea> <select></select> <option></option>
2012-05-02 Katherine Deibel, Fluency in Information Technology 3
Katherine Deibel, Fluency in Information Technology 4
1. What is shown in the message box from the following JavaScript?
alert('Sum of 7 + 3 is " + 7 + 3);
2012-05-02
A. B. C. D. E.
20% 20% 20%20%20%A. 10B. 11C. 73D. 37E. Note of the above
1. What is shown in the message box from the following JavaScript?
alert('Sum of 7 + 3 is " + 7 + 3);
A. 10B. 11C. 73D. 37E. Note of the above
2012-05-02 Katherine Deibel, Fluency in Information Technology 5
Remember, JS uses order of operations when calculating.
The first calculation here is the string concatenation.
Katherine Deibel, Fluency in Information Technology 6
2. What is shown in the message box from the following JavaScript? alert('Sum of 9 + 7 is " + (9 + 7));
2012-05-02
A. B. C. D. E.
20% 20% 20%20%20%A. 97B. 79C. 42D. 16E. Over 9000
2. What is shown in the message box from the following JavaScript? alert('Sum of 9 + 7 is " + (9 + 7));
A. 97B. 79C. 42D. 16E. Over 9000
2012-05-02 Katherine Deibel, Fluency in Information Technology 7
Here, the parentheses take precedence, and the first operation is the addition.
By their powers combined…
form a FORM! Notice that FORM
contains different types of widgets
Part of fluency is knowing the names of the various widgets
2012-05-02 Katherine Deibel, Fluency in Information Technology 8
The <form> tag
Form widgets cannot exist on their own and Must be located between <form></form>
Multiple forms can be on a single page Place associated widgets in the same form
Easier to use <fieldset> tags to separate individual widgets (see later slides)
2012-05-02 Katherine Deibel, Fluency in Information Technology 9
The <form> tag
The <form> tag is generally invisible to the user Only a container
for the widgets
Can be styled with CSS
form { background-color: lightgray; }
2012-05-02 Katherine Deibel, Fluency in Information Technology 10
<form>'s action attribute
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:
<form action="">
2012-05-02 Katherine Deibel, Fluency in Information Technology 11
<input/> and <label> tags
Most form widgets are created by the <input/> tag Text fields
Password fields
Radio buttons
Checkboxes
File chooser
Buttons
●●●●●●●●●
2012-05-02 Katherine Deibel, Fluency in Information Technology 12
<input/> and <label> tags
The <label> tag gives a label to an <input/> tag Clicking on the label
gives that widget the current focus
To meet accessibilitystandards, all inputs(except buttons) require a label Also true for other
form widgets
●●●●●●●●●
2012-05-02 Katherine Deibel, Fluency in Information Technology 13
Katherine Deibel, Fluency in Information Technology 14
<input/> and <label> tags
<input/>'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 <label>'s attributes
for: the id of the input the tag labels
2012-05-02
<input/> and <label> tags
The <label> tag gives a label to an <input/> tag Clicking on the label
gives that widget the current focus
To meet accessibilitystandards, the 95% rule is that all inputs(except buttons) require a label Also true for other
form widgets
●●●●●●●●●
2012-05-02 Katherine Deibel, Fluency in Information Technology 15
<label> and <input/> tags
2012-05-02 Katherine Deibel, Fluency in Information Technology 16
●●●●●●●●●
<label class="textLabel" for="firstName">First Name:</label> <input type="text" id="firstName" />
<input/> type: text & password
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-02 Katherine Deibel, Fluency in Information Technology 17
<input/> type: checkbox
Requires the value attribute value should reflect the checkbox's purpose
Use name to associate related checkboxes
2012-05-02 Katherine Deibel, Fluency in Information Technology 18
<input type="checkbox" name="pets" id="cats" value="cats" /><label for="cats">Cats</label>
<input type="checkbox" name="pets" id="dogs" value="dogs" /><label for="dogs">Dogs</label>
<input/> type: radio
Radio buttons allow only one option to be selected at a time Each option gets its own <input/> tag and value
Group related radio buttons by name
2012-05-02 Katherine Deibel, Fluency in Information Technology 19
<input type="radio" name="gender" id="male" value="male" /><label for="male">Male</label>
<input type="radio" name="gender" id="female" value="female" /><label for="female">Female</label>
Katherine Deibel, Fluency in Information Technology 20
<input/> type: file
Creates a combined textfield and button to let the user select a local file on the user's computer
2012-05-02
●●●●●●●●●
<label class="textLabel" for="resume">Resume:</label><input type="file" id="resume" />
Katherine Deibel, Fluency in Information Technology 21
Form Buttons
<input/> actually offers several types of buttons reset: clears each widget in the
form
submit: sends form data to the location specified at <form action="…">
button: a generic button We will use only reset and button in
this class2012-05-02
Katherine Deibel, Fluency in Information Technology 22
<input/> type: reset & button
All button types require the value attribute
value is the text displayed on thebutton
2012-05-02
●●●●●●●●●
<input type="reset" value="Reset" class="resetButton" /><input type="button" value="Submit Your Info…" style="float:right" />
Why are the buttons different?
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-02 Katherine Deibel, Fluency in Information Technology 23
<input type="reset" value="Reset" class="resetButton" /><input type="button" value="Submit Your Info…" style="float:right" />
Katherine Deibel, Fluency in Information Technology 24
3. The <input …/> tag is for specifying
2012-05-02
A. B. C. D.
25% 25%25%25%A. Both input and output operations
B. Input operations onlyC. Output operations onlyD. Not applicable since it is not
a legal tag in XHTML
3. The <input …/> tag is for specifying
A. Both input and output operations
B. Input operations onlyC. Output operations onlyD. Not applicable since it is not
a legal tag in XHTML
2012-05-02 Katherine Deibel, Fluency in Information Technology 25
<input type="text" /> can be used for both input and output: Getting input from the user typing Displaying text messages without
the annoyance of an alert
Other form widgets
2012-05-02 Katherine Deibel, Fluency in Information Technology 26
●●●●●●●●●
<fieldset></fieldset>(border around form)
<legend>Example Form</legend>
<textarea> I NEED THIS JOB!</textarea>
<select id="month"> <option value="Jan">…</option> …</select>(border around form)
Making Forms do WorkAdding Events
2012-05-02 Katherine Deibel, Fluency in Information Technology 27
A. B. C. D.
25% 25%25%25%
4. A(n) ___ is an indication from the computer that something just happened.
A. Event
B. Notification
C. Feedback
D. Alert
2012-05-02 Katherine Deibel, Fluency in Information Technology 28
Events
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 <input … /> tag an event handler gives the processing needed for the task using JavaScript
In the <input … /> tag an event handler gives the processing needed for the task using JavaScript
2012-05-02 Katherine Deibel, Fluency in Information Technology 29
Katherine Deibel, Fluency in Information Technology 30
5. What has to happen for the ondblclick event to occur?
2012-05-02
A. B. C. D.
25% 25%25%25%A. The user right-clicks the mouse B. The user double clicks the mouseC. The user pushes both mouse
buttons at the same timeD. The user pushes the left mouse
button and then the right button in quick succession
Rules for Event Handlers
For event handlers like onclick you must Treat them like attributes:
<input type="button" value="Click" onclick="…"/>
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 rules2012-05-02 Katherine Deibel, Fluency in Information Technology 31
Demo
onclick is an event that is triggered when a widget is clicked on (as in clicking on a button)
<form action=""><input type="button" value="Hit The button!" onclick="document.forms[0].dataOut.value = 'Ouch!'" />
<input type="text" id="dataOut"/>
</form>
<form action=""><input type="button" value="Hit The button!" onclick="document.forms[0].dataOut.value = 'Ouch!'" />
<input type="text" id="dataOut"/>
</form>
2012-05-02 Katherine Deibel, Fluency in Information Technology 32
Demo: Explanation
We use an assignment to change the text box's value
<form action=""><input type="button" value="Hit The button!" onclick="document.forms[0].dataOut.value = 'Ouch!'" />
<input type="text" id="dataOut"/>
</form>
refers to the current web pagerefers to the 1st form
says we want to change value in window
refers to text window of this name
2012-05-02 Katherine Deibel, Fluency in Information Technology 33
The Calculation demo
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 valuesin the first two text boxes
How JS multiplies the values
How JS puts the product in the last text box
2012-05-02 Katherine Deibel, Fluency in Information Technology 34
The Basic Idea of Event Handlers
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-02 Katherine Deibel, Fluency in Information Technology 35
A Major Event: Page Loaddocument.write()
2012-05-02 Katherine Deibel, Fluency in Information Technology 36
Build A Page On-The-Fly
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-02 Katherine Deibel, Fluency in Information Technology 37
Demo: document.write()
<head> <script type="text/javascript"> var school=confirm("Are you a Husky?"); if (school == 1) { document.write("<h1>HUSKIES!!!</h1>"); document.bgColor = 'purple'; document.fgColor = 'gold'; } else { document.write(" <h5>Cougars.... yay</h5>"); document.bgColor = 'red'; document.fgColor = 'white'; } </script></head>
2012-05-02 Katherine Deibel, Fluency in Information Technology 38
Demo: document.write()
By deciding before the page is set-up, the whole look and feel can be controlled!
2012-05-02 Katherine Deibel, Fluency in Information Technology 39
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
Summary
2012-05-02 Katherine Deibel, Fluency in Information Technology 40
Recommended