LÀM VIỆC VỚI FORM

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

Giang viên điều phối: PHẠM THI THANH TÂM

Email: [email protected]

Chương 5:

THIÊT KÊ WEB & CÁC CÔNG CỤ ĐÔ HOA

(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ụ:


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



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

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

trên một dòng

– Text Area (Vùng văn ban): 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



– 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 anh lên server



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

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


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


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.



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



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 phai > chọn Form Field Properties



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

ban bình thường hay là password?

Tab order: thứ tự di chuyển





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





Radio Button

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

trong danh sách phai 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)






Checkbox

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

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






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






– 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



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



File Upload


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

dẫn




Image Upload

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

Chú thích cho anh

Chỉnh sửa hình anh

(Chương 2)




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 phai > chọn Form Properties


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)



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

(Slide 30)

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

trong database

(Slide 32)

Gửi dữ liệu đến

địa chỉ e-mail

(Slide 31)

Lưu lại dữ liệu

đến nơi khác

(Slide 33, 34)



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)



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 phan 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


32

Tạo kết nối

đến database

Tạo một

database mới

Bang 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)

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





KẾT THÚC

HỎI – ĐÁP


Documents

LÀM VIỆC VỚI FORM