Your SlideShare is downloading. ×
0
Session 09 Final
Session 09 Final
Session 09 Final
Session 09 Final
Session 09 Final
Session 09 Final
Session 09 Final
Session 09 Final
Session 09 Final
Session 09 Final
Session 09 Final
Session 09 Final
Session 09 Final
Session 09 Final
Session 09 Final
Session 09 Final
Session 09 Final
Session 09 Final
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Session 09 Final

706

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
706
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×