Bài giảng Nhập môn HTML và thiết kế Web: Bài 14 - Xử lý form và các sự kiện cho các phần tử trong form bao gồm những nội dung về form Action, Method, Text fields, Command Button, Check Box, Radio, Combo box.
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 Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin NỘI DUNG Form: Action, Method Text fields Command Button Check Box Radio Combo box Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin FORM Form dùng để tương tác với người dùng Đối tượng Form gồm thuộc tính: Accept: Xác định danh sách kiểu MIME Action: Thuộc tính trình bày vị trí script dùng để xử lý form sau form hoàn thành gửi (submit) Method: Thuộc tính định phương thức mà liệu gửi đến server Cú pháp METHOD=(POST|GET) Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin FORM DOM Example Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin TEXTFIELD Các kiện sử dụng trường văn bản: onFocus(): Xuất người dùng nháy chuột vào trường Text OnBlur(): Xuất người dùng di chuyển khỏi trường text cách nhấp chuột bên ngồi nhấn phím tab OnChange(): Xuất người dùng có thay đổi bên trường Text sau di chuyển khỏi trường văn Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin TEXTFIELD DOM Example function writeText(value) { alert(value);} Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin COMMAND BUTTON Dùng kiện onClick(): DOM Example function Copy(value) { myform.txtPaste.value = value; } Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin CHECKBOX Check box hoạt động theo chế bật – tắt Sử dụng kiện onClick(): function Switch(){ var theCheckBox= window.document.myform.chkSwitch; if(theCheckBox.checked==false) { document.bgColor='white';} else{document.bgColor='blue';} } Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin RADIO Tương tự checkbox, khác cách dùng form Check box bật/tắt lại radio khác, bật tất radio khác chế độ tắt, thay đổi trạng thái radio cách nhấp vào checkbox Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin RADIO 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 Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin COMBOBOX VÀ LISTBOX Sử dụng kiện onBlue, onFocus, onChange function Show(str) {alert(str + " chọn");} Xanh Đỏ Tím Xanh Đỏ Tím Bộ mơn Hệ thống thông tin – Khoa Công nghệ thông tin MỘT SỐ VÍ DỤ Ví dụ 1: Kiểm tra tính hợp lệ trường 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; } Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin MỘT SỐ VÍ DỤ Ví dụ 1: Kiểm tra tính hợp lệ trường 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: Bộ môn Hệ thống thông tin – Khoa Công nghệ thơng tin MỘT SỐ VÍ DỤ Ví dụ 2: Kiểm tra tính hợp lệ 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 Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin COMMAND BUTTON Dùng kiện onClick(): DOM Example