›

Bài giảng Lập trình và Thiết kế Web 1 - Bài 5: Form - Lương Vĩ Minh

pptx 34 trang huongle 3840
Download
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Lập trình và Thiết kế Web 1 - Bài 5: Form - Lương Vĩ Minh", để 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:

  • pptxbai_giang_lap_trinh_va_thiet_ke_web_1_bai_5_form_luong_vi_mi.pptx

Nội dung text: Bài giảng Lập trình và Thiết kế Web 1 - Bài 5: Form - Lương Vĩ Minh

  1. Lập trình và Thiết kế Web 1 Bài 5 Form Lương Vĩ Minh KhoaKhoa CNTTCNTT –– ĐH.KHTNĐH.KHTN © 2007 Khoa Công nghệ thông tin
  2. Lập trình và Thiết kế Web 1 – Bài 5 : Form Nội dung § Giới thiệu về Form § Các thành phần của Form § Một số thuộc tính tiện ích của Form và Input § Phân biệt phương thức GET/POST § Thẻ MARQUEE © 2007 Khoa CNTT - ĐHKHTN
  3. Lập trình và Thiết kế Web 1 – Bài 5 : Form Nội dung § Giới thiệu về Form § Các thành phần của Form § Một số thuộc tính tiện ích của Form và Input § Phân biệt phương thức GET/POST § Thẻ MARQUEE © 2007 Khoa CNTT - ĐHKHTN
  4. Lập trình và Thiết kế Web 1 – Bài 5 : Form Giới thiệu Form § Được dùng để nhận dữ liệu từ phía người dùng § Giúp gởi yêu cầu của người dùng đến trang xử lý trong ứng dụng web § Tag dùng để chứa các thành phần khác của form § Những thành phần nhập liệu được gọi là Form Field – text field – password field – multiple-line text field – © 2007 Khoa CNTT - ĐHKHTN
  5. Lập trình và Thiết kế Web 1 – Bài 5 : Form Ví dụ © 2007 Khoa CNTT - ĐHKHTN
  6. Lập trình và Thiết kế Web 1 – Bài 5 : Form Tag § Là container chứa các thành phần nhập liệu khác. § Các thuộc tính của – NAME : tên FORM – ACTION : chỉ định trang web nhận xử lý dữ liệu từ FORM này khi có sự kiện click của button SUBMIT. – METHOD : Xác định phương thức chuyển dữ liệu (POST,GET) © 2007 Khoa CNTT - ĐHKHTN
  7. Lập trình và Thiết kế Web 1 – Bài 5 : Form Tag - Ví dụ Dangnhap.htm © 2007 Khoa CNTT - ĐHKHTN
  8. Lập trình và Thiết kế Web 1 – Bài 5 : Form Nội dung § Giới thiệu về Form § Các thành phần của Form § Một số thuộc tính tiện ích của Form và Input § Phân biệt phương thức GET/POST § Thẻ MARQUEE © 2007 Khoa CNTT - ĐHKHTN
  9. Lập trình và Thiết kế Web 1 – Bài 5 : Form Các thành phần của Form § Gồm các loại Form Field sau: – Text field – Password field – Hidden Text field – Check box – Radio button – File Form Control – Submit Button, Reset Button, Generalized Button – Multiple-line text field – Label – Pull-down menu – Scrolled list – Field Set © 2007 Khoa CNTT - ĐHKHTN
  10. Lập trình và Thiết kế Web 1 – Bài 5 : Form Các thành phần của Form – Text Field § Dùng để nhập một dòng văn bản § Cú pháp § Ví dụ © 2007 Khoa CNTT - ĐHKHTN
  11. Lập trình và Thiết kế Web 1 – Bài 5 : Form Các thành phần của Form – Password Field § Dùng để nhập mật khẩu § Cú pháp § Ví dụ © 2007 Khoa CNTT - ĐHKHTN
  12. Lập trình và Thiết kế Web 1 – Bài 5 : Form Các thành phần của Form – Check box § Cú pháp § Ví dụ Check box group : Anh van: Hoa: Nhut: © 2007 Khoa CNTT - ĐHKHTN
  13. Lập trình và Thiết kế Web 1 – Bài 5 : Form Các thành phần của Form – Radio button § Cú pháp § Ví dụ Radio Button Group : Nam: Nu: Radio Button Group : Nam: Nu: © 2007 Khoa CNTT - ĐHKHTN
  14. Lập trình và Thiết kế Web 1 – Bài 5 : Form Các thành phần của Form – File Form Control § Dùng để upload 1 file lên server § Cú pháp § Ví dụ © 2007 Khoa CNTT - ĐHKHTN
  15. Lập trình và Thiết kế Web 1 – Bài 5 : Form Các thành phần của Form – 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ó một nút submit và nút này được viền đậm § Cú pháp: § Ví dụ: © 2007 Khoa CNTT - ĐHKHTN
  16. Lập trình và Thiết kế Web 1 – Bài 5 : Form Các thành phần của Form – 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ụ © 2007 Khoa CNTT - ĐHKHTN
  17. Lập trình và Thiết kế Web 1 – Bài 5 : Form Các thành phần của Form - Generalized Button § Cú pháp § Ví dụ © 2007 Khoa CNTT - ĐHKHTN
  18. Lập trình và Thiết kế Web 1 – Bài 5 : Form Các thành phần của Form – Multiline Text Field § Dùng để nhập văn bản nhiều dòng § Cú pháp § Ví dụ 20 This is a text on multiline. 5 © 2007 Khoa CNTT - ĐHKHTN
  19. Lập trình và Thiết kế Web 1 – Bài 5 : Form Các thành phần của Form - Label § Dùng để gán nhãn cho một Form Field § Cú pháp § Ví dụ Anh văn: © 2007 Khoa CNTT - ĐHKHTN
  20. Lập trình và Thiết kế Web 1 – Bài 5 : Form Các thành phần của Form – Pull-down Menu § Dùng để tạo ra một combo box § Cú pháp © 2007 Khoa CNTT - ĐHKHTN
  21. Lập trình và Thiết kế Web 1 – Bài 5 : Form Các thành phần của Form – Pull-down Menu combo box: Window Media 10 Jet Audio 9 Windows XP Windows XP SP2 Windows Vista Office 2007 © 2007 Khoa CNTT - ĐHKHTN
  22. Lập trình và Thiết kế Web 1 – Bài 5 : Form Các thành phần của Form – Field Set § Dùng để tạo ra Group box, nhóm các thành phần nhập liệu trong form § Cú pháp GroupBox’s Name § Ví dụ Subject English Mathematics Graph Theory © 2007 Khoa CNTT - ĐHKHTN
  23. Lập trình và Thiết kế Web 1 – Bài 5 : Form Nội dung § Giới thiệu về Form § Các thành phần của Form § Một số thuộc tính tiện ích của Form và Input § Phân biệt phương thức GET/POST § Thẻ MARQUEE © 2007 Khoa CNTT - ĐHKHTN
  24. Lập trình và Thiết kế Web 1 – Bài 5 : Form Một số thuộc tính tiện ích của Form và Input © 2007 Khoa CNTT - ĐHKHTN
  25. Lập trình và Thiết kế Web 1 – Bài 5 : Form Một số thuộc tính tiện ích của Form và Input § Accesskey=char – Tạo phím nóng cho form fields. – Áp dụng cho tất cả form fields. – Cách nhấn Alt + char – Tránh các phím tắt của browser. § Title = string – Tạo tooltip cho form fields. – Áp dụng cho tất cả form fields. § Autocomplete = ON/OFF – Gợi ý tự động khi nhập liệu. – Áp dụng cho tất cả tag form, input. © 2007 Khoa CNTT - ĐHKHTN
  26. Lập trình và Thiết kế Web 1 – Bài 5 : Form Bật chế độ Auto-complete cho IE © 2007 Khoa CNTT - ĐHKHTN
  27. Lập trình và Thiết kế Web 1 – Bài 5 : Form Nội dung § Giới thiệu về Form § Các thành phần của Form § Một số thuộc tính tiện ích của Form và Input § Phân biệt phương thức GET/POST § Thẻ MARQUEE © 2007 Khoa CNTT - ĐHKHTN
  28. Lập trình và Thiết kế Web 1 – Bài 5 : Form Phân biệt phương thức GET/POST - GET § Các đối số của Form được ghi chèn vào đường dẫn URL của thuộc tính action trong tag § Khối lượng dữ liệu đối số được truyền đi của Form bị giới hạn bởi chiều dài tối đa của một URL trên Address bar. (tối đa của một URL là 2048 bytes) © 2007 Khoa CNTT - ĐHKHTN
  29. Lập trình và Thiết kế Web 1 – Bài 5 : Form Phân biệt phương thức GET/POST - POST § Các đối số của Form được truyền “ngầm” bên dưới § Khối lượng dữ liệu đối số được truyền đi của Form không phụ thuộc vào URL Không bị giới hạn © 2007 Khoa CNTT - ĐHKHTN
  30. Lập trình và Thiết kế Web 1 – Bài 5 : Form © 2007 Khoa CNTT - ĐHKHTN
  31. Lập trình và Thiết kế Web 1 – Bài 5 : Form © 2007 Khoa CNTT - ĐHKHTN
  32. Lập trình và Thiết kế Web 1 – Bài 5 : Form Nội dung § Giới thiệu về Form § Các thành phần của Form § Một số thuộc tính tiện ích của Form và Input § Phân biệt phương thức GET/POST § Thẻ MARQUEE © 2007 Khoa CNTT - ĐHKHTN
  33. Lập trình và Thiết kế Web 1 – Bài 5 : Form 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 Text Text § Ví dụ © 2007 Khoa CNTT - ĐHKHTN
  34. Lập trình và Thiết kế Web 1 – Bài 5 : Form Tự động chuyển hướng trang web § Tự động chuyển hướng trang web sang trang web khác (URL) sau một khoảng thời gian t (tính theo giây) § Cú pháp © 2007 Khoa CNTT - ĐHKHTN