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:
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
II. CÁC THAO TÁC TRÊN FORM (tt)
3. Thiết lập các thuộc tính (Properties) cho các control
– Double-click lên control muốn thiết lập các thuộc
tính
– Hoặc: click phi > chọn Form Field Properties

11
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)
 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

12
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)
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. 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

14
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)
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. CÁC THAO TÁC TRÊN FORM (tt)
 Radio Button
– Group name: tên của nhóm danh sách (mỗi mục
trong danh sách phi có Group name trùng nhau)
– Value: giá trị đại diện cho mỗi mục trong danh
sách
– Initial State: trạng thái ban đầu, được chọn
(Selected) hay không được chọn (Not selected)
– Tab order: thứ tự di chuyển

16
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)
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. CÁC THAO TÁC TRÊN FORM (tt)
 Checkbox
– Name: tên của Checkbox (mỗi mục trong danh
sách phi có Name trùng nhau)
– Value: giá trị đại diện cho mỗi mục trong danh
sách
– Initial Sate: trạng 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
18
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)
19
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)
 Drop-Down Box
– Name: tên control
– Height: chiều cao của control (số mục hiển thị)
– 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
20
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)
21
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)
– 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 danh sách





– Remove: xóa một mục ra khỏi danh sách
– Move Up/Move Down: thay đổi thứ tự các mục
trong danh sách

22
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)
 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
23
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)
 File Upload
– Name: tên control
– Width in characters: số ký tự tối đa của đường
dẫn

– Tab order: thứ tự di chuyển
24
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)
 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)
25
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