Bài giảng Thiết kế Web - Chương 5: Web Form

1Thiết kế web Khoa CNTT 1
Chương 5: Web Form
Nội dung:

 Giới thiệu về web form

 Cấu trúc một form

 Phương thức GET/POST

 Frame và các ứng dụng của nó
Thiết kế web Khoa CNTT 2
Giới thiệu về web form
Dùng ñể nhận dữ liệu từ phía user 
Gởi yêu cầu của user ñến trang xử lý hay 
tương tác với người dùng
 Những thành phần nhập liệu ñược gọi là Form 
Field
– Text field
– Hidden field (password field)
– Checkbox
– Radio Button
– 
2Thiết kế web Khoa CNTT 3
Ví dụ về web form
Thiết kế web Khoa CNTT 4
Cấu trúc một HTML Form
<FORM
ACTION = url
METHOD = GET | POST
NAME = name
TARGET = frame_name | _blank | _self
>
<INPUT
TYPE = BUTTON | CHECKBOX | FILE | IMAGE | PASSWORD | 
RADIO | RESET | SUBMIT | TEXT
NAME= string
VALUE = string
ALIGN = LEFT | CENTER | RIGHT
>
3Thiết kế web Khoa CNTT 5
HTML Form
First name: 
Last name: 
Thiết kế web Khoa CNTT 6
Các thành phần của Form
Gồm các loại Form Field sau:
– Text field
– Password field
– Check box
– Radio button
– Multiple-line text field
– Hidden Text field
– Pull-down menu
– File Form Control
– Submit Button, Reset Button, Generalized Button
– Label
– Field Set
4Thiết kế web Khoa CNTT 7
Text field
Dùng ñể nhập một dòng văn bản
Cú pháp:
<INPUT
TYPE = “TEXT”
NAME = string
VALUE = string
READONLY
SIZE = variant
MAXLENGTH = long
TABINDEX = integer
>
Thiết kế web Khoa CNTT 8
Ví dụ Text field
Your input was received as:
FirstName=Vu&LastName=Lung 
5Thiết kế web Khoa CNTT 9
Password field
Dùng ñể nhập mật khẩu
Cú pháp:
<INPUT
TYPE = “PASSWORD”
NAME = string
VALUE = string
READONLY
SIZE = variant
MAXLENGTH = long
TABINDEX = integer
>
Vd: 
Password: 
Nhập vào 123456
Thiết kế web Khoa CNTT 10
Check box
Cho phép người dùng chọn lựa một hay nhiều 
phương án
Cú pháp:
<input
TYPE = “checkbox”
NAME = “text”
VALUE = “text”
[checked]
>
6Thiết kế web Khoa CNTT 11
VD Check box
Thiết kế web Khoa CNTT 12
Radio button
Cho phép người dùng chọn lựa một trong nhiều 
phương án có thể
Cú pháp:
<input
TYPE = “radio”
NAME = “text”
VALUE = “text”
[checked]
>
7Thiết kế web Khoa CNTT 13
VD Radio button
<form name="input" 
action="html_form_action.asp"
method="get">
Male: 
<input type="radio" name="Sex" value="Male" 
checked="checked">
Female: 
If you click the "Submit" button, you will send your 
input to a new page called html_form_action.asp.
Thiết kế web Khoa CNTT 14
Multiple-line text field
Dùng ñể nhập văn bản có nhiều dòng
 Cú pháp:
<TEXTAREA
COLS = long
ROWS = long
DISABLED
NAME = string
READONLY
TABINDEX = integer
WRAP = OFF | PHYSICAL | VIRTUAL> 
VD: 
ðây là Text trong multiline.
8Thiết kế web Khoa CNTT 15
Hidden Text field
 Dùng ñể truyền 1 ñoạn text (giá trị của thuộc tính value) 
khi form ñược submit
 Không hiển thị ra trên màn hình
 Cú pháp:
