Professional Documents
Culture Documents
Lecture 15
More on Interactive Forms
(Web Development Lecture 5)
1
Focus of the last lecture was on
Interactive Forms
• We looked at the utility of forms on Web
pages
4
<FORM
name=“name”
method=“get” or “post”
action=“URL”
>
</FORM>
5
Single-Line Text Input Field
<INPUT
type=“text”
name=“name”
size=“widthInCharacters”
maxlength=“limitInCharacters”
value=“initialDefaultValue”
>
6
Password Input Field
<INPUT
type=“password”
name=“name”
size=“widthInCharacters”
maxlength=“limitInCharacters”
value=“initialDefaultValue”
>
7
Hidden Input
<INPUT
type=“hidden”
name=“name”
value=“value”
>
8
Checkbox Input Element
<INPUT
type=“checkbox”
name=“name”
checked
value=“checkedValue”
>
9
Radio Button Input Element
<INPUT
type=“radio”
name=“name”
checked
value=“selectedValue”
>
10
File Upload Input Element
<INPUT
type=“file”
name=“name”
value=“nameOfSelectedFile”
enctype=“fileEncodingType”
>
11
Reset Button Input Element
<INPUT
type=“reset”
value=“buttonLabel”
>
12
Submit Button Input
<INPUT
type=“submit”
name=“name”
value=“buttonLabel”
>
13
8 Possible Values for the “type”
Attribute of <INPUT> tag
1. text
2. password
3. hidden
4. checkbox
5. radio
6. file
7. reset
8. submit
14
Multi-Line Text Input Area
<TEXTAREA
name=“areaName”
cols=“width”
rows=“lines”
>
initial default value
</TEXTAREA>
15
Select from a (Drop Down) List
<SELECT
name=“name”
size=“numberOfDisplayedChoices”
multiple
>
<OPTION value=“value1”> text1
<OPTION value=“value2” selected> text2
<OPTION value=“value3”> text2
…
…
</SELECT> 16
17
18
End of the Review of Tags Used in Forms
19
20
Let’s now review what happens when I enter
all the required info and press the “Send
eMail” button?
21
Info contained
in the form
Browser
Server-Side
User’s Script
Computer
Web
Server Message
to the
receiver’s
eMail
22
address
This is what happens when the form is filled correctly.
What if the form is filled incorrectly?
• What if the users leaves one of the
essential fields, blank?
– bhola@hotmail.con
– bhola@yahoo
23
A Reasonable Scenario
• When the “Send eMail” button is clicked, the
browser sends the data collected through the
form to a script running on the Web server
• Examples:
– CGI scripts on Unix servers
– ASP scripts on Windows servers
27
New Concept: Client-Side Scripts
• Small programs that are a part of the Web page
and run on the user’s (client’s) computer
29
Disadvantages
• Client-side scripts do not work with all browsers
31
32
<INPUT
type=“submit”
name=“sendEmail”
value=“Send eMail”
>
35
• This is one way of including JavaScript code in
an HTML document – that is, including a short
JavaScript segment as part of an HTML tag
36
Why JavaScript?
• HTML is great for static Web pages; however,
supports only rudimentary interactivity through
forms and hyperlinks
37
What is JavaScript?
• A programming language specifically designed
to work with Web browsers
• JavaScript:
– Is an interpreted language
– Supports event-driven programming
– Is object-based 38
Object Based?
• Everything that JavaScript manipulates, it
treats as an object – e.g. a window or a button
39
Back to our example …
40
41
<INPUT
type=“submit”
name=“sendEmail”
value=“Send eMail”
onMouseOver=
“if (document.sendEmail.sender.value.length < 1)
window.alert(‘Empty From field! Please correct’)”
>
42
<INPUT
type=“submit”
name=“sendEmail”
value=“Send eMail”
onMouseOver=“checkForm()”
>
43
<INPUT
type=“submit”
name=“sendEmail”
value=“Send eMail”
onMouseOver=
“if (document.sendEmail.sender.value.length < 1)
window.alert(‘Empty From field! Please correct’)”
>
<INPUT
type=“submit”
name=“sendEmail”
value=“Send eMail”
onMouseOver=“checkForm()”
44
>
checkForm()
• JavaScript understands onMouseOver – it is
one of the pre-defined keywords in JavaScript
49
The main code segment that goes between the
<SCRIPT>, </SCRIPT> tags in the HEAD:
function checkForm() {
if ( document.sendEmail.sender.value.length < 1) {
window.alert( “Empty From field! Please correct” );
}
}