Bài học cùng chủ đề
Bài 6. Tạo biểu mẫu SVIP
1. Nhập dữ liệu thông qua biểu mẫu
Biểu mẫu web (phần tử form) của HTML là một công cụ cho phép người dùng nhập vào trang web.
Ta thường xuyên gặp các biểu mẫu (form) khi đăng kí tài khoản, mua hàng, tìm kiếm thông tin,...
Các thành phần của biểu mẫu
</form>
Có hai phương thức chính để gửi dữ liệu:
- GET: Dữ liệu biểu mẫu sẽ gắn kèm vào địa chỉ trang nhận dữ liệu và hiển thị trên thanh địa chỉ của trình duyệt.
- POST: Dữ liệu biểu mẫu sẽ được gửi dưới dạng gói tin đến trang nhận dữ liệu.
2. Một số điều khiển hỗ trợ nhập liệu thông dụng và nút lệnh
a) Nhập kí tự
Nhập xâu kí tự bằng phần tử input như sau:
Một số thuộc tính hỗ trợ điều khiển nhập dữ liệu trong thẻ input bao gồm:
| Phần tử | Mục đích | Ví dụ |
|
textarea |
Tạo ô nhập đoạn văn. | <textarea name="Comments" rows="5" cols="60"></textarea> |
| label | Tạo nhãn mô tả ý nghĩa của điều khiển nhập dữ liệu. | <label>Địa chỉ email:</label> |
| password | Tạo ô dùng để nhập mật khẩu, dữ liệu chỉ hiện ở dạng dấu ba chấm. | <input type="password" name="MatKhau"> |
b) Nhập dữ liệu bằng cách lựa chọn
Phần tử select có tác dụng cho phép người dùng chọn một trong các lựa chọn trong danh sách thả xuống. Mỗi phần tử trong danh sách được định nghĩa bằng thẻ option. Cấu trúc phần tử select như sau:
Danh sách các nút chọn (radio button) được sử dụng trong trường hợp cho người dùng chọn lựa một mục trong danh sách.
Sử dụng hộp kiểm (checkbox) cho phép chọn nhiều hoặc tất cả các mục trong danh sách.
c) Nút lệnh gửi dữ liệu
Nút lệnh gửi (nút submit) để gửi dữ liệu được nhập trên biểu mẫu về máy chủ web.
3. Một số lưu ý trong việc thiết kế biểu mẫu
Khi khai báo các điều khiển trên biểu mẫu, cần lưu ý:
- Chọn điều khiển nhập dữ liệu phù hợp với loại thông tin cần thu thập.
- Thứ tự các điều khiển nên sắp xếp từ trái sang phải, từ trên xuống dưới, gộp nhóm phù hợp với thứ tự dữ liệu người dùng cần nhập.
- Nếu biểu mẫu có nhiều nút lệnh, nên sắp xếp nút lệnh theo hàng ngang, ưu tiên nút lệnh có tần suất sử dụng nhiều ở bên trái.