Bài giảng 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 
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