Nhập môn HTML và thiết kế Web - Xử lý Form và các sự kiện cho các phần tử trong Form
Form: Action, Method Text fields Command Button Check Box Radio Combo box
Bạn đang xem nội dung tài liệu Nhập môn HTML và thiết kế Web - Xử lý Form và các sự kiện cho các phần tử trong Form, để tải tài liệu về máy bạn click vào nút DOWNLOAD ở trên
Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin
XỬ LÝ FORM VÀ CÁC SỰ KIỆN
CHO CÁC PHẦN TỬ TRONG FORM
NHẬP MÔN HTML VÀ THIẾT KẾ WEB
1
Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin
Form: Action, Method
Text fields
Command Button
Check Box
Radio
Combo box
NỘI DUNG
Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin
Form được dùng để tương tác với người dùng. Đối
tượng Form gồm 3 thuộc tính:
Accept: Xác định danh sách các kiểu MIME
Action: Thuộc tính trình bày vị trí của script sẽ
được dùng để xử lý form sau khi form được
hoàn thành và gửi (submit)
Method: Thuộc tính này chỉ định phương thức
mà dữ liệu được gửi đến server. Cú pháp
METHOD=(POST|GET)
FORM
Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin
DOM Example
FORM
Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin
Các sự kiện có thể sử dụng đối với trường
văn bản:
onFocus(): Xuất hiện khi người dùng nháy chuột
vào trường Text.
OnBlur(): Xuất hiện khi người dùng di chuyển ra
khỏi trường text bằng cách nhấp chuột bên
ngoài hoặc nhấn phím tab
OnChange(): Xuất hiện khi người dùng có sự
thay đổi bên trong trường Text và sau đó di
chuyển ra khỏi trường văn bản.
TEXTFIELD
Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin
DOM Example
function writeText(value) { alert(value);}
<input type="text" name="firstName"
onfocus="writeText('Sự kiện Focus')";
onblur="writeText('Blur');" onchange="writeText('Change');">
<textarea name="txtGhiChu" onfocus="writeText('Focus
of TextArea')" rows="5" cols="10">
TEXTFIELD
Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin
Dùng sự kiện onClick():
DOM Example
function Copy(value) { myform.txtPaste.value = value; }
<input type="button" name="cmdCopy"
value="Copy" onclick="Copy(myform.txtCopy.value)"/>
COMMAND BUTTON
Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin
Check box hoạt động theo cơ chế bật – tắt.
Sử dụng sự kiện onClick():
function Switch(){ var theCheckBox= window.document.myform.chkSwitch;
if(theCheckBox.checked==false)
{ document.bgColor='white';}
else{document.bgColor='blue';} }
<input type="checkbox" checked="checked"
name="chkSwitch" onclick="Switch();" />
CHECKBOX
Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin
Tương tự như checkbox, nhưng khác nhau về cách
dùng trên form. Check box có thể bật/tắt lại nhưng
đối với radio thì khác, một khi đã bật thì tất cả các
radio khác đều ở chế độ tắt, không thể thay đổi
trạng thái của radio này bằng cách nhấp vào nó
như đối với checkbox
RADIO
Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin
DOM Example
function onButton(){
var theCheckBox= window.document.myform.on;
if(theCheckBox.checked==true) {
document.bgColor = 'blue';
myform.on.checked = false;
myform.off.checked = true;} }
function offButton() {
var theCheckBox = window.document.myform.off;
if (theCheckBox.checked == true) {
document.bgColor = 'yellow';
myform.off.checked = false;
myform.on.checked = true; } }
Blue
Yellow
RADIO
Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin
Sử dụng các sự kiện onBlue, onFocus, onChange
function Show(str) {alert(str + " được chọn");}
<select name="list" multiple="multiple"
onchange="Show(myform.list.options[selectedIndex].text);">
Xanh
Đỏ
Tím
<select name="combo"
onchange="Show(myform.combo.options[selectedIndex].text);">
Xanh
Đỏ
Tím
COMBOBOX VÀ LISTBOX
Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin
Ví dụ 1: Kiểm tra tính hợp lệ của các trường trên form
DOM Example
function validateUser() {
var str = myform.txtUser.value;
if (str.length == 0) {
alert("Username không nhận giá trị rỗng");
return false;
}
return true;
}
function validatePass() {
var str = myform.txtPass.value;
if (str.length == 0) {
alert("Password không nhận giá trị rỗng");
return false;
}
return true;
}
MỘT SỐ VÍ DỤ
Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin
Ví dụ 1: Kiểm tra tính hợp lệ của các trường trên form
function print() {
disp = open("KetQua", "In kết quả")
disp.document.write("User name" + myform.txtUser.value);
disp.document.write(" Pass" + myform.txtPass.value);
if (disp.confirm("Đúng người dùng"))
{disp.close();}
}
Username:
Pass:
<input id="btnSubmit" type="button" value="Submit"
onclick="print();"/>
MỘT SỐ VÍ DỤ
Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin
Ví dụ 2: Kiểm tra tính hợp lệ của email
DOM Example
function validateEmail(Formname, EmailName) {
var EmalOK = true;
var Temp = EmailName;
var AtSym = Temp.value.indexOf('@');
var Period = Temp.value.lastIndexOf('.');
var space = Temp.value.indexOf(' ');
var length = Temp.value.length - 1;
if ((AtSym<1)||(Period <=AtSym + 1)||(Period == length)||(space != -1)) {
EmalOK = false;
alert("Email không hợp lệ");
Temp.focus(); }
return EmalOK;
}
MỘT SỐ VÍ DỤ
Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin
Ví dụ 2: Kiểm tra tính hợp lệ của email
Email:
<input id="btnSubmit" type="button" value="Submit"
onclick="validateEmail(myform, myform.txtEmail);"/>
MỘT SỐ VÍ DỤ
Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin
THẢO LUẬN – CÂU HỎI
Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin
Thực hành các ví dụ
Thiết kế các chức năng cho bài tập lớn
BÀI TẬP
