Bài giảng Thiết kế Web: Chương 17 (tt) - Từ Thị Xuân Hiền

Chương này tiếp tục giới hiệu về mô hình đối tượng với đối tượng form. Các nội dung được trình bày trong chương này gồm có: Đối tượng form, các phần tử trên form, thay đổi nội dung động trên trang. Mời các bạn cùng tham khảo.

CHƯƠNG XVII(tt) MƠ HÌNH ĐỐI TƯỢNG      I Đối tượng form Form là một thành phần dùng để thu thập dữ liệu,  thơng tin từ người dùng. Mỗi phần tử trong form là  một đối tượng trong DOM. Do đó mỗi phần tử trên  form cũng có những sự kiện và phương thức của nó Các sự kiện của các phần tử trên form .  Phần tử  Tên sự kiện  Button  onClick Checkbox onClick Form OnSubmit, onReset Textbox OnBlur,OnChange,OnFocus,Onselect Radio OnClick Reset button OnClick Dropdown menu OnBlur,onChange,onFocus,onSelect Submit button  OnClick Textarea OnBlur,OnChange,OnFocus,Onselect Thuộc tính của form T/tính Mơ tả Trả về đường dẫn  (URL) đến tập tin  xử lý của form thứ  i  Length Trả về số form  trên trang web Hoặc trả về số  phần tử trên form  thứ i Name Trả về giá trị tên  của form thứ i Method Các định phương  thức của form thứ i elements mảng element chứa  Action Ví dụ Document.forms[i].action Countform=document.forms.length Countfield=document.forms[i].length Nameform=document.forms[i].name Methodform=document.forms[i].method document.forms[i].elements[j].value Ví dụ: function kq() { sptform=document.form1.length document.form1.spt.value=sptform tenform=document.forms[0].name document.form1.formname.value=tenform } T/ tính  Các thuộc tính trên mảng element  Mơ tả  Ví dụ  Xác định tên của  document.forms[i].elements[j].name Name  phần tử j trên  form thứ i Type Value Xác định lọai của  đối tượng  document.forms[i].elements[j].type Xác định giá trị của  document.forms[i].elements[j].value phần tử thứ j trong  form i.  Xác định phần  document.form[i] tử thứ j có được  elements[j].checked Checked checked khơng trả về giá trị true hoặc  false Thiết lập chế  document.form[i].elements[j] Disabled độ vơ hiệu hóa  disabled đối tượng Kiểm tra phần  document.form[i].elements[j] isDisable tử có bị vơ hiệu  isDisable hóa hay khơng Cho phép/khơng  document.forms[i].elements[j] thay đổi nội  readOnly readOnly dung của phần  tử  Ví dụ: function loadform() { document.form1.ok.disabled=true; } function validateform() { a=document.form1.user.value; if(a!="") document.form1.ok.disabled=false; else document.form1.ok.disabled=true; } Phương thức trên mảng element  • Focus (): Đưa con trỏ về lại text box hoặc  dropdownmenu  document.forms[i].elements[j].focus() Ví dụ: document.form1.user.focus(); Lưu ý:  Nếu ta đang làm việc trên document hiện hành, thì có  thể bỏ qua document nameForm.nameField.property hoặc  nameForm.nameField.method 4) II Các phần tử trên from Thao tác trên trường radio Để lấy giá trị của trường radio ta phải sử dụng đến  mảng element. Duyệt qua tất cả các phần tử và  kiểm tra phần tử đó có được checked khơng ?   Cú pháp: Countfield=nameform.length for(var i=0 ; ispt­1 Ví dụ: function chonkhoa() { option=document.forms[0].khoa.options[document