Tài liệu Giáo Trình Java phần 15 doc
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (130.64 KB, 5 trang )
{
form.result.value = form.entry.value * 2;
} // end if (3)
} // end if (1)
}
1.1.1. PHẦN TỬ FILE UPLOAD
Phần tử này cung cấp cho form một cách để người sử dụng có thể chỉ rõ một file đa vào
form xử lý. Phần tử file Upload được chỉ định rõ trong JavaScript bằng đối tượng
FileUpload.
Đối tượng chỉ có hai thuộc tính là name và value, cả hai đều là giá trị xâu nh các đối
tượng khác. Không có cách thức hay thẻ file cho đối tượng này.
1.1.2. PHẦN TỬ HIDDEN
Ph
ần tử hidden là phần tử duy nhất trong số tất cả các phần tử của form không được hiển
thị trên Web browser. Trường hidden có thể sử dụng để lu các giá trị cần thiết để gửi tới
server song song với sự xuất ra từ form (form submission) nhưng nó không được hiển
thị trên trang. Mọi người có thể sử dụng trong JavaScript để lu các giá trị trong suốt một
script và để tính toán không cần form.
Đối tượng hidden chỉ có hai thuộc tính là name
và value, đó cũng là những giá trị xâu
giống các đối tượng khác. Không có cách thức hay thẻ sự kiện nào cho đối tượng này.
1.1.3. PHẦN TỬ PASSWORD
Đối tượng Password là đối tượng duy nhất trong các đối tượng của form mà khi gõ bất kỳ
ký tự nào vào cũng đều hiển thị dấu sao(*). Nó cho phép đa vào những thông tin bí mật
nh đăng ký mật khẩu
Đối tượng Password có 3 thuộc tính giống trường text là: defaultValue, name và value.
Không giống với hai phầ
n tử ở trên, trường Password có nhiều cách thức hơn(focus(),
blur(), and select() ) và tương ứng với các thẻ sự kiện: onFocus, onBlur, and onSelect.
Phần này sẽ được nói kỹ hơn trong đối tượng text.
1.1.4. PHẦN TỬ RADIO
Đối tượng radio gần giống sự bật tắt checkbox khi có hai nút radio kết hợp thành một
nhóm. Khi nhiều radio được kết hợp thành một nhóm, chỉ có một nút được chọn trong bất
kỳ một thời điể
m nào. Ví dụ dòng lệnh sau tạo ra một nhóm radio có ba nút tên là test:
<INPUT TYPE="radio" NAME="test" VALUE="1" chECKED>1<BR>
<INPUT TYPE="radio" NAME="test" VALUE="2">2<BR>
<INPUT TYPE="radio" NAME="test" VALUE="3">3<BR>
Nhóm các nút radio lại bằng cách đặt cho chúng có cùng một tên trong các thẻ INPUT.
Có một vài thuộc tính để kiểm tra trạng thái hiện thời của một nhóm nút radio. Bảng sau
hiển thị các thuộc tính và cách thức của đối tượng radio.
Bảng? . Các thuộc tính và cách thức của đối tượng radio.
Thuộc tính và
cách thức
Mô tả
checked Mô tả trạng thái hiện thời của phần tử radio (thuộc tính)
defaultChecked Mô tả trạng thái mặc định của phần tử (thuộc tính)
index Mô tả thứ tự của nút radio được chọn hiện thời trong một
nhóm
length Mô tả tổng số nút radio trong một nhóm
name Mô tả tên của phần tử được chỉ định trong thẻ INPUT
(thuộc tính)
value
Mô tả giá trị hiện thời của phần tử được định ra trong thẻ
INPUT (thuộc tính)
click() Mô phỏng một click trên nút radio (cách thức)
Cũng nh checkbox, radio chỉ có một thẻ sự kiện là onClick.
Không có bất kỳ một đối tượng form nào có thuộc tính index và length. Do một nhóm
radio gồm nhiều phần tử radio, nên chúng được đặt trong một mảng các nút radio và
được đánh số từ 0. Trong ví dụ nhóm radio có tên test ở trên, nếu nhóm đó nằm trong một
form có tên là "testform", bạn có thể gọi tới nút radio thứ hai bằng tên "testform.test[1]"
và có thể kiểm tra giá trị của nó bằng "testform.test[1].checked"
Để minh hoạ rõ cách dùng đối tượng radio, ta xem ví dụ sau:
Ví dụ
:
<HTML>
<HEAD>
<TITLE>radio button Example</TITLE>
<SCRIPT>
<! HIDE FROM OTHER BROWSERS
function calculate(form,callingField) {
if (callingField == "result") {
if (form.action[1].checked) {
form.entry.value = Math.sqrt(form.result.value);
} else {
form.entry.value = form.result.value / 2;
}
} else {
if (form.action[1].checked) {
form.result.value=form.entry.value*form.entry.value;
} else {
form.result.value = form.entry.value * 2;
}
}
}
// STOP HIDING FROM OTHER BROWSERS >
</SCRIPT>
</HEAD>
<BODY>
<FORM METHOD=POST>
Value: <INPUT TYPE="text" NAME="entry" VALUE=0
onChange="calculate(this.form,this.name);"> <BR>
Action:<BR>
<INPUT TYPE="radio" NAME="action" VALUE="twice"
onClick="calculate(this.form,this.name);"> Double<BR>
<INPUT TYPE="radio" NAME="action" VALUE="square"
onClick="calculate(this.form,this.name);"> Square <BR>
Result: <INPUT TYPE=text NAME="result" VALUE=0
onChange="calculate(this.form,this.name);">
</FORM>
</BODY>
</HTML>
Trong ví dụ này, sự thay đổi từ checkbox ở trên là rất khó nhận biết. Thay cho một
checkbox trong ví dụ trước, ở đây ta sử dụng hai nút radio với hai giá trị khác nhau:
double và square
Nh ta đã biết có thể truy nhập đến các nút radio qua một mảng, do đó hai nút này có thể
truy nhập bằng action[0] và action[1]. Bằng cách này, bạn chỉ cần thay đổi tham chiếu
đến hàm calculate() từ form.square.checked
thành form.action[1].checked.
1.1.5. PHẦN TỬ RESET
Sử dụng đối tượng reset, bạn có thể tác động ngợc lại để click vào nút Reset. Cũng giống
đối tượng button, đối tượng reset có hai thuộc tính là name và value, và một cách thức
click(), một thẻ sự kiện onClick.
Hầu hết những người lập trình khong sử dụng thẻ sự kiện onClick của nút reset để kiểm
tra giá trị của nút này, đối tượng reset thờng dùng để xoá form.
Ví dụ sau minh hoạ cách sử dụng nút reset để xoá các giá trị của form.
Ví dụ:
<HTML>
<HEAD>
<TITLE>reset Example</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<! HIDE FROM OTHER BROWSERS
function clearForm(form) {
form.value1.value = "Form";
form.value2.value = "Cleared";
}
// STOP HIDING FROM OTHER BROWSERS >
//SCRIPT>
</HEAD>
<BODY>
<FORM METHOD=POST>
<INPUT TYPE="text" NAME="value1"><BR>
<INPUT TYPE="text" NAME="value2"><BR>
<INPUT TYPE="reset" VALUE="Clear Form" onClick="clearForm(this.form);">
</FORM>
</BODY>
</HTML>
1.1.6. PHẦN TỬ SELECT
Danh sách lựa chọn trong các form HTML xuất hiện menu drop-down hoặc danh sách
cuộn được của các đối tượng có th
ể được lựa chọn. Các danh dách được xây dựng bằng
cách sử dụng hai thẻ SELECT và OPTION. Ví dụ:
<SELECT NAME="test">
<OPTION SELECTED>1
<OPTION>2
<OPTION>3
</SELECT>
tạo ra ba thành phần của menu thả drop-down với ba lựa chọn 1,2 và 3. Sử dụng thuộc
tính SIZE bạn có thể tạo ta một danh sách cuộn với số phần tử hiển thị ở lần thứ nhất. Để
bật menu drop-down trong một menu cuộn với hai thành phần hiển thị, bạn có thể sử
dụng nh sau:
<SELECT NAME="test" SIZE=2>
<OPTION SELECTED>1
<OPTION>2
<OPTION>3
</SELECT>
Trong cả hai ví dụ trên, người sử dụng chỉ có thể có một lựa chọn. Nếu sử dụng thuộc
tính MULTIPLE, bạn có thể cho phép người sử dụng lựa chọn nhiều hơn một giá trị
trong danh sách lựa chọn:
<SELECT NAME="test" SIZE=2 MULTIPLE>
<OPTION SELECTED>1
<OPTION>2
<OPTION>3
</SELECT>
Danh sách lựa chọn trong JavaScript là đối tượng select. Đối tượng này t
ạo ra một vài
thành phần tương tự các button và radio.
Với các thành phần lựa chọn, danh sách các lựa chọn được chứa trong một mảng được
đánh số từ 0. Trong trường hợp này, mảng là một thuộc tính của đối tượng select gọi là
options.
Cả việc
