slide môn học HDJ bài 10 handling form and form element events

Web Page Programming with HTML,DHTML & JavaScript/Session 10/ 2 of 18 Objectives  Work on form object and form elements  Handle form object events  Form validation... Web Page Progr

Trang 1

Handling Form and Form Element Events

Session 10

Trang 2

Web Page Programming with HTML,DHTML &

JavaScript/Session 10/ 2 of 18

Objectives

 Work on form object and form elements

 Handle form object events

 Form validation

Trang 3

Form Object

 Form object consist of three attributes:

 Accept

 Action

 Method

 For Example:

<Form ACTION="Simple.htm“

Accept=“TEXT/HTML” Method=“POST”>

Trang 4

Textfield Object (1)

onChange events

 The onFocus event occurs when user clicks inside a text field

 onBlur happens when user moves out of a text field

by clicking outside of it, or hitting "tab."

 onChange happens when user changes what's in the text field and then moves outside the text field

For Example:

<input type="text" name="first_text"

onFocus="writeIt('focus');"

onBlur="writeIt('blur');"

onChange="writeIt('change');">

Trang 5

Textfield object(2)

Trang 6

Command Button object(1)

event

 The onClick event occurs when user clicks on a command button

<INPUT TYPE="button" value="Copy" onClick="writeIt(myfm.first_text.value);">

Trang 7

Command Button object(2)

Trang 8

Checkbox Object (1)

 A Checkbox is an HTML form object that behaves as a toggle switch

 Checkbox can have either checked or unchecked

 Like button checkbox also understands onClick event

Trang 9

Checkbox Object(2)

Trang 10

Option Button/Radio Button

object(1)

 Radio buttons are almost exactly like checkboxes with respect to JavaScript

 Radio buttons are different Once a radio button is on, it stays on until another one is selected Then the first one goes off

 Option or radio button also understands onClick event.

Trang 11

Option Button/Radio Button

object(1)

Trang 12

ComboBox/Select object(1)

 A ComboBox object on an HTML form

appears as drop-down list or a scrollable

list of selectable items

 To conserve form space, the scrollable

list of selectable items is used

and onChange events

Trang 13

ComboBox/Select object(2)

Trang 14

Form Validation(1)

 Validate each and every important field by ensuring that none of the fields are empty

 Also the fields should not contain any invalid information.

 Consider an example:

<HTML>

<HEAD>

<TITLE> Form Events </TITLE>

Trang 15

<! Web Page Programming with HTML,DHTML &

Form Validation(2)

function validateFirstName() {

var str= form1.fname.value;

if(str.length==0) {

alert(" The first name cannot be empty");

return false;

} return true }

function validateLastName() {

var str= form1.lname.value;

if(str.length==0) {

alert(" The last name cannot be empty");

return false;

} return true;

}

Trang 16

Form Validation(3)

function validateEmail()

{

var str= form1.email.value;

if(str.length==0)

{

alert(" The Email field cannot be empty");

return false;

}

function processForm()

{

disp=open("", "result")

disp.document.write("<TITLE> Result Page </TITLE>"+"<PRE>")

disp.document.write("<H2 ALIGN='CENTER'>"+

"Thanks for signing in"+"</H2>"+"<HR>"+"<BR><BR>")

disp.document.write("First name \t\t: "+form1.fname.value+"<BR>")

disp.document.write("Last name \t\t: "+form1.lname.value+"<BR>")

disp.document.write("Email \t\t\t: "+form1.email.value+"<BR>")

disp.document.write("Your Comments \t\t: "+form1.comment.value+"<BR>")

disp.document.write("<PRE>")

Trang 17

Form Validation(4)

if(disp.confirm("Is this information correct"))

disp.close()

}

// >

</SCRIPT>

</HEAD>

<H2 ALIGN="CENTER"> Handling Form Events</H2><HR>

<FORM name="form1"><P> First Name : <INPUT TYPE="text"

NAME="fname" size=10 onBlur="validateFirstName()">

Last Name : <INPUT TYPE="text" NAME="lname" size=15

onBlur="validateLastName()"></p>

<P> Email : <INPUT TYPE="text" NAME="email" size=10 onBlur="validateEmail()">

Comments : <TEXTAREA NAME="comment" rows=4 cols=30 > Enter your comments

</TEXTAREA></p>

<P ALIGN="CENTER"><INPUT TYPE="button" value="Submit this form"

onClick="processForm()">

</FORM>

</BODY>

</HTML>

Trang 18

Form Validation(5)

Định dạng
Số trang	18
Dung lượng	368,5 KB