Tài liệu Lập trình Web - Form trong lập trình Web - Nguyễn Hoàng Tùng: FORM TRONG LẬP TRÌNH WEB
Nguyễn Hoàng Tùng
Bộ môn Kỹ thuật phần mềm
nhoangtung@agu.edu.vn
www.nhtung.com
Nội dung chính của slide này
Form là gì?
Các thành phần của form.
16/08/2014 Lập trình Web 2
Form là gì?
Là các thành phần của HTML cho phép người dùng có thể
nhập thông tin vào.
Tương tự như giao diện của một ứng dụng quản lý bao gồm:
textbox, listbox, checkbox,...
Dữ liệu do người dùng nhập được truyền giữa web-client và
web-server thông qua form.
Các thành phần được thiết kế thông qua các thẻ (tags).
16/08/2014 Lập trình Web 3
Ví dụ về giao diện form
16/08/2014 Lập trình Web 4
Ví dụ về giao diện form
16/08/2014 Lập trình Web 5
Các thành phần của form
1. input
text
password
number
radio
checkbox
color
date
email
2. label
3. button
4. textarea
5. select/option
6. datalist/option
7. keygen
8. output
9. fieldset/legend
16/08/2014 Lập trình Web 6
file
time
url
range
image
submit
r...
62 trang |
Chia sẻ: putihuynh11 | Lượt xem: 899 | Lượt tải: 1
Bạn đang xem trước 20 trang mẫu tài liệu Lập trình Web - Form trong lập trình Web - Nguyễn Hoàng Tùng, để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên
FORM TRONG LẬP TRÌNH WEB
Nguyễn Hoàng Tùng
Bộ môn Kỹ thuật phần mềm
nhoangtung@agu.edu.vn
www.nhtung.com
Nội dung chính của slide này
Form là gì?
Các thành phần của form.
16/08/2014 Lập trình Web 2
Form là gì?
Là các thành phần của HTML cho phép người dùng có thể
nhập thông tin vào.
Tương tự như giao diện của một ứng dụng quản lý bao gồm:
textbox, listbox, checkbox,...
Dữ liệu do người dùng nhập được truyền giữa web-client và
web-server thông qua form.
Các thành phần được thiết kế thông qua các thẻ (tags).
16/08/2014 Lập trình Web 3
Ví dụ về giao diện form
16/08/2014 Lập trình Web 4
Ví dụ về giao diện form
16/08/2014 Lập trình Web 5
Các thành phần của form
1. input
text
password
number
radio
checkbox
color
date
email
2. label
3. button
4. textarea
5. select/option
6. datalist/option
7. keygen
8. output
9. fieldset/legend
16/08/2014 Lập trình Web 6
file
time
url
range
image
submit
reset
button
Các thành phần của form
16/08/2014 Lập trình Web 7
Form
TextBox
PasswordBox
RadioButton
ComboBox
TextArea
CheckBox
Button
Label
form
Sử dụng để chứa mọi thành phần khác của form.
Không nhìn thấy được khi trang web đang hiển thị.
Các thuộc tính quan trọng:
action: Chỉ đến tập tin từ sever sẽ nhận dữ liệu từ form. Nên
sử dụng đường dẫn tương đối nếu nằm trong cùng 1 website.
method: Có 2 dạng phương thức:
• GET: Dữ liệu truyền từ client đến server “công khai”, các giá trị và
thông tin nhập liệu từ các input sẽ hiện trên thanh địa chỉ.
• POST: Các giá trị và thông tin nhập liệu từ các input sẽ không
hiện trên thanh địa chỉ.
Form được định nghĩa bằng cặp thẻ: ...
16/08/2014 Lập trình Web 8
form
Các thuộc tính của thẻ :
16/08/2014 Lập trình Web 9
form
Ví dụ:
16/08/2014 Lập trình Web 10
input text
Công dụng: Tạo điều khiển nhập kiểu text 1 dòng.
16/08/2014 Lập trình Web 11
input text
Ví dụ:
16/08/2014 Lập trình Web 12
input password
Công dụng: Tạo điều khiển nhập mật khẩu.
16/08/2014 Lập trình Web 13
input password
Ví dụ:
16/08/2014 Lập trình Web 14
input number
Công dụng: Tạo điều khiển nhập kiểu số.
16/08/2014 Lập trình Web 15
input number
Ví dụ:
16/08/2014 Lập trình Web 16
input radio
Công dụng: Tạo điều khiển 1 lựa chọn.
16/08/2014 Lập trình Web 17
input radio
Ví dụ:
16/08/2014 Lập trình Web 18
input checkbox
Công dụng: Tạo điều khiển nhiều lựa chọn.
16/08/2014 Lập trình Web 19
input checkbox
Ví dụ:
16/08/2014 Lập trình Web 20
input color
Công dụng: Tạo điều khiển chọn màu sắc.
16/08/2014 Lập trình Web 21
input color
Ví dụ:
16/08/2014 Lập trình Web 22
input date
Công dụng: Tạo điều khiển nhập kiểu ngày.
16/08/2014 Lập trình Web 23
input date
Ví dụ:
16/08/2014 Lập trình Web 24
input email
Công dụng: Tạo điều khiển nhập kiểu email.
16/08/2014 Lập trình Web 25
input email
Ví dụ:
16/08/2014 Lập trình Web 26
input file
Công dụng: Tạo điều khiển chọn tập tin để upload.
16/08/2014 Lập trình Web 27
input file
Ví dụ:
16/08/2014 Lập trình Web 28
input time
Công dụng: Tạo điều khiển nhập kiểu giờ.
16/08/2014 Lập trình Web 29
input time
Ví dụ:
16/08/2014 Lập trình Web 30
input url
Công dụng: Tạo điều khiển nhập kiểu địa chỉ trang web.
16/08/2014 Lập trình Web 31
input url
Ví dụ:
16/08/2014 Lập trình Web 32
input range
Công dụng: Tạo điều khiển chọn giá trị trong khoảng.
16/08/2014 Lập trình Web 33
input range
Ví dụ:
16/08/2014 Lập trình Web 34
input image
Công dụng: Tạo nút submit dạng hình ảnh.
16/08/2014 Lập trình Web 35
input image
Ví dụ:
16/08/2014 Lập trình Web 36
input submit
Công dụng: Tạo nút submit dạng thường.
16/08/2014 Lập trình Web 37
input submit
Ví dụ:
16/08/2014 Lập trình Web 38
input reset
Công dụng: Tạo nút reset.
16/08/2014 Lập trình Web 39
input reset
Ví dụ:
16/08/2014 Lập trình Web 40
input button
Công dụng: Tạo nút nhấn không kèm sự kiện.
16/08/2014 Lập trình Web 41
input button
Ví dụ:
16/08/2014 Lập trình Web 42
label
Công dụng: Tạo nhãn cho điều khiển.
16/08/2014 Lập trình Web 43
label
Ví dụ:
16/08/2014 Lập trình Web 44
button
Công dụng: Tạo nút nhấn tuỳ chọn (button, reset, submit).
16/08/2014 Lập trình Web 45
button
Ví dụ:
16/08/2014 Lập trình Web 46
textarea
Công dụng: Tạo điều khiển nhập kiểu text nhiều dòng.
16/08/2014 Lập trình Web 47
textarea
Ví dụ:
16/08/2014 Lập trình Web 48
select/optgroup/option
select
Công dụng: Tạo điều khiển dạng danh sách đổ xuống.
Danh sách thuộc tính:
16/08/2014 Lập trình Web 49
select/optgroup/option
optgroup
Công dụng: Nhóm các thành phần liên quan (được lồng trong ).
Danh sách thuộc tính:
16/08/2014 Lập trình Web 50
select/optgroup/option
option
Công dụng: Tạo một chọn lựa (được lồng trong , , ).
Danh sách thuộc tính:
16/08/2014 Lập trình Web 51
select/optgroup/option
16/08/2014 Lập trình Web 52
datalist/option
datalist
Công dụng: Tạo danh sách gợi ý, áp dụng cho .
Danh sách thuộc tính: Không có.
option
Công dụng: Tạo một chọn lựa (được lồng trong , , ).
Danh sách thuộc tính: Đã trình bày ở slide trước.
16/08/2014 Lập trình Web 53
datalist/option
16/08/2014 Lập trình Web 54
keygen
Công dụng: Tạo một cặp khóa chính sử dụng cho .
16/08/2014 Lập trình Web 55
keygen
Ví dụ:
16/08/2014 Lập trình Web 56
output
Công dụng: Xuất ra kết quả của một phép tính.
16/08/2014 Lập trình Web 57
output
Ví dụ:
16/08/2014 Lập trình Web 58
fieldset/legend
fieldset
Công dụng: Nhóm các thành phần liên quan trong một form.
Danh sách thuộc tính:
16/08/2014 Lập trình Web 59
fieldset/legend
legend
Công dụng: Định nghĩa tên cho (được lồng trong ).
Danh sách thuộc tính:
16/08/2014 Lập trình Web 60
fieldset/legend
16/08/2014 Lập trình Web 61
Giải đáp thắc mắc
16/08/2014 Lập trình Web 62
Các file đính kèm theo tài liệu này:
- lap_trinh_web_phan05_form_2354_1994325.pdf