Bài giảng Thiết kế Web - Bài 6: Form

THIẾT KẾ WEB

Phan Thanh Sơn

Khoa Công nghệ thông tin

Email: webmaster.tsq[email protected]

Tel: 0989.937.737

NỘI DUNG

I. GIỚI THIỆU

II. CÁC ĐỐI TƯỢNG NHẬP DỮ LIỆU

III. THIẾT KẾ FORM

2/16

I. GIỚI THIỆU FORM

A. Form được sử dụng khi cần:

– Thu thập thô ng tin tên, địa chỉ, số điện thoại,

email, …để đăng ký cho người dùng vào một

dịch vụ, một sự kiện

– Tập hợp thô ng tin để mua hàng

– Thu thập thô ng tin phản hồi về một Website

– Cung cấp cô ng cụ tì m kiếm trên website

B. Cá ch tạo:

Cú phá p:

Nội dung của Form

</form>

3/16

Trong đó:

Method: xá c định phương thức đưa dữ liệu lên

má y chủ, có 2 giá trị :Post và Get

Nếu giá trị là GET thì trì nh duyệt sẽ tạo một

câ u hỏi chứa trang URL, một dấu hỏi và cá c

giá trị do biểu mẫu tạo ra. Trì nh duyệt sẽ đổi

script của câ u hỏi thành kiểu được xá c định

trong URL để xử lý.

Nếu giá trị là POST thì dữ liệu trên biểu mẫu

sẽ được gửi đến script như một khối dữ liệu

Action: là địa chỉ của script sẽ thực hiện khi

form được submit

4/16

I. GIỚI THIỆU FORM (tt)

Sử dụng để chứa mọi đối tượng khá c

Khô ng nhì n thấy khi trang web được hiển thị

Quy định một số thuộc tí nh quan trọng như method,

action.

Thẻ tạo form:

Cá c thuộc tí nh:

a. name=“tên_form”: Khô ng quan trọng lắm

b. action=“địa chỉ nhận dữ liệu”: Nên sử dụng đường dẫn

tương đối nếu nằm trong cùng 1 web

c. method=“phương thức gửi dữ liệu”. Chỉ có 2 giá trị:

– GET (mặc định)

– POST

5/16

II. CÁC ĐỐI TƯỢNG NHẬP DỮ LIỆU

1. Cho phé p người sử dụng nhập dữ liệu trên trang web. Dữ

liệu này có thể được gửi về server để xử lý.

2. Người sử dụng nhập dữ liệu thô ng qua cá c điều khiển

(controls). Có nhiều loại control:

a. Form

b. Oneline Textbox

c. Checkbox

d. Radio Button

e. Button

f. Combo box (drop-down menu)

g. Listbox

h. Hộp nhập văn bản nhiều dò ng (TextArea)

6/16

i. …

II. CÁC ĐỐI TƯỢNG NHẬP DỮ LIỆU(tt)

Tất cả cá c điều khiển đều có tên được quy

định qua thuộc tí nh name. Tuy nhiên có một

số điều khiển thì name khô ng quan trọng

(cá c điều khiển mà sau này khô ng cần lấy

dữ liệu)

Cá c điều khiển từ số 2. đến số 5 được định

nghĩa nhờ thẻ <input> và thuộc tí nh type sẽ

xá c định là điều khiển nào sẽ được tạo ra.

7/16

1. Hộp nhập văn bản 1 dòng (Oneline Textbox)

A.Sử dụng để nhập cá c văn bản ngắn (trên 1

dò ng) hoặc mật khẩu

B.Thẻ: <input>

C.Thuộc tí nh:

a.name=“tên_đt”: quan trọng

b.type=“text”:Ô nhập văn bản thường

c.type=“password”: ô nhập mật khẩu

d.value=“giá trị mặc định”

8/16

2. Checkbox

A.Cho phé p chọn nhiều lựa chọn trong một

nhó m lựa chọn được đưa ra bằng cá ch

đánh dấu (“tích”).

B.Thẻ: <input>: mỗi ô nhập cần 1 thẻ

C.Thuộc tí nh:

a.name=“tên_đt”: quan trọng

b.type=“checkbox”

c.value=“giá trị”: đây là giá trị chương trì nh sẽ

nhận được nếu NSD chọn ô này.

d.checked: nếu có thì nút này mặc định được

chọn

9/16

3. Option Button (Radio Button)

A.Cho phé p chọn một lựa chọn trong một nhó m

lựa chọn được đưa ra.

B.Trên 1 form có thể có nhiều nhó m lựa chọn

kiểu này.

C.Thẻ: <input>: Mỗi ô cần 1 thẻ

D.Thuộc tí nh:

a.name=“tên_đt”: quan trọng. Cá c đối tượng cùng tên

thì thuộc cùng nhó m.

b.type=“radio”

c.value=“giá trị”: đây là giá trị chương trì nh sẽ nhận

được nếu NSD chọn ô này.

d.checked: nếu có thì nút này mặc định được chọn

10/16

4. Nút lệnh (Button)

A.Sử dụng để NSD ra lệnh thực hiện cô ng việc.

B.Trên web có 3 loại nút:

a.submit: Tự động ra lệnh gửi dữ liệu

b.reset: đưa mọi dữ liệu về trạng thá i mặc định

c.normal: người lập trì nh tự xử lý

C.Thẻ: <input>

D.Thuộc tí nh:

a.name=“tên_ĐT”: thường khô ng quan trọng

b.type=“submit”: nút submit

c.type=“reset”: nút reset

d.type=“button”: nút thô ng thường (normal)

11/16

e.value=“tiêu đề nút”

5. Combo Box (Drop-down menu)

A.Bao gồm một danh sá ch có nhiều phần tử. Tại một thời

điểm chỉ có 1 phần tử được chọn

B.NSD có thể chọn 1 phần tử trong danh sá ch sổ xuống bằng

cá ch kí ch vào mũi tên bên phải hộp danh sá ch.

C.Thẻ tạo hộp danh sá ch:

A.Thuộc tí nh:

a.name=“tên_ĐT”: quan trọng

B.Thẻ tạo 1 phần tử trong danh sá ch:

A.Thuộc tí nh:

a.value=“giá trị”: giá trị chương trì nh nhận được nếu phần

tử được chọn

^12/16b.selected: nếu có thì phần tử này mặc định được chọn

6. Listbox

A.Tương tự như Combo box, tuy nhiên có

thể nhì n thấy nhiều phần tử cùng lúc, có

thể lựa chọn nhiều phần tử

B.Thẻ: <select>…</select>

C.Thuộc tí nh: tương tự của combo tuy nhiên

có 2 thuộc tí nh khá c:

a.size=“số dòng”

b.multiple: cho phé p lựa chọn nhiều phần

tử cùng lúc

D.Thẻ <option>…</option> tương tự của

combo box

13/16

7. Hộp nhập văn bản nhiều dòng (TextArea)

A.Cho phé p nhập văn bản dài trên

nhiều dò ng.

B.Thẻ:

Nội dung mặc định

</textarea>

A.Thuộc tí nh:

a.name=“tên_ĐT”: quan trọng

b.rows=“số dòng”

c.cols=“số cột”

14/16

III. THIẾT KẾ FORM NHƯ SAU

15/16

Hết bài 6

FORM

16/16

Bài giảng Thiết kế Web - Bài 6: Form - Phan Thanh Sơn