�ݺ�ߣ

SỬ DỤNG FORM VÀ CÁC SỰ
KIỆN CHO CÁC PHẦN TỬ
TRONG FORM

Session 10

Mục tiêu bài học
 Làm việc với đối tượng form và các thành phần
trên Form
 Sử dụng các sự kiện của đối tượng Form
 Kiểm tra tính hợp lệ của Form

Web Page Programming with HTML,DHTML & JavaScript/Session 10/ 2 of 18

Đối tương Form
 Đối tượng Form chứa 3 thuộc tính:
 Accept
 Action
 Method
 Ví dụ:
<Form ACTION="Simple.htm“ Accept=“TEXT/HTML”
Method=“POST”>


Đối tượng Textfield (1)
 Textfield nhận biết các sự kiện onBlur, onFocus và
onChange
 onFocus xuất hiện khi nhấp chuột vào bên trong trường văn bản.
 onBlur xảy ra khi người dùng di chuyển ra khỏi trường văn bản

 onChange xảy ra khi người dùng có sự thay đổi trong trường văn

bản và sau đó di chuyển ra khỏi trường văn bản
Ví dụ:
<input type="text" name="first_text" onFocus="writeIt('focus');"
onBlur="writeIt('blur');"
onChange="writeIt('change');">


Đối tượng Textfield(2)


Đối tượng Command Button(1)
 Command button nhận biết sự kiện onClick
 onClick xuất hiện khi người sử dụng nhấp chuột
vào command button
<INPUT TYPE="button" value="Copy"
onClick="writeIt(myfm.first_text.value);">


Đối tượng Command Button(2)


Đối tượng Checkbox(1)
 Checkbox là một đối tượng form HTML, hoạt
động theo cơ chế bật tắt
 Checkbox có thể được Check hoặc không
 Giống như nút lệnh checkbox cũng hiểu được sự
kiện onClick


Đối tượng Checkbox(2)


Nút lệnh tuỳ chọn/Đối tượng
Radio Button (1)
 Radio buttons gần giống như checkboxes
 Sự khác biệt ở đây là chỉ có một Radio được chọn.
Khi một Radio được chọn, nó sẽ giữ nguyên sự
lựa chọn đó cho đến khi nút khác được chọn.
 Radio button hiểu được sự kiện onClick.


Nút tuỳ chọn/ Đối tượng Radio
Button (1)


ComboBox/Đối tượng Select(1)
 Đối tượng ComboBox trong form HTML xuất
hiện giống như một danh mục sổ xuống hoặc danh
mục cuộn của các tuỳ chọn
 Có thể sử dụng thanh cuộn để thay đổi sự hiển thị
danh sách các lựa chọn
 ComboBox hỗ trợ các sự kiện onBlur, onFocus,
and onChange


ComboBox/Đối tượng Select
(2)


Kiểm tra tính hợp lệ của Form(1)
 Việc kiểm tra rất quan trọng, vì có thể có trường
không chứa dữ liệu.
 Cũng có thể có trường chứa dữ liệu không hợp lệ.
 Xem ví dụ sau:

<HTML>
<HEAD>
<TITLE> Form Events </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--

Kiểm tra tính hợp lệ của Form(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;
}

Kiểm tra tính hợp lệ của
Form(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 tt: "+form1.fname.value+"<BR>")
disp.document.write("Last name tt: "+form1.lname.value+"<BR>")
disp.document.write("Email ttt: "+form1.email.value+"<BR>")
disp.document.write("Your Comments tt: "+form1.comment.value+"<BR>")
disp.document.write("<PRE>")


Form(4)
if(disp.confirm("Is this information correct"))
disp.close()
}
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<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()">
<INPUT TYPE="reset"></P>
</FORM>
</BODY>
</HTML>

Form(5)


�ݺ�ߣ

Session 10 Final

More Related Content

Viewers also liked (7)

Similar to Session 10 Final (20)

More from SamQuiDaiBo (20)

Recently uploaded (8)

Session 10 Final