Đối tượng form

Chia sẻ: Nguyen Ha | Ngày: | Loại File: PDF | Số trang:52

Thêm vào BST

Báo xấu

77
lượt xem 5
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

CHƢƠNG XVII(tt) MÔ HÌNH ĐỐI TƢỢNG .I. 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ó a) Các sự kiện của các phần tử trên form . .Phần tử Button Checkbox Tên sự kiện onClick onClick

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Đối tượng form

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ó a) 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
2. Thuộc tính của form T/tính Mô tả Ví dụ Action Trả về đường dẫn Document.forms[i].action (URL) đến tập tin xử lý của form thứ i Length Trả về số form trên Countform=document.forms.length trang web Countfield=document.forms[i].length Hoặc trả về số phần tử trên form thứ i Name Trả về giá trị tên Nameform=document.forms[i].name của form thứ i Method Các định phương Methodform=document.forms[i].method thức của form thứ i elements mảng element chứa document.forms[i].elements[j].value các phần tử trên form
Ví dụ: function kq() { sptform=document.form1.length document.form1.spt.value=sptform tenform=document.forms[0].name document.form1.formname.value=tenform }
3. Các thuộc tính trên mảng element T/ tính 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. Xác định lọai của document.forms[i].elements[j].type Type đối tượng Xác định giá trị của document.forms[i].elements[j].value phần tử thứ j trong Value form i.
Xác định phần tử document.form[i]. Checked thứ j có được elements[j].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 đối disabled tượng Kiểm tra phần tử document.form[i].elements[j]. isDisable có bị vô hiệu hóa isDisable hay không Cho phép/không document.forms[i].elements[j] readOnly thay đổi nội .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; }
4) 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
II. Các phần tử trên from 1. 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 ; i
Ví dụ: function chontrinhduyet() { count=document.form1.length; for(i=0; i
Ví dụ : Checkbox function check() { coffee=document.forms[0].coffee answer=document.forms[0].answer txt="" for (i = 0; i
2. Thao tác trên dropdownmenu a) Thuộc tính và phƣơng thức của dropdownmenu  Thuôc tính Thuộc tính Mô tả Ví dụ Trả về số phần tử spt=nameform.namefield.length length trong danh sách dropdownmenu. trả về chỉ số của spt=nameform.namefield. selectedIndex phần tử được chọn selectedIndex trong danh sách mảng option được đánh chỉ số từ options 0->spt-1
Ví dụ: function chonkhoa() { option=document.forms[0].khoa.options[document. forms[0].khoa.selectedIndex].text txt=document.forms[0].chon.value txt=txt + option document.forms[0].chon.value=txt }
III. THAY ĐỔI NỘI DUNG ĐỘNG TRÊN TRANG 1. Thay đổi nội dung trên trang dựa vào inner và outer Ta dùng đặc tính inner và outer để thay đổi nội dung hoặc lấy giá trị của một vùng nào đó trên trang web. a) Phân biệt giữa inner và outer  Inner là nội dung chứa bên trong của đối tượng chứa ID. Inner gồm có  InnerHTML lấy nội dung text và tag HTML bên trong đối tượng ID  innerText: chỉ lấy nội dung text bên trong dối tượng ID
 Outer là phần inner và bản thân đối tượng chứa ID. Outer gồm có  outerHTML lấy nội dung text và tag HTML của cả đối tượng ID  outerText : lấy nội dung text Ví dụ: Monitor SAMSUNG inner outer
Ví dụ: Var s1,s2 s1=Intro.outerText s2=Intro.innerText thì s1 và s2 đều nhận giá trị Monitor SAMSUNG Ví dụ s1=Intro.outerHTML s2=Intro.innerHTML Thì s1=Monitor SAMSUNG Và s2=Monitor SAMSUNG
Ví dụ:thiết kế form có dạng:
function chonsp() { prod=document.form1.masp.value; hinhsp=document.forms[0].hinh.options[document. forms[0].hinh.selectedIndex].text; price=document.form1.giasp.value; ma.innerText=prod; hinh.innerText=hinhsp; gia.innerText=price }
function ChangeImage(path) { h.innerHTML="" } Gọi hàm ChangeImage(value) hình 1 hình 2 hình 3