Bài giảng Lập trình ứng dụng mạng - HTML DOM - Forms - Nguyễn Hồ Minh Đức

HTML DOM - Forms
MSc. nguyenhominhduc
Đố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 phần tử trong form
Các phần tử trong form
Các phần tử trong 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
Các sự kiện của các phần tử trên form 
T/tính Mô tả Ví dụ
Action Trả về đường dẫn 
(URL) đến tập tin xử lý 
của form thứ i 
Document.forms[i].action
Length Trả về số form trên 
trang web
Hoặc trả về số phần tử 
trên form thứ i
Countform=document.forms.length
Countfield=document.forms[i].length
Name Trả về giá trị tên của 
form thứ i
Nameform=document.forms[i].name
Method Các định phương thức 
của form thứ i
Methodform=document.forms[i].method
elements mảng element chứa các 
phần tử trên form 
document.forms[i].elements[j].value
Thuộc tính của form
Ví dụ:
function kq()
{
sptform=document.form1.length
document.form1.spt.value=sptform
tenform=document.forms[0].name
document.form1.formname.value=tenform
}
1. Các thuộc tính trên mảng element 
T/ tính Mô tả Ví dụ 
name Xác định tên của phần 
tử j trên form thứ i.
document.forms[i].elements[j].name
type Xác định lọai của đối 
tượng 
document.forms[i].elements[j].type
value Xác định giá trị của phần 
tử thứ j trong form i. 
document.forms[i].elements[j].value
checked Xác định phần tử thứ j 
có được checked không
document.form[i].
elements[j].checked
trả về giá trị true hoặc false
disabled Thiết lập chế độ vô hiệu 
hóa đối tượng
document.form[i].elements[j].disabled
isDisable Kiểm tra phần tử có bị 
vô hiệu hóa hay không
document.form[i].elements[j].isDisable
readOnly Cho phép/không thay 
đổi nội dung của phần 
tử 
document.forms[i].elements[j].readOnly
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;
}
Thao tác với các phần tử trên from
• Ví dụ: form kiểm tra tên, tuổi
Ví dụ:
 Please enter the following details:
 Name:
 <input type=”text” name=txtName 
onchange=”txtName_onchange()”>
 Age:
 <input type=”text” name=txtAge 
onblur=”txtAge_onblur()” size=3 maxlength=3>
 <input type=”button” value=”Check Details” 
name=butCheckForm
 onclick=”butCheckForm_onclick()”>
function butCheckForm_onclick()
{
 var myForm = document.form1;
 if (myForm.txtAge.value == “” || myForm.txtName.value == “”)
 {
 alert(“Please complete all the form”);
 if (myForm.txtName.value == “”)
 {
 myForm.txtName.focus();
 }
 else
 {
 myForm.txtAge.focus();
 }
 }
 else
 {
 alert(“Thanks for completing the form “ + myForm.txtName.value);
 }
}
function txtAge_onblur()
{
 var txtAge = document.form1.txtAge;
 if (isNaN(txtAge.value) == true)
 {
 alert(“Please enter a valid age”);
 txtAge.focus();
 txtAge.select();
 }
}
Thao tác với các phần tử trong form
1. Xem bảng phụ lục để biết thêm chi tiết các thuộc 
tính, phương thức, sự kiện tiêu biểu của từng đối 
tượng.
2. Làm các ví dụ và bài tập thực hành
THAY ĐỔI NỘI DUNG ĐỘNG TRÊN TRANG 
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</
Div>
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="<img src=../images/" + path +" 
width=100 height=100 >"
}
Gọi hàm ChangeImage(value)
 hình 1
 hình 2
 hình 3