Webcourse form

  • 35 trang
  • file .pdf
Lập trình và Thiết kế Web 1
i5
Form
Khoa CNTT – ĐH.KHTN
© 2007 Khoa Công nghệ thông tin
Lập trình và Thiết kế Web 1 – Bài 5 : Form
Nội dung
 Giới thiệu về Form
 Các thành phần của Form
 Một số thuộc tính tiện ích của Form và Input
 Phân biệt phương thức GET/POST
 Thẻ MARQUEE
© 2007 Khoa CNTT - ĐHKHTN
Lập trình và Thiết kế Web 1 – Bài 5 : Form
Nội dung
 Giới thiệu về Form
 Các thành phần của Form
 Một số thuộc tính tiện ích của Form và Input
 Phân biệt phương thức GET/POST
 Thẻ MARQUEE
© 2007 Khoa CNTT - ĐHKHTN
Lập trình và Thiết kế Web 1 – Bài 5 : Form
Giới thiệu Form
 Được dùng để nhận dữ liệu từ phía người dùng
 Giúp gởi yêu cầu của người dùng đến trang xử lý trong
ứng dụng web
 Tag
dùng để chứa các thành phần khác của form
 Những thành phần nhập liệu được gọi là Form Field
– text field
– password field
– multiple-line text field
– ……
© 2007 Khoa CNTT - ĐHKHTN
Lập trình và Thiết kế Web 1 – Bài 5 : Form
Ví dụ
© 2007 Khoa CNTT - ĐHKHTN
Lập trình và Thiết kế Web 1 – Bài 5 : Form
Tag
 Là container chứa các thành phần nhập liệu khác.



 Các thuộc tính của
– NAME : tên FORM
– ACTION : chỉ định trang web nhận xử lý dữ liệu từ FORM này
khi có sự kiện click của button SUBMIT.
– METHOD : Xác định phương thức chuyển dữ liệu (POST,GET)
© 2007 Khoa CNTT - ĐHKHTN
Lập trình và Thiết kế Web 1 – Bài 5 : Form
Tag
- Ví dụ
Dangnhap.htm


Action=“/admin/xlDangnhap.php”
Method=“Post”>
………………



© 2007 Khoa CNTT - ĐHKHTN
Lập trình và Thiết kế Web 1 – Bài 5 : Form
Nội dung
 Giới thiệu về Form
 Các thành phần của Form
 Một số thuộc tính tiện ích của Form và Input
 Phân biệt phương thức GET/POST
 Thẻ MARQUEE
© 2007 Khoa CNTT - ĐHKHTN
Lập trình và Thiết kế Web 1 – Bài 5 : Form
Các thành phần của Form
 Gồm các loại Form Field sau:
– Text field
– Password field
– Multiple-line text field
– Hidden Text field
– Check box
– Radio button
– File Form Control
– Submit Button, Reset Button, Generalized Button
– Label
– Pull-down menu
– Scrolled list
– Field Set
© 2007 Khoa CNTT - ĐHKHTN
Lập trình và Thiết kế Web 1 – Bài 5 : Form
Các thành phần của Form – Text Field
 Dùng để nhập một dòng văn bản
 Cú pháp
TYPE = “TEXT”
NAME = string
READONLY 20
SIZE = variant t with 301
MAXLENGTH = long
TABINDEX = integer 30
VALUE = string
…………
>
 Ví dụ
301” size=“20” maxlength=“30”>
© 2007 Khoa CNTT - ĐHKHTN
Lập trình và Thiết kế Web 1 – Bài 5 : Form
Các thành phần của Form – Password Field
 Dùng để nhập mật khẩu
 Cú pháp
TYPE = “PASSWORD”
NAME = string
READONLY
SIZE = variant
MAXLENGTH = long
TABINDEX = integer
VALUE = string
…………
>
 Ví dụ
size=“20” maxlength=“30”>
© 2007 Khoa CNTT - ĐHKHTN
Lập trình và Thiết kế Web 1 – Bài 5 : Form
Các thành phần của Form – Multiline Text Field
 Dùng để nhập văn bản nhiều dòng
 Cú pháp
20
COLS = long
ROWS = long
5
DISABLED
NAME = string
READONLY
TABINDEX = integer
WRAP = OFF | PHYSICAL | VIRTUAL> ……………

 Ví dụ
© 2007 Khoa CNTT - ĐHKHTN
Lập trình và Thiết kế Web 1 – Bài 5 : Form
Các thành phần của Form – Hidden Text Field
 Dùng để truyền 1 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
TYPE = “HIDDEN”
NAME = string
READONLY
SIZE = variant
MAXLENGTH = long
TABINDEX = integer
VALUE = string
…………
>
hidden text field :
© 2007 Khoa CNTT - ĐHKHTN
Lập trình và Thiết kế Web 1 – Bài 5 : Form
Các thành phần của Form – Pull-down Menu
 Dùng để tạo ra một combo box
 Cú pháp

© 2007 Khoa CNTT - ĐHKHTN
Lập trình và Thiết kế Web 1 – Bài 5 : Form
Các thành phần của Form – Pull-down Menu


combo box:



© 2007 Khoa CNTT - ĐHKHTN
Lập trình và Thiết kế Web 1 – Bài 5 : Form
Các thành phần của Form – Check box
 Cú pháp
TYPE = “checkbox”
NAME = “text”
VALUE = “text”
[checked]
>
 Ví dụ


Check box group :

Anh van:

Hoa:

Nhut:



© 2007 Khoa CNTT - ĐHKHTN
Lập trình và Thiết kế Web 1 – Bài 5 : Form
Các thành phần của Form – Radio button
 Cú pháp
TYPE = “radio”
NAME = “text”
VALUE = “text”
[checked]
>
 Ví dụ


Radio Button Group :

Nam:

Nu:

Nu:



© 2007 Khoa CNTT - ĐHKHTN
Lập trình và Thiết kế Web 1 – Bài 5 : Form
Các thành phần của Form – 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 và nút này được viền đậm
 Cú pháp:

 Ví dụ:

© 2007 Khoa CNTT - ĐHKHTN
Lập trình và Thiết kế Web 1 – Bài 5 : Form
Các thành phần của Form – Reset Button
 Dùng để trả lại giá trị mặc định cho các control khác trong
form
 Cú pháp

 Ví dụ

© 2007 Khoa CNTT - ĐHKHTN