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

       Session 9
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 For...
Đối tương Form
   Đối tượng Form chứa 3 thuộc tính:
       Accept
       Action
       Method
   Ví dụ:
    <Form ACT...
Đối tượng Textfield (1)
    Textfield nhận biết các sự kiện onBlur, onFocus và
     onChange
        onFocus xuất hiện k...
Đối tượng Textfield(2)




                Web Page Programming with HTML,DHTML & JavaScript/Session 9/ 5 of 18
Đố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ộ...
Đối tượng Command Button(2)




              Web Page Programming with HTML,DHTML & JavaScript/Session 9/ 7 of 18
Đố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 ...
Đối tượng Checkbox(2)




               Web Page Programming with HTML,DHTML & JavaScript/Session 9/ 9 of 18
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ỉ ...
Nút tuỳ chọn/ Đối tượng Radio
Button (1)




               Web Page Programming with HTML,DHTML & JavaScript/Session 9/ 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 dan...
ComboBox/Đối tượng Select
(2)




              Web Page Programming with HTML,DHTML & JavaScript/Session 9/ 13 of 18
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ó...
Kiểm tra tính hợp lệ của Form(2)
     function validateFirstName()
     {
      var str= form1.fname.value;
      if(str.l...
Kiểm tra tính hợp lệ của
Form(3)
 function validateEmail()
     {
      var str= form1.email.value;
      if(str.length==0...
Kiểm tra tính hợp lệ của
Form(4)
 if(disp.confirm("Is this information correct"))
 disp.close()
 }
    //-->
</SCRIPT>
</H...
Kiểm tra tính hợp lệ của
Form(5)




                Web Page Programming with HTML,DHTML & JavaScript/Session 9/ 18 of 18
Upcoming SlideShare
Loading in …5
×

Session 09 Final

928 views

Published on

Published in: Business, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
928
On SlideShare
0
From Embeds
0
Number of Embeds
107
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Session 09 Final

  1. 1. SỬ DỤNG FORM VÀ CÁC SỰ KIỆN CHO CÁC PHẦN TỬ TRONG FORM Session 9
  2. 2. 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 9/ 2 of 18
  3. 3. Đố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”> Web Page Programming with HTML,DHTML & JavaScript/Session 9/ 3 of 18
  4. 4. Đố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');"> Web Page Programming with HTML,DHTML & JavaScript/Session 9/ 4 of 18
  5. 5. Đối tượng Textfield(2) Web Page Programming with HTML,DHTML & JavaScript/Session 9/ 5 of 18
  6. 6. Đố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);"> Web Page Programming with HTML,DHTML & JavaScript/Session 9/ 6 of 18
  7. 7. Đối tượng Command Button(2) Web Page Programming with HTML,DHTML & JavaScript/Session 9/ 7 of 18
  8. 8. Đố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 Web Page Programming with HTML,DHTML & JavaScript/Session 9/ 8 of 18
  9. 9. Đối tượng Checkbox(2) Web Page Programming with HTML,DHTML & JavaScript/Session 9/ 9 of 18
  10. 10. 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. Web Page Programming with HTML,DHTML & JavaScript/Session 9/ 10 of 18
  11. 11. Nút tuỳ chọn/ Đối tượng Radio Button (1) Web Page Programming with HTML,DHTML & JavaScript/Session 9/ 11 of 18
  12. 12. 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 Web Page Programming with HTML,DHTML & JavaScript/Session 9/ 12 of 18
  13. 13. ComboBox/Đối tượng Select (2) Web Page Programming with HTML,DHTML & JavaScript/Session 9/ 13 of 18
  14. 14. 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"> <!-- Web Page Programming with HTML,DHTML & JavaScript/Session 9/ 14 of 18
  15. 15. 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; } Web Page Programming with HTML,DHTML & JavaScript/Session 9/ 15 of 18
  16. 16. 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>") Web Page Programming with HTML,DHTML & JavaScript/Session 9/ 16 of 18
  17. 17. Kiểm tra tính hợp lệ của 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> Web Page Programming with HTML,DHTML & JavaScript/Session 9/ 17 of 18
  18. 18. Kiểm tra tính hợp lệ của Form(5) Web Page Programming with HTML,DHTML & JavaScript/Session 9/ 18 of 18

×