Thông tin tài liệu
KHOA CÔNG NGHỆ THÔNG TIN – ĐẠI HỌC KHOA HỌC TỰ NHIÊN 2007 Authored by: Lương Vĩ Minh Bài 5 : Sử dụng Form + Javascript Môn : Lập trình và Thiết kế Web 1 1 Bài 5 : Sử dụ ng Form + Javascript | 9/26/2007 Bài 5 : Sử dụng Form + Javascript Môn : Lập trình và Thiết kế Web 1 2 Bài 5 : Sử dụ ng Form + Javascript | 9/26/2007 1. Yêu cầu: Thiết kế form có nội dung sau: Sử dụng Javascript để kiểm tra thông tin nhập : - Tên đăng nhập không được phép rỗng - Mật khẩu phải chứa ít nhất 5 ký tự - Mật khẩu nhập lại phải trùng với mật khẩu 3 Bài 5 : Sử dụ ng Form + Javascript | 9/26/2007 2. Hướng dẫn thiết kế Form Bước 1: Tạo nền cho form Từ menu Insert Form chọn Form. Mã lệnh HTML tương ứng cho việc tạo một Form: <form method="POST"> </form> Bước 2 : Thiết kế table Từ menu Insert Table * Table phải nằm trong Form 4 Bài 5 : Sử dụ ng Form + Javascript | 9/26/2007 Bước 3: Tạo các controls và text theo mẫu đã yêu c ầu. TEXT BOX Control <input type="text" name="……"> STT TextField Char width Type HTML Code 1 textTenDN 20 Single line <input type="text" name="textTenDN"> 2 textMatKhau 15 Password <input type="password" name="textMatKhau"> 3 textMatKhauGoLai 15 Password <input type="password" name="textMatKhauGoLai"> … … … … … BUTTON Control <input type="submit" value="……" name="……"> STT Button name Value Action HTML Code 1 btDangky Đăng ký Submit <input type="submit" value="Đăng ký" name="btDangky"> 2 btXoa Xóa Reset <input type="reset" value="Xóa" name="btXoa"> 5 Bài 5 : Sử dụ ng Form + Javascript | 9/26/2007 Kết quả : Bước 4: Kiểm tra kết quả thực hiện. - Lưu trang web lại. Nhấn F12 để xem trang web bằng trình duyệt web IE. 6 Bài 5 : Sử dụ ng Form + Javascript | 9/26/2007 3. Hướng dẫn sử dụng Javascript - Bước 1 : Thống nhất tên các controls sử dụng trong form trên. STT Tên control Loại control 1 textTenDN Textbox 2 textMatkhau Textbox 3 textMatkhaugolai Textbox 4 btDangky Button 5 btXoa Button - Bước 2 : Tạo một trang web bất kỳ có tên Dangkythanhcong.htm. Trang web này sẽ hiện thị khi người dùng nhấn vào nút “Đăng ký” và việc kiểm tra dữ liệu thành công. - Bước 3 : Đặt tên cho Form là DKUser - Bước 4 : Nhập đoạn Javascript vào trong tab <head> <form name="DKUser" method="POST"> 7 Bài 5 : Sử dụ ng Form + Javascript | 9/26/2007 - Bước 5 : gọi hàm kiểm tra khi bấm vào nút submit. Tại phần khai báo thẻ <form> của trang web, sửa lại mã lệnh sau: <form name="DKUser" method="POST"> <form name="DKUser" method="POST" action="Dangkythanhcong.htm" onsubmit="return KiemTra()"> o Thuộc tính name: Đặt tên cho form đang sử dụng. o Thuộc tính method: Chọn hình thức truyền dữ liệu với server (Post/Get) o Thuộc tính action: Chỉ định địa chỉ URL được gọi khi button (có thuộc tính submit) được nhấn. o Thuộc tính onsubmit: Chỉ định hàm KiemTra() sẽ được gọi khi button (có thuộc tính submit) được nhấn. Nếu hàm trả về giá trị False thì thuộc tính action bị bỏ qua và ngược lại. - Bước 6 : Kiểm tra kết quả trang web o Lưu trang web lại. o Nhấn F12 để mở trang web bằng IE. o Tạo các trường hợp nhập dữ liệu khác nhau để kiểm tra kết quả trang web: Lần 1: Tên đăng nhập bị bỏ trống. 8 Bài 5 : Sử dụ ng Form + Javascript | 9/26/2007 Lần 2: Mật khẩu bị bỏ trống. Lần 3: Mật khẩu ngắn hơn 5 ký tự. Lần 4: Gõ lại mật khẩu bị bỏ trống. Lần 5: Nhập đầy đủ, đúng các thông tin cần thiết. 4. Bài tập thực hành: Tìm hiểu thêm các control khác (listbox, combo box, radio Button, checkbox, …) và thuộc tính của nó. Hoàn thành đầy đủ form đăng ký theo yêu cầu. . Lương Vĩ Minh Bài 5 : Sử dụng Form + Javascript Môn : Lập trình và Thiết kế Web 1 1 Bài 5 : Sử dụ ng Form + Javascript | 9/26/2007 Bài 5 : Sử dụng Form + Javascript Môn : Lập trình. Bài 5 : Sử dụ ng Form + Javascript | 9/26/2007 2. Hướng dẫn thiết kế Form Bước 1: Tạo nền cho form Từ menu Insert Form chọn Form. Mã lệnh HTML tương ứng cho việc tạo một Form: . Môn : Lập trình và Thiết kế Web 1 2 Bài 5 : Sử dụ ng Form + Javascript | 9/26/2007 1. Yêu cầu: Thiết kế form có nội dung sau: Sử dụng Javascript để kiểm tra thông tin nhập : - Tên đăng
Ngày đăng: 24/07/2014, 15:21
Xem thêm: Sử dụng Form + Javascript docx
