Unit-5
Event Handling and Validating
Forms
Event Handling
• A JavaScript can be executed when an event occurs, like when a
user clicks on an HTML element.
• List of Events
– Onchange()
– Onclick()
– Onmouseover()
– Onmouseout()
– Onkeydown()
– onload()
– Onblur()
– Onfocus()
– onselect()
Onchange()
• The onchange event is often used in combination with validation
of input fields.
DEMO_1,[Link]
Onclick()
• The user clicks an HTML element, onclick() event will call.
DEMO_3,9,[Link]
Onmouseover() & onmouseout()
• Execute a JavaScript when moving the mouse pointer onto an
element.
DEMO_4,5,6,7,[Link]
onkeydown()
• The onkeydown event occurs when the user is pressing a key (on
the keyboard).
• The order of events related to the onkeydown event
– onkeydown
– onkeypress
– Onkeyup
• Syntax
In HTML:
<element onkeydown="myScript">
In JavaScript:
[Link]=function(){myScript};
DEMO_1112,[Link]
onload()
• The onload event occurs when an object has been loaded.
• onload is most often used within the <body> element to execute a
script once a web page has completely loaded all content
(including images, script files, CSS files, etc.).
• The onload event can be used to check the visitor's browser type
and browser version, and load the proper version of the web page
based on the information.
DEMO_14,[Link]
Onfocus() & onblur()
• The onfocus event occurs when an element gets focus.
• The onfocus event is most often used with <input>, <select>, and
<a>.
• The onblur event occurs when an object loses focus.
• The onblur event is most often used with form validation code
(e.g. when the user leaves a form field).
DEMO_16, [Link]
Onselect()
• The onselect event occurs after some text has been selected in an
element.
• The onselect event is mostly used on <input type="text"> or
<textarea> elements.
DEMO_18.html
Form Used by Website
• An HTML Form object provides data gathering functionality to a
web page.
• HTML Form provide a full rang of GUI controls. Additionally
HTML forms can automatically submit data collected in its
controls to a web server.
• The data submitted can be processed at the web server by CGI
programs.
• Java Script allows the validation of data entered into a form at the
client side.
• Java Script can be used to ensure that only valid data is returned
to a web server for further processing.
Form Object
• An HTML Form object provides data gathering functionality to a
web page.
• In interactive web page, user input is captured in a Form.
• HTML provides the <Form> ….. </Form> tags with which an
HTML form can be created to capture user input.
• As soon as the <Form>...</Form> tags are encountered in a
HTML program by a Java Script enabled browser, the browser
creates a 'forms array' in memory.
• The first form object described in the HTML file being held as
array index[0], the second form object described in the HTML
file being held in the array index[1] and so on.
• Common HTML objects used are Text, TextArea, Radio
Buttons etc.
DEMO_19,20,21,22,[Link]
TEXT ELEMENT
• Text element are data entry fields used in HTML forms
• Properties
– Name
– value
• Methods / Event
– onFocus()
– onBlur()
– onSelect()
– onChange()
• Syntax
<input Name=”txt_age” Type=”Text” Value=”20”/>
PASSWORD ELEMENT
• Password element is a unique typeof text entry field. All
keystrokes for this field are displayed as an asterisk[*]
• Properties
– Default Value
– Name
– value
• Methods / Event
– onFocus()
– onBlur()
– onSelect()
– onChange()
• Syntax
<input Name=”txt_age” Type=”password”/>
BUTTON ELEMENT
• Button element is a commonly used form object. It is a generally
used to trigger appropriate form level processing.
• Properties
– Name
– value
• Methods / Event
– onClick()
• Syntax
<input Name=”txt_age” Type=”Button” Value=”Click Me”/>
SUBMIT BUTTON ELEMENT
• Submit button is a special purpose button. The submit button
submits the current data held in each form element to a web
server for further processing.
• Properties
– Name
– value
• Methods / Event
– onClick()
• Syntax
<input Name=”txt_age” Type=”Submit” Value=”Click Me”/>
RESET BUTTON ELEMENT
• Submit button is a special purpose button. When reset button
pressed each data aware form object will be reset to their default
values. All user input values will be initialized.
• Properties
– Name
– value
• Methods / Event
– onClick()
• Syntax
<input Name=”txt_age” Type=”reset” Value=”Click Me”/>
CHECK BOX ELEMENT
• A chek box is an HTML form objet that behaves as a toggle
switch.
• Properties
– Name
– value
• Methods / Event
– onClick()
• Syntax
<input Name=”txt_age” Type=”checkbox” Value=”yes”/>
RADIO ELEMENT
• The radio buton element has two states and can toggle between
them.
• Properties
– Checked
– Index
– Length
– name
• Methods / Event
– onClick()
• Syntax
<input Name=”txt_age” Type=”radio” value=”1”
checked=”checked”/>
TEXT AREA ELEMENT
• The texarea from element provides a way to create a multiple line
can be placed on an HTML form.
• Properties
– Default checked
– Name
– value
• Methods / Event
– onFocus()
– onBlur()
– onSelect()
• Syntax
<input Name=”txt_age” Type=”TextArea” row=”10” cols=”25”/>
SELECT & OPTION ELEMENT
• A Select object on an HTML form appears as drop down list or a
scrollable list of selectable items.
• Properties
– SelectedIndex
– Default Selected
– Index
– Selected
– Text
– value
• Methods / Event
– onFocus()
– onBlur()
– onchanges()