OUTLINE
• Building blocks of form
• Properties and methods of form
• Form events: mouse events, key events
• Form objects and elements
• Changing attribute value dynamically
BUILDING BLOCKS OF FORM
• Form is a section of HTML document that contains elements like radio
buttons, text boxes, check boxes and option lists
• HTML form elements are known as controls
• An HTML document consists of its basic building blocks which are
Tags
Attributes
• Syntax:
<tag_name attribute_name=“att_value”>content</tag_name>
PROPERTIES AND METHODS OF FORM
• HTML forms are simple forms that has been used to collect data from
users
• Form element has attributes like
name : specifies name of the from
action: used to specify URL that processes the form
submission
method: HTTP method to use when submitting a form
FORM EVENTS
FORM EVENTS
FORM OBJECTS AND ELEMENTS
• Everything you see on a web site is considered an object
• First object is window
• Window contains an HTML document referred as document
• Document can have one or more forms and form can have one or more
elements
• Form objects are stored in an array called forms, and it can be referred
as
window.document.forms[2];
FORM OBJECTS AND ELEMENTS
• Form can be referred using name too
window.document.forms.formname.elementname.value;
• Elements on a form are stored in an array called elements
• You can access an element by using element’s index
window.document.forms.formname.elements[3];
FORM OBJECTS AND ELEMENTS
with Statement
• Time-saving shortcut can be used in JavaScript to reduce the amount of
typing they have to do when referencing attributes of elements
• This time-saving shortcut is use of with statement
• For example, if there is a form named ‘f1’ and this form has elements
like textbox ‘t1’,’t2’, t3’ and ‘t4’ and checkbox ‘ch1’
• If you want to access the ‘value’ attribute of all textboxes, instead of
writing the full path, you can use a with statement to save keystrokes
when writing your java script
with( window.document.forms.f1)
{ alert(t1.value); alert(t2.value); alert(t3.value);
if(ch1.checked==true)
t4.value = t1.value + t2.value + t3.value ; }
