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

pdf17 trang | Chia sẻ: thuongdt324 | Ngày: 01/12/2020 | Lượt xem: 8 | Lượt tải: 0download
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