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

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: T

Trang 1

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

Giảng viên điều phối: PHẠM THỊ THANH TÂM

Email: ptttam@khcn.hoasen.edu.vn

Chương 5:

THIẾT KẾ WEB & CÁC CÔNG CỤ ĐỒ HỌA

(TINV205DV02)

Trang 2

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

Trang 3

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

Trang 4

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

Trang 5

 Một số loại control thông dụng

– Text box (Hộp văn bản): dùng để nhập dữ liệu

trên một dòng

– Text Area (Vùng văn bả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

Trang 6

– 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

Trang 7

 Lưu ý: để làm việc với Form, vào menu Task Panes

> Toolbox, sau đó mở rộng phần Form Controls

Trang 8

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í

Trang 9

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

Trang 10

Textbox Text Area

Trang 11

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 phải > chọn Form Field Properties

Trang 12

 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

bản bình thường hay là password?

 Tab order: thứ tự di chuyển

Trang 13

Trang 14

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

Trang 15

Trang 16

 Radio Button

– Group name: tên của nhóm danh sách (mỗi mục

trong danh sách phả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

Trang 17

Trang 18

 Checkbox

– Name: tên của Checkbox (mỗi mục trong danh

sách phả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)

Trang 19

Trang 20

 Drop-Down Box

– 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

Trang 21

Trang 22

– 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

Trang 23

 Button

– Value/Label: nhãn của control

– 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

Trang 24

 File Upload

– Width in characters: số ký tự tối đa của đường

dẫn – Tab order: thứ tự di chuyển

Trang 25

 Image Upload

Chọn đường dẫn của hình ảnh

Chú thích cho ảnh

Chỉnh sửa hình ảnh (Chương 2)

Trang 26

Trang 27

III LƯU LẠI DỮ LIỆU TRÊN FORM

 Để lưu lại dữ liệu trên Form, trong chế độ Design:

– Double-click vào Form muốn lưu lại dữ liệu

– Hoặc: click phải > chọn Form Properties

Trang 28

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)

Trang 29

 Lưu lại dữ liệu trên Form (sử dụng FrontPage

extension)

Lưu lại dữ liệu vào

một file trên server

Lưu lại dữ liệu đến nơi khác ( Slide 33, 34 )

Trang 30

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)

Trang 31

31

Nhập vào địa chỉ e-mail

Định dạng email (dạng text)

Tiêu đề của mail

Địa chỉ e-mail phả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

Trang 32

Tạo kết nối đến database

Tạo một

database mới

Bảng lưu dữ

liệu trong

database Địa chỉ của trang

báo lỗi (nếu lưu

dữ liệu không thành công)

Địa chỉ của trang xác nhận (nếu lưu dữ liệu thành công)

Trang 33

Trang 34

Trang 35

KẾT THÚC

HỎI – ĐÁP

Tiêu đề	Chương 5: Làm việc với Form
Người hướng dẫn	Phạm Thị Thanh Tâm
Trường học	Trường Đại học Hoa Sen
Chuyên ngành	Thiết kế web & Các công cụ đồ họa
Thể loại	Giáo trình

Định dạng
Số trang	35
Dung lượng	1,08 MB