Chủ đề F. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH

TẠO TRANG WEB

Bài 6. TẠO BIỂU MẪU
Môn học: Tin học 12
Thời gian thực hiện: 2 tiết

Em hãy quan sát các hình ảnh sau:

Phiếu học tập số 1:
Câu 1:
Những hình ảnh trên các em thường thấy ở đâu? Trong
các trường hợp cụ thể nào?
Câu 2:
Những hình ảnh đó gọi chung là gì?

Câu hỏi

Phiếu học tập số 1:

Câu 1:
Những hình ảnh trên
các em thường thấy ở
đâu? Trong các trường
hợp cụ thể nào?
Câu 2:
Những hình ảnh đó gọi
chung là gì?

Trả lời

Câu 1:
Những hình ảnh trên em thường thấy
trên trang web email, facebook, trong
trường hợp : đăng nhập email, đăng nhập
facebook, điền thông tin cá nhân để đăng
kí email, đổi mật khẩu email.
Câu 2:
Những hình ảnh đó gọi chung là biểu mẫu
trên trang web

Bài 6. TẠO BIỂU MẪU
1. Nhập dữ liệu thông qua biểu mẫu
Biểu mẫu trên trang web là gì

Bài 6. TẠO BIỂU MẪU
1. Nhập dữ liệu thông qua biểu mẫu
Phiếu học tập
số 2:

Câu 1:
Biểu mẫu trên trang web là gì
Câu 2:
Trình bày định nghĩa của HTML về phần tử form để tạo biểu
mẫu

Bài 6. TẠO BIỂU MẪU

1. Nhập dữ liệu thông qua biểu mẫu

Biểu mẫu trên trang web là một giao diện để thu nhận thông tin
từ người dùng.
Biễu mẫu bao gồm các điều khiển nhập dữ liệu như ô văn bản,
nút chọn, hộp kiểm,... được thiết kế phù hợp với nhiều kiểu dữ
liệu khác nhau, giúp người dùng dễ dàng nhập dữ liệu và giảm
sai sót.
HTML định nghĩa phần tử form để tạo biểu mẫu theo cú pháp:

Các điều khiển nhập dữ liệu

Bài 6. TẠO BIỂU MẪU
1. Nhập dữ liệu thông qua biểu mẫu

Các điều khiển nhập dữ liệu

Trong đó:
- Thuộc tính action xác định tài nguyên web sẽ tiếp nhận và xử lý dữ liệu mà người dùng
vừa gởi đến máy chủ. Tài nguyên web thường là các chương trình viết bằng các ngôn
ngữ lập trình như: Java, , PHP python, ...
- Thuộc tính method xác định phương thức gởi: GET: hạn chế dung lượng, POST: không
hạn chế dung lượng
* Thông thường, kết thúc quá trình nhập dữ liệu, người dùng cần nháy chuột vào nút
lệnh có chức năng gửi dữ liệu trên biểu mẫu để dữ liệu nhập và được gửi kết quả đến
máy chủ web. Sau khi tiếp nhận, xử lí dữ liệu, máy chủ web gửi trả kết quả và kết quả
thường là một trang web khác.

Bài 6. TẠO BIỂU MẪU
2. Một số điều khiển hỗ trợ nhập dữ liệu thông dụng và nút lệnh
Phiếu học tập
số 3
Câu 1:
Trình bày điều khiển nhập kí tự và nhập dữ liệu bằng cách lựa
chọn trong phần tử form? Cho ví dụ?
Câu 2:
Trình bày điều khiển nút lệnh gửi dữ liệu? Cho ví dụ?
Câu 3:
Nêu một số lưu ý trong thiết kế biểu mẫu  

Bài 6. TẠO BIỂU MẪU
2. Một số điều khiển hỗ trợ nhập dữ liệu thông dụng và nút lệnh
a. Điều khiển nhập xâu kí tự: được khai báo bằng phần tử input như sau


Trong đó:
- Tên_điều_khiển được gán cho thuộc tính name. Thuộc tính name không
phải là thuộc tính bắt buộc khai báo, nhưng tất cả các điều khiển thường
được đặt tên để thuận lợi cho việc xử lí dữ liệu gửi từ biểu mẫu về máy
chủ web.
- Thuộc tính value nếu được khai báo thì Giá trị được gán là giá trị mặc
định của ô text khi hiển thị trên màn hình trình duyệt web.

Bài 6. TẠO BIỂU MẪU
2. Một số điều khiển hỗ trợ nhập dữ liệu thông dụng và nút lệnh
a. Điều khiển nhập xâu kí tự: được khai báo bằng phần tử input như sau


Ví dụ 1. Văn bản HTML ở Hình 2a tạo biểu mẫu có hai ô text nhập
dữ liệu, trong đó một ô text có giá trị mặc định. Kết quả hiển thị trên
màn hình trình duyệt web sẽ như ở Hình 2a và 2b/ SGK trang 60, 61

Bài 6. TẠO BIỂU MẪU
2. Một số điều khiển hỗ trợ nhập dữ liệu thông dụng và nút lệnh
a. Điều khiển nhập xâu kí tự: Ví dụ

Bài 6. TẠO BIỂU MẪU
2. Một số điều khiển hỗ trợ nhập dữ liệu thông dụng và nút lệnh

Bài 6. TẠO BIỂU MẪU
2. Một số điều khiển hỗ trợ nhập dữ liệu thông dụng và nút lệnh
b. Nhập dữ liệu bằng cách lựa chọn
- Danh sách các nút chọn (radio)

Ví dụ:

Bài 6. TẠO BIỂU MẪU
2. Một số điều khiển hỗ trợ nhập dữ liệu thông dụng và nút lệnh
b. Nhập dữ liệu bằng cách lựa chọn
- Danh sách các nút chọn (radio)
- Hộp kiểm(checkbox)

Ví dụ:

Bài 6. TẠO BIỂU MẪU
2. Một số điều khiển hỗ trợ nhập dữ liệu thông dụng và nút lệnh
c. Nút lệnh gửi dữ liệu
Nút lệnh gửi dữ liệu được khai báo như sau: