Bài giảng Lập trình Web - Phần 5: Form trong lập trình Web - Nguyễn Hoàng Tùng

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 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 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 Ví dụ về giao diện form 16/08/2014 Lập trình Web 4 Ví dụ về giao diện form 16/08/2014 Lập trình Web 5 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 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 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 form Các thuộc tính của thẻ : 16/08/2014 Lập trình Web 9 form Ví dụ: 16/08/2014 Lập trình Web 10 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 input  text Ví dụ: 16/08/2014 Lập trình Web 12 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 input  password Ví dụ: 16/08/2014 Lập trình Web 14 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 input  number Ví dụ: 16/08/2014 Lập trình Web 16 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 input  radio Ví dụ: 16/08/2014 Lập trình Web 18 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 input  checkbox Ví dụ: 16/08/2014 Lập trình Web 20 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 input  color Ví dụ: 16/08/2014 Lập trình Web 22 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 input  date Ví dụ: 16/08/2014 Lập trình Web 24 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 input  email Ví dụ: 16/08/2014 Lập trình Web 26 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 input  file Ví dụ: 16/08/2014 Lập trình Web 28 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 input  time Ví dụ: 16/08/2014 Lập trình Web 30 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 input  url Ví dụ: 16/08/2014 Lập trình Web 32 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 input  range Ví dụ: 16/08/2014 Lập trình Web 34 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 input  image Ví dụ: 16/08/2014 Lập trình Web 36 input  submit Công dụng: Tạo nút submit dạng thường. 16/08/2014 Lập trình Web 37 input  submit Ví dụ: 16/08/2014 Lập trình Web 38 input  reset Công dụng: Tạo nút reset. 16/08/2014 Lập trình Web 39 input  reset Ví dụ: 16/08/2014 Lập trình Web 40 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 input  button Ví dụ: 16/08/2014 Lập trình Web 42 label Công dụng: Tạo nhãn cho điều khiển. 16/08/2014 Lập trình Web 43 label Ví dụ: 16/08/2014 Lập trình Web 44 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 button Ví dụ: 16/08/2014 Lập trình Web 46 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 textarea Ví dụ: 16/08/2014 Lập trình Web 48 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 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 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 select/optgroup/option 16/08/2014 Lập trình Web 52 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 datalist/option 16/08/2014 Lập trình Web 54 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 keygen Ví dụ: 16/08/2014 Lập trình Web 56 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 output Ví dụ: 16/08/2014 Lập trình Web 58 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 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 fieldset/legend 16/08/2014 Lập trình Web 61 Giải đáp thắc mắc 16/08/2014 Lập trình Web 62