chương 5: làm việc với form-tk web & đồ họa doc

TRƯỜNG ĐẠI HỌC HOA SEN KHOA KHOA HỌC & CÔNG NGHỆ BỘ MÔN HỆ THỐNG THÔNG TIN LÀM VIỆC VỚI FORM Ging viên điều phối: PHẠM TH THANH TÂM Email: ptttam@khcn.hoasen.edu.vn Chương 5: THIT K WEB & CÁC CÔNG CỤ Đ HA (TINV205DV02) NỘI DUNG I. GIỚI THIỆU II. CÁC THAO TÁC TRÊN FORM III. LƯU LẠI DỮ LIỆU TRÊN FORM 2 Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form I. GIỚI THIỆU  Form (Biểu mẫu): thường được dùng như là công cụ hỗ trợ nhập liệu trên các ứng dụng Web (tượng tự như các hộp thoại (dialog) trong các ứng dụng trên Windows)  Ví dụ: 3 Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form I. GIỚI THIỆU (tt)  Hoạt động của Form thông thường là: – Ứng dụng hiển thị Form để yêu cầu nhận thông tin từ người dùng – Người dùng điền các thông tin và kết thúc việc nhập liệu bằng cách submit form – Sau đó dữ liệu sẽ được chuyển đến chương trình xử lý tương ứng  Người dùng nhập dữ liệu cho form thông qua các ô nhập liệu được gọi là các control 4 Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form I. GIỚI THIỆU (tt)  Một số loại control thông dụng – Text box (Hộp văn bn): dùng để nhập dữ liệu trên một dòng – Text Area (Vùng văn bn): dùng để nhập dữ liệu trên nhiều dòng – Radio button: hiển thị danh sách các mục được nhóm theo tên và chỉ chọn được một mục – Checkbox: dùng để chọn một hoặc nhiều trong tập các lựa chọn được liệt kê – Group Box: dùng để nhóm các đối tượng vào trong một nhóm 5 Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form I. GIỚI THIỆU (tt) – Drop-Down Box: danh sách cuộn hiển thị một danh sách các mục, có thể chọn một hay nhiều mục – Button: nút nhấn  Normal button: nút nhấn bình thường  Submit button: kết thúc việc nhập dữ liệu trên form  Reset button: xóa các giá trị hiện tại đang hiển thị trên form – File Upload/Image Upload: dùng để chọn đường dẫn và upload file dữ liệu/hình nh lên server 6 Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form I. GIỚI THIỆU (tt)  Lưu ý: để làm việc với Form, vào menu Task Panes > Toolbox, sau đó mở rộng phần Form Controls 7 Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form II. CÁC THAO TÁC TRÊN FORM 1. Chèn Form vào trang web – Trong chế độ Design View, đặt con trỏ tại vị trí muốn chèn Form – Double-click vào nút Form trong phần Form Controls Thay đổi kích thước của Form 8 Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form II. CÁC THAO TÁC TRÊN FORM (tt) 2. Thêm một control vào Form – Đặt con trỏ trong form tại vị trí muốn thêm control. – Trong phần Form Controls, double-click vào các loại control có sẵn trong danh sách. 9 Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form II. CÁC THAO TÁC TRÊN FORM (tt) Textbox Text Area Checkbox Radio button Submit button Reset button Normal button Drop-Down Box File Upload Textbox (Password) Group Box Image Upload Advanced button 10 Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form [...]... chuyển Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form 24 II CÁC THAO TÁC TRÊN FORM (tt)  Image Upload Chọn đường dẫn của hình ảnh Chú thích cho ảnh Chỉnh sửa hình ảnh (Chương 2) Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form 25 II CÁC THAO TÁC TRÊN FORM (tt) Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form 26 III LƯU LẠI... không thành công) 32 III LƯU LẠI DỮ LIỆU TRÊN FORM ((tt) Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form 33 III LƯU LẠI DỮ LIỆU TRÊN FORM ((tt) Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form 34 KẾT THÚC HỎI – ĐÁP Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form 35 ... kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form 13 II CÁC THAO TÁC TRÊN FORM (tt) Text Area – Name: tên control – Initial Value: giá trị ban đầu – Width in charaters: số ký tự tối đa – Number of lines: số dòng tối đa – Tab order: thứ tự di chuyển Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form 14 II CÁC THAO TÁC TRÊN FORM (tt) Môn học: Thiết kế web & Các công cụ đồ. .. kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form 29 III LƯU LẠI DỮ LIỆU TRÊN FORM ((tt) Chọn đường dẫn chứa file Chọn định dạng file Chọn lựa cho file thứ 2 (nếu cần) Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form 30 III LƯU LẠI DỮ LIỆU TRÊN FORM ((tt) Nhập vào địa chỉ e-mail Định dạng email (dạng text) Tiêu đề của mail Địa chỉ e-mail phản hồi Môn học: Thiết kế web. .. Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form 22 II CÁC THAO TÁC TRÊN FORM (tt)  Button – Name: tên control – Value/Label: nhãn của control – Tab order: thứ tự di chuyển – Button type: loại nút nhấn  Normal: nút nhấn bình thường  Submit: nút nhấn loại submit  Reset: nút nhấn loại reset Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form 23 II CÁC... học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form 11 II CÁC THAO TÁC TRÊN FORM (tt)  Text/Password  Name: tên control  Initial Value: giá trị ban đầu  Width in characters: số ký tự tối đa  Password field: dữ liệu trên control là đoạn văn bản bình thường hay là password?  Tab order: thứ tự di chuyển Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form 12 II... lại dữ liệu – Hoặc: click phải > chọn Form Properties Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form 27 III LƯU LẠI DỮ LIỆU TRÊN FORM ((tt)  Lưu lại dữ liệu trên Form (không sử dụng FrontPage extension) Nhập vào URL (nơi lưu trữ các script) Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form 28 III LƯU LẠI DỮ LIỆU TRÊN FORM ((tt)  Lưu lại dữ liệu trên... thái ban đầu, được đánh dấu (Checked) hay không được đánh dấu (Not checked) – Tab order: thứ tự di chuyển Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form 18 II CÁC THAO TÁC TRÊN FORM (tt) Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form 19 II CÁC THAO TÁC TRÊN FORM (tt)  Drop-Down Box – Name: tên control – Height: chiều cao của control (số mục hiển... Allow multiples selections: cho phép chọn một hay nhiều mục trong danh sách – Tab order: thứ tự di chuyển Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form 20 II CÁC THAO TÁC TRÊN FORM (tt) Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form 21 II CÁC THAO TÁC TRÊN FORM (tt) – Add : lần lượt thêm các mục vào trong danh sách – Modify: chỉnh sửa các mục trong... dạng email (dạng text) Tiêu đề của mail Địa chỉ e-mail phản hồi Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form 31 III LƯU LẠI DỮ LIỆU TRÊN FORM ((tt) Tạo kết nối đến database Tạo một database mới Bảng lưu dữ liệu trong database Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form Địa chỉ của trang xác nhận (nếu lưu dữ liệu thành công) Địa chỉ của trang báo . học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form II. CÁC THAO TÁC TRÊN FORM (tt) 13 Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form II học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form II. CÁC THAO TÁC TRÊN FORM (tt) 15 Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form II học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form II. CÁC THAO TÁC TRÊN FORM (tt) 17 Môn học: Thiết kế web & Các công cụ đồ họa - Chương 5: Làm việc với Form II.