Ch11: The Document Object, HTML Forms, The Forms Object

- Ch11 : The Document Object,
HTML Forms,
The Forms Object
1
The Document Object Model
• The DOM (Document Object Model) defines
1. how to navigate and manipulate the HTML structure
2. a set of objects related to HTML
• DOM is a hierarchical tree-like structure consisting of a

collection of objects, all relating to the document.
• Mimics the structure of the HTML document.
• Each element of an HTML document, such as an image,
form, link, or button, can be represented as a JavaScript
object, and each object contains properties and
methods to describe and manipulate these objects.
2
DOM as a Tree
(The HTML document) (The DOM as a tree)
<html> <html>
<head>
<title> My Page </title>
</head> <head> <body>
<body>
<h1> Level 1 </h1>
<h2> Level 2 </h2> <title> <h1> <h2>
<h3>
<h3> Level 3 </h3>
</body>
</html>
“My Page” “Level1” “Leve2”
‘Leve3”
• What is the child nodes of the <html> node?
3
Browser Object Model (BOM)
Current window
Window Navigator Array Document History Locatio Screen

of n
objects object objects objects objects
Windo objects
w
objects
4
The JavaScript Hierarchy
Current window
Window Navigator Array Document History Locatio Screen

of n
objects object objects objects objects
Windo objects
w
objects
anchors[ ] images[ ] forms[ ] links[ ] applet[ ] embeds[ ]

array of array of array of array of array of array of
Anchor Image Form Link applet embedded
object object object object object object
src property Elements[] Elements[] Elements[]

src property src property src property 5
Properties of the document object
• Write a script that displays all the properties of the
document object.
<script language="JavaScript">
// display all the properties of the document
object
</script> 6
<head>
<title>Document Object Properties</title>
</head>
<body bgColor="silver" text="forestgreen" link="blue"
vlink="purple">
<font face="arial" size="+2">
var beg="<em>", end="</em><br>";
document.write("Location: " + beg + “ “ + end);
document.write("Title: " + beg + “ “ + end);
document.write("Background color: " + beg + “ “ + end);
document.write("Link color: " + beg + “ “ + end);
document.write("Vlink color: " + beg + “ “ + end);
document.write("Text color: " + beg + “ “ + end);
document.write("Last modified: " + beg + “ “ + end);
</script>
</body>
• Use the location, title, bgColor, linkColor, vllinkColor, fgColor, 7
lastModified properties of the document object
8
HTML Forms
Server
User input
The user input will be
Processed by
a server side program:
CGI, ASP, PHP
9
HTML Forms
<form action="https://post.uww.edu/exchweb/bin/auth/owaauth.dll"
method="post">
<input type="hidden" name="destination"

value="https://post.uww.edu/exchange/">
Net-ID: <input type="text" class="indent" name="username" size="25">

<br>
Password: <input type="password" name="password" size="25"
maxlength="256">
<br>
<input type="submit" value=" Log On " name="Submit">
<input type="reset" name="Reset"/>
</form>
10
HTML Forms
<form action=“URL to server program" method=“post“>
The body of the form goes here including input devices such as
radio buttons, menu, text boxes,..
</form>
• The action attribute is assigned the URL of the server program

Question: What is the URL of the server program in the previous example?
Question: When the server program is executed?

• When the data is submitted by pressing the submit button.
• The method attributes indicates how the form will be processed.
11
HTML Forms
12
HTML Forms
<form>
<p>Type your name:
<input type = "text" name ="namestring" size = "50"></p>
<p>Talk about yourself here:<br>

<textarea name="comments" rows ="5" cols="50">
I was born...
</textarea></p>
<p>Choose your food:
<input type = "radio" name="choice" value="burger"> Hamburger
<input type = "radio" name="choice" value = "fish"> Fish
<input type = "radio" name="choice" value = "steak"> Steak</p>
<p>
Choose a work place:
<input type = "checkbox" name="place" value="SJ"> San Joise
<input type = "checkbox" name="place" value = "SF"> San Francisco
</p>
<p>
<input type="submit" value = "Submit">
13
<input type="reset" value = "Clear"></p>
</form>
The forms object
• What can JavaScript do for the HTML form?
Before sending the form off to the server,
JavaScript can be used to validate the data that was
entered into the form by using the event handlers.
14
The forms object
• JavaScript provides objects that parallel HTML tags;
JavaScript HTML
forms object <form>
elements object Input devices such as

radio buttons,
checkboxes,…
links object <a>
images object <img>
15
The forms[] Array
• HTML • JavaScript
<html>
<form> window
….
</form>
<form>
document
….
</form>
<form>
… forms[0] forms[1] forms[2]
</form>
</html>
• How do we refer to the second form?

16
document.forms[1]
The forms[] Array
• HTML
<html> • How do we refer to the first form
<form name=“myform”> in JavaScript?
….
</form> document.forms[0]
<form> document.myform
….
</form>
<form>
…
</form>
</html>
17
The elements[] Array
<html>
<form name="form1">
<input type="text"
name="yourname"><br>
<input type="button" name="button1"
value="Push Button">
</form>
<form name= "form2">

<input type = "radio" name="veggie1"
value="bean">Beans
<input type = "radio" name="veggie2"
value="carrot">Carrots
</form>
</html>
18
<html>
<form name="form1"> window
<input type="text"
name="yourname"><br
>
document
<input type="button"
name="button1"
</form> forms[0] forms[1]
“form1” “form2”
<input type = "radio"
name="veggie1"
value="bean">Beans
<input type = "radio" elements[0] elements[1] elements[0] elements[1]
name="veggie2" “yourname” “button1” “veggie1” “veggie2”
</form>
</html> 19
<html>
• How do we refer to the button1 ?
<form name="form1">
<input type="text" document.forms[0].element[1]
name="yourname"><br
> ducment.form1.button1
<input type="button"
name="button1"
</form>

name="veggie1"
value="bean">Beans
name="veggie2"
</form>
</html> 20
Properties of the form object
• The form object in JavaScript has properties that correspond to
the HTML attributes of the form.
<form name=“….” action=“..” method=“…”>
Property What it describes
action The URL of the server
method How the form is sent to the server
name The name of the form
… ….
21
Properties of the element object
• The element object in JavaScript has properties that correspond to
the HTML attributes of the form elements (input devices).
<input type=“…” name=“…” value=“…”>
Property What it describes
form The name of the form where the

element was defined.
name The name of the input device
type The type of the input device

value The text that is associated with the
input device
22
Naming Forms and Buttons
<form name="form1">
Enter your name: <input type="text"
name="namefield" value="name:">
</form>
<form name="form2">
<input type="button" value="Press
here">
</form>
</script>
23
<form name="form1">
name="namefield"
value="name:">
</form>
<form name="form2">
here">
</form>
</script>
• Use the name property of the form object.
24
<form name="form1">
name="namefield"
value="name:">
</form>
<form name="form2">
here">
</form>
</script>
• Use the name and value properties of the element object.
• Name the file lab10.html and turn in (Due: 4/10, 11:59PM)
25

Ch11: The Document Object, HTML Forms, The Forms Object

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Ch11: The Document Object, HTML Forms, The Forms Object

Enviado por

Direitos autorais:

Formatos disponíveis

- Ch11 : The Document Object,

• DOM is a hierarchical tree-like structure consisting of a

Window Navigator Array Document History Locatio Screen

Window Navigator Array Document History Locatio Screen

anchors[ ] images[ ] forms[ ] links[ ] applet[ ] embeds[ ]

src property Elements[] Elements[] Elements[]

<input type="hidden" name="destination"

Net-ID: <input type="text" class="indent" name="username" size="25">

• The action attribute is assigned the URL of the server program

Question: When the server program is executed?

• The method attributes indicates how the form will be processed.

<p>Talk about yourself here:<br>

forms object <form>

elements object Input devices such as

images object <img>

• How do we refer to the second form?

<form name= "form2">

<form name= "form2">

Property What it describes

action The URL of the server

method How the form is sent to the server

name The name of the form

Property What it describes

form The name of the form where the

type The type of the input device

Você também pode gostar