›
›

Bài giảng Lập trình web - Form trong lập trình web - Nguyễn Hoàng Tùng

pdf 62 trang hapham 2340
Download
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Lập trình web - Form trong lập trình web - Nguyễn Hoàng Tùng", để 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:

  • pdfbai_giang_lap_trinh_web_form_trong_lap_trinh_web_nguyen_hoan.pdf

Nội dung text: Bài giảng Lập trình web - Form trong lập trình web - Nguyễn Hoàng Tùng

  1. FORM TRONG LẬP TRÌNH WEB Nguyễn Hoàng Tùng  Bộ môn Kỹ thuật phần mềm nhoangtung@agu.edu.vn  www.nhtung.com
  2. Nội dung chính của slide này Form là gì? Các thành phần của form. 16/08/2014 Lập trình Web 2
  3. Form là gì? Là các thành phần của HTML cho phép người dùng có thể nhập thông tin vào. Tương tự như giao diện của một ứng dụng quản lý bao gồm: textbox, listbox, checkbox, Dữ liệu do người dùng nhập được truyền giữa web-client và web-server thông qua form. Các thành phần được thiết kế thông qua các thẻ (tags). 16/08/2014 Lập trình Web 3
  4. Ví dụ về giao diện form 16/08/2014 Lập trình Web 4
  5. Ví dụ về giao diện form 16/08/2014 Lập trình Web 5
  6. Các thành phần của form 1. input 2. label text file 3. button password time 4. textarea number url 5. select/option radio range 6. datalist/option checkbox image color submit 7. keygen date reset 8. output email button 9. fieldset/legend 16/08/2014 Lập trình Web 6
  7. Các thành phần của form Form TextBox PasswordBox Label RadioButton ComboBox TextArea CheckBox Button 16/08/2014 Lập trình Web 7
  8. form Sử dụng để chứa mọi thành phần khác của form. Không nhìn thấy được khi trang web đang hiển thị. Các thuộc tính quan trọng: action: Chỉ đến tập tin từ sever sẽ nhận dữ liệu từ form. Nên sử dụng đường dẫn tương đối nếu nằm trong cùng 1 website. method: Có 2 dạng phương thức: • GET: Dữ liệu truyền từ client đến server “công khai”, các giá trị và thông tin nhập liệu từ các input sẽ hiện trên thanh địa chỉ. • POST: Các giá trị và thông tin nhập liệu từ các input sẽ không hiện trên thanh địa chỉ. Form được định nghĩa bằng cặp thẻ: 16/08/2014 Lập trình Web 8
  9. form Các thuộc tính của thẻ : 16/08/2014 Lập trình Web 9
  10. form Ví dụ: 16/08/2014 Lập trình Web 10
  11. input  text Công dụng: Tạo điều khiển nhập kiểu text 1 dòng. 16/08/2014 Lập trình Web 11
  12. input  text Ví dụ: 16/08/2014 Lập trình Web 12
  13. input  password Công dụng: Tạo điều khiển nhập mật khẩu. 16/08/2014 Lập trình Web 13
  14. input  password Ví dụ: 16/08/2014 Lập trình Web 14
  15. input  number Công dụng: Tạo điều khiển nhập kiểu số. 16/08/2014 Lập trình Web 15
  16. input  number Ví dụ: 16/08/2014 Lập trình Web 16
  17. input  radio Công dụng: Tạo điều khiển 1 lựa chọn. 16/08/2014 Lập trình Web 17
  18. input  radio Ví dụ: 16/08/2014 Lập trình Web 18
  19. input  checkbox Công dụng: Tạo điều khiển nhiều lựa chọn. 16/08/2014 Lập trình Web 19
  20. input  checkbox Ví dụ: 16/08/2014 Lập trình Web 20
  21. input  color Công dụng: Tạo điều khiển chọn màu sắc. 16/08/2014 Lập trình Web 21
  22. input  color Ví dụ: 16/08/2014 Lập trình Web 22
  23. input  date Công dụng: Tạo điều khiển nhập kiểu ngày. 16/08/2014 Lập trình Web 23
  24. input  date Ví dụ: 16/08/2014 Lập trình Web 24
  25. input  email Công dụng: Tạo điều khiển nhập kiểu email. 16/08/2014 Lập trình Web 25
  26. input  email Ví dụ: 16/08/2014 Lập trình Web 26
  27. input  file Công dụng: Tạo điều khiển chọn tập tin để upload. 16/08/2014 Lập trình Web 27
  28. input  file Ví dụ: 16/08/2014 Lập trình Web 28
  29. input  time Công dụng: Tạo điều khiển nhập kiểu giờ. 16/08/2014 Lập trình Web 29
  30. input  time Ví dụ: 16/08/2014 Lập trình Web 30
  31. input  url Công dụng: Tạo điều khiển nhập kiểu địa chỉ trang web. 16/08/2014 Lập trình Web 31
  32. input  url Ví dụ: 16/08/2014 Lập trình Web 32
  33. input  range Công dụng: Tạo điều khiển chọn giá trị trong khoảng. 16/08/2014 Lập trình Web 33
  34. input  range Ví dụ: 16/08/2014 Lập trình Web 34
  35. input  image Công dụng: Tạo nút submit dạng hình ảnh. 16/08/2014 Lập trình Web 35
  36. input  image Ví dụ: 16/08/2014 Lập trình Web 36
  37. input  submit Công dụng: Tạo nút submit dạng thường. 16/08/2014 Lập trình Web 37
  38. input  submit Ví dụ: 16/08/2014 Lập trình Web 38
  39. input  reset Công dụng: Tạo nút reset. 16/08/2014 Lập trình Web 39
  40. input  reset Ví dụ: 16/08/2014 Lập trình Web 40
  41. input  button Công dụng: Tạo nút nhấn không kèm sự kiện. 16/08/2014 Lập trình Web 41
  42. input  button Ví dụ: 16/08/2014 Lập trình Web 42
  43. label Công dụng: Tạo nhãn cho điều khiển. 16/08/2014 Lập trình Web 43
  44. label Ví dụ: 16/08/2014 Lập trình Web 44
  45. button Công dụng: Tạo nút nhấn tuỳ chọn (button, reset, submit). 16/08/2014 Lập trình Web 45
  46. button Ví dụ: 16/08/2014 Lập trình Web 46
  47. textarea Công dụng: Tạo điều khiển nhập kiểu text nhiều dòng. 16/08/2014 Lập trình Web 47
  48. textarea Ví dụ: 16/08/2014 Lập trình Web 48
  49. select/optgroup/option select Công dụng: Tạo điều khiển dạng danh sách đổ xuống. Danh sách thuộc tính: 16/08/2014 Lập trình Web 49
  50. select/optgroup/option optgroup Công dụng: Nhóm các thành phần liên quan (được lồng trong ). Danh sách thuộc tính: 16/08/2014 Lập trình Web 50
  51. select/optgroup/option option Công dụng: Tạo một chọn lựa (được lồng trong , , ). Danh sách thuộc tính: 16/08/2014 Lập trình Web 51
  52. select/optgroup/option 16/08/2014 Lập trình Web 52
  53. datalist/option datalist Công dụng: Tạo danh sách gợi ý, áp dụng cho . Danh sách thuộc tính: Không có. option Công dụng: Tạo một chọn lựa (được lồng trong , , ). Danh sách thuộc tính: Đã trình bày ở slide trước. 16/08/2014 Lập trình Web 53
  54. datalist/option 16/08/2014 Lập trình Web 54
  55. keygen Công dụng: Tạo một cặp khóa chính sử dụng cho . 16/08/2014 Lập trình Web 55
  56. keygen Ví dụ: 16/08/2014 Lập trình Web 56
  57. output Công dụng: Xuất ra kết quả của một phép tính. 16/08/2014 Lập trình Web 57
  58. output Ví dụ: 16/08/2014 Lập trình Web 58
  59. fieldset/legend fieldset Công dụng: Nhóm các thành phần liên quan trong một form. Danh sách thuộc tính: 16/08/2014 Lập trình Web 59
  60. fieldset/legend legend Công dụng: Định nghĩa tên cho (được lồng trong ). Danh sách thuộc tính: 16/08/2014 Lập trình Web 60
  61. fieldset/legend 16/08/2014 Lập trình Web 61
  62. Giải đáp thắc mắc 16/08/2014 Lập trình Web 62