›
›

Bàng giảng Thiết kế web - Form - Trần Đình Nghĩa

pdf 35 trang hapham 2570
Download
Bạn đang xem 20 trang mẫu của tài liệu "Bàng giảng Thiết kế web - Form - Trần Đình Nghĩa", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

  • pdfbang_giang_thiet_ke_web_form_tran_dinh_nghia.pdf

Nội dung text: Bàng giảng Thiết kế web - Form - Trần Đình Nghĩa

  1. ĐẠI HỌC SÀI GÒN – KHOA CNTT THIẾT KẾ WEB FORM GV: Trần Đình Nghĩa tdnghia1977@gmail.com ẾT KẾ VÀ LẬP TRÌNH WEB TRÌNH VÀ LẬP KẾ ẾT THI 1
  2. Nội dung bài học trước 1. Giới thiệu về HTML 2. Cấu trúc 1 tài liệu HTML 3. Các tag (thẻ) HTML 4. Hướng dẫn thực hành HTML 5. Gợi ý chọn đề tài cho đồ án ẾT KẾ VÀ LẬP TRÌNH WEB TRÌNH VÀ LẬP KẾ ẾT THI 2
  3. Nội dung 1. Khái niệm và mục đích Form 2. Các đối tượng Form Fields 3. Phương thức GET/POST 4. Tag Marquee 5. Một số tag mở rộng ẾT KẾ VÀ LẬP TRÌNH WEB TRÌNH VÀ LẬP KẾ ẾT THI 3
  4. Khái niệm và mục đích của Form  Cho phép người dùng website nhập dữ liệu  Giúp gởi yêu cầu của người dùng đến trang xử lý trong ứng dụng web  Form nhập liệu được quy định trong thẻ  Những thành phần nhập liệu được gọi là Form Field  text field  password field  multiple-line text field ẾT KẾ VÀ LẬP TRÌNH WEB TRÌNH VÀ LẬP KẾ ẾT THI 4
  5. Khái niệm và mục đích của Form ẾT KẾ VÀ LẬP TRÌNH WEB TRÌNH VÀ LẬP KẾ ẾT THI 5
  6. Tag FORM  Qui định Tag Form:  Các thành phần nhập liệu (Form Fields) là các thẻ HTML được đặt trong thẻ Form.  Các thuộc tính của Form: Name : tên Form Action : chỉ định trang web nhận xử lý dữ liệu từ Form khi có sự kiện click vào button Submit. ẾT KẾ VÀ LẬP TRÌNH WEB TRÌNH VÀ LẬP KẾ ẾT Method: Xác định phương thức chuyển DL THI (GET/POST) 6
  7. Ví dụ Tag FORM  DangNhap.html ẾT KẾ VÀ LẬP TRÌNH WEB TRÌNH VÀ LẬP KẾ ẾT THI 7
  8. FORM Fields Text field Submit button, Password field Reset button, Multiple-line text Generalized button field Label Hidden text field Pull-down menu Check box Scrolled list Radio button Field set File Form control ẾT KẾ VÀ LẬP TRÌNH WEB TRÌNH VÀ LẬP KẾ ẾT THI 8
  9. Form Fields – Text Field Dùng để nhập một dòng văn bản Cú pháp: Ví dụ: 20 Text !!! field 30 ẾT KẾ VÀ LẬP TRÌNH WEB TRÌNH VÀ LẬP KẾ ẾT THI 9
  10. Form Fields – Password Field Dùng để nhập mật khẩu  Ví dụ: ẾT KẾ VÀ LẬP TRÌNH WEB TRÌNH VÀ LẬP KẾ ẾT THI 10
  11. Form Fields – Hidden Text Field  Dùng để truyền 1 giá trị của thuộc tính value khi Form được submit. Hidden Text Field không hiển thị  Cú pháp:  Ví dụ: ẾT KẾ VÀ LẬP TRÌNH WEB TRÌNH VÀ LẬP KẾ ẾT THI 11
  12. Form Fields – Multiline Field Dùng để nhập văn bản nhiều dòng Cú pháp: Ví dụ: 5 ẾT KẾ VÀ LẬP TRÌNH WEB TRÌNH VÀ LẬP KẾ ẾT THI 20 12
  13. Form Fields – Pull-down Menu . Dùng để tạo ra một Combo box . Cú pháp: ẾT KẾ VÀ LẬP TRÌNH WEB TRÌNH VÀ LẬP KẾ ẾT THI 13
  14. Form Fields – Pull-down Menu ẾT KẾ VÀ LẬP TRÌNH WEB TRÌNH VÀ LẬP KẾ ẾT THI 14
  15. Form Fields – Check box  Cú pháp  Ví dụ: ẾT KẾ VÀ LẬP TRÌNH WEB TRÌNH VÀ LẬP KẾ ẾT THI 15
  16. Form Fields – Radio Button  Cú pháp  Chú ý khi sử dụng thuộc tính name của Radio Button ẾT KẾ VÀ LẬP TRÌNH WEB TRÌNH VÀ LẬP KẾ ẾT THI 16
  17. Form Fields – Radio Button  Ví dụ 1  Ví dụ 2 ẾT KẾ VÀ LẬP TRÌNH WEB TRÌNH VÀ LẬP KẾ ẾT THI 17
  18. Form Fields – File Form Control  Dùng để upload 1 file lên server  Cú pháp:  Ví dụ: ẾT KẾ VÀ LẬP TRÌNH WEB TRÌNH VÀ LẬP KẾ ẾT THI 18
  19. Form Fields – Submit button  Nút phát lệnh và gởi dữ liệu của form đến trang xử lý  Mỗi Form chỉ có 1 nút submit  Cú pháp:  Ví dụ: ẾT KẾ VÀ LẬP TRÌNH WEB TRÌNH VÀ LẬP KẾ ẾT THI 19
  20. Form Fields – Reset button  Dùng để trả lại giá trị mặc định cho các control khác trong Form.  Cú pháp:  Ví dụ: ẾT KẾ VÀ LẬP TRÌNH WEB TRÌNH VÀ LẬP KẾ ẾT THI 20
  21. Form Fields – Generalized button  Cú pháp:  Ví dụ: ẾT KẾ VÀ LẬP TRÌNH WEB TRÌNH VÀ LẬP KẾ ẾT THI 21
  22. Form Fields – Field Set Dùng để tạo nhóm các thành phần nhập liệu. Cú pháp: GroupBox’s Name Ví dụ: ẾT KẾ VÀ LẬP TRÌNH WEB TRÌNH VÀ LẬP KẾ ẾT THI 22
  23. Form Fields – Label  Dùng để gán nhãn cho một Form Field  Cú pháp: ẾT KẾ VÀ LẬP TRÌNH WEB TRÌNH VÀ LẬP KẾ ẾT THI 23
  24. Phương thức POST/GET – Link Parameters  Sau khi nút Submit được nhấn, tất cả dữ liệu người dùng nhập vào form sẽ được gửi đến trang xử lý (giá trị của thuộc tính “Action”).  Mỗi form field sẽ là một đối số trong dữ liệu gửi đến trang xử lý.  Gồm 2 phương thức POST/GET để chuyển dữ liệu đến trang xử lý. ẾT KẾ VÀ LẬP TRÌNH WEB TRÌNH VÀ LẬP KẾ ẾT THI 24
  25. Phương thức POST  Các đối số của Form được truyền “ngầm” bên dưới ( được gửi trong phần body của http request ).  Khối lượng dữ liệu và đối số được truyền đi của Form không phụ thuộc vào độ dài URL không bị hạn chế.  Ví dụ cụ thể là gửi file lên server (đính kèm file trong diễn đàn hoặc gửi thư) ẾT KẾ VÀ LẬP TRÌNH WEB TRÌNH VÀ LẬP KẾ ẾT THI 25
  26. Phương thức POST  Sau khi nhấn Submit, dữ liệu user nhập vào text field FirstName và LastName sẽ được gửi đến trang process.php.  Khi trang process.php được server xử lý xong và hiển thị lại trên web browser thì address bar của browser chỉ thể hiện. http:// /process.php ẾT KẾ VÀ LẬP TRÌNH WEB TRÌNH VÀ LẬP KẾ ẾT THI (không có gì sau process.php) 26
  27. Phương thức POST ẾT KẾ VÀ LẬP TRÌNH WEB TRÌNH VÀ LẬP KẾ ẾT THI 27
  28. Phương thức GET  Các đối số của Form được ghi kèm theo vào đường dẫn URL của thuộc tính Action trong tag  Lượng dữ liệu được đối số truyền đi bị giới hạn bởi chiều dài tối đa của một URL trên Address bar (max = 2048 bytes).  Ưu điểm là user có thể thấy được dữ liệu nhập vào form truyền lên trang xử lý (thông qua những đối số kèm vào đường dẫn URL) ẾT KẾ VÀ LẬP TRÌNH WEB TRÌNH VÀ LẬP KẾ ẾT THI 28
  29. Phương thức GET  Sau khi nhấn Submit, dữ liệu user nhập vào text field FirstName và LastName sẽ được gửi đến trang process.php.  Khi trang process.php được server xử lý xong và hiển thị lại trên web browser thì address bar của browser sẽ thể hiện. http:// /process.php?FirstName= &LastName= ẾT KẾ VÀ LẬP TRÌNH WEB TRÌNH VÀ LẬP KẾ ẾT THI (dữ liệu user nhập đưa thẳng vào địa chỉ process.php) 29
  30. Phương thức GET ẾT KẾ VÀ LẬP TRÌNH WEB TRÌNH VÀ LẬP KẾ ẾT THI 30
  31. Thẻ Marquee  Dùng để tạo hiệu ứng chữ chạy trên màn hình trình duyệt.  Cú pháp: Text Content ẾT KẾ VÀ LẬP TRÌNH WEB TRÌNH VÀ LẬP KẾ ẾT THI 31
  32. Chuyển hướng trang web  Tự động chuyển hướng trang web  Tự động chuyển hướng trang sang trang web khác (URL) sau một khoảng thời gian t (tính theo giây).  Cú pháp: ẾT KẾ VÀ LẬP TRÌNH WEB TRÌNH VÀ LẬP KẾ ẾT THI 32
  33. ĐẠI HỌC SÀI GÒN – KHOA CNTT THIẾT KẾ WEB THỰC HÀNH FORM GV: Trần Đình Nghĩa tdnghia1977@gmail.com ẾT KẾ VÀ LẬP TRÌNH WEB TRÌNH VÀ LẬP KẾ ẾT THI 33
  34. Thực hành  Tìm hiểu thêm các thuộc tính của Form Fields.  Thực hành Form cơ bản: Đăng ký người dùng ẾT KẾ VÀ LẬP TRÌNH WEB TRÌNH VÀ LẬP KẾ ẾT  Giao bài tập đầu tuần 3 và nộp lại vào đầu THI tuần 4. 34
  35. Bài tập tuần 3: User Registration Form ẾT KẾ VÀ LẬP TRÌNH WEB TRÌNH VÀ LẬP KẾ ẾT THI 35