<INPUT
TYPE = “HIDDEN”
NAME = string
VALUE = string 
READONLY
SIZE = variant
MAXLENGTH = long
TABINDEX = integer
>
VD:
Hidden text field : 
<input type="hidden"
name="txtHidden" 
value="ðây là ñoạn text dấu 
mà bạn không thấy“
>
Thiết kế web Khoa CNTT 16
Pull-down menu
Dùng ñể tạo ra một combo box
Cú pháp:
9Thiết kế web Khoa CNTT 17
Vì dụ Pull-down menu
Combo box:
Window Media 10
Jet Audio 9
Windows XP
Windows XP SP2
Windows Vista
Office 2007
Thiết kế web Khoa CNTT 18
File Form Control
Dùng ñể upload 1 file lên server
Cú pháp
<form name=“" enctype="multipart/form-data" method="post" 
action=“">
Ví dụ:
<form name="form1" enctype="multipart/form-data" method="post" 
action="">
10
Thiết kế web Khoa CNTT 19
Submit button
Nút phát lệnh và gởi dữ liệu của form ñến trang xử lý.
Mỗi form chỉ có một nút submit 
Cú pháp:
VD:
Thiết kế web Khoa CNTT 20
Reset Button, Generalized Button
Reset Button :Dùng ñể trả lại giá trị mặc ñịnh cho các 
control khác trong form
Cú pháp:
Generalized Button
Cú pháp:
<input type=“button” name=“” value=“”
onclick=“script”>
VD:
<input type="button" name=“btnNormal” value=“Goi Script!”
onclick="alert('Hello from JavaScript');" >
11
Thiết kế web Khoa CNTT 21
Label
Dùng ñể gán nhãn cho một Form Field
 Cú pháp:
<LABEL
FOR = IDString
CLASS=string
STYLE=string
>
Thiết kế web Khoa CNTT 22
Field Set
Dùng ñể tạo ra Group box, nhóm các thành 
phần nhập liệu trong form
•Cú pháp: 
GroupBox’s Name
VD:
Subject
 English
Mathematics
 Graph 
Theory
12
Thiết kế web Khoa CNTT 23
phương thức GET/POST
GET:
Các ñối số của Form ñược ghi kèm theo vào 
ñường dẫn URL của thuộc tính Action trong tag 
Khối lượng dữ liệu ñối số ñược truyền ñi của 
Form bị giới hạn bởi chiều dài tối ña của một 
URL trên Address bar. (tối ña của một URL là 
2048 bytes)
Thiết kế web Khoa CNTT 24
VD GET
User name:<input type="text" name="User" 
value=""> 
Password: <input type="password" name="Pass" 
value=""> 
<input type="submit" name="Check" 
value="KiemTra">
13
Thiết kế web Khoa CNTT 25
phương thức GET/POST
POST:
Các ñối số của Form ñược truyền “ngầm” bên 
dưới
Khối lượng dữ liệu ñối số ñược truyền ñi của 
Form không phụ thuộc vào URL 
 Không bị giới 
hạn
 Chỉ sử dụng ñược phương thức truyền POST 
khi Action chỉ ñịnh ñến trang web thuộc dạng xử 
lý trên Server
Thiết kế web Khoa CNTT 26
HTML Frames
Dùng ñể thể hiện cùng một lúc nhiều html 
document ra trên cùng một màn hình máy tính
Mỗi html document gọi là frame
Các frame hoạt ñộng ñộc lập với nhau
Cú pháp:
..
14
Thiết kế web Khoa CNTT 27
Tạo Frame
 Tạo chia 2 frame
Your browser does not handle frames!
Scolling=“0”
Frameborder=“0”
Thiết kế web Khoa CNTT 28
Tạo Frame
15
Thiết kế web Khoa CNTT 29
Tạo Frame
Thiết kế web Khoa CNTT 30
FiLE frameNavigation.htm
<frame 
src="tryhtml_contents.htm">
<frame src="frame_a.htm" 
name="showframe">
FILE tryhtml_contents.htm
Frame a
Frame b
Frame c
FILE frame_a.htm
Nội dung trong trang 
Frame A
16
Thiết kế web Khoa CNTT 31