Bài học cùng chủ đề
Bài 7. Thực hành tạo biểu mẫu SVIP
1. Tạo biểu mẫu có ô text nhập dữ liệu
❓Yêu cầu: Tạo biểu mẫu khi hiển thị trên trình duyệt web.
⚡Hướng dẫn thực hiện:
Bước 1. Tạo tệp “Bai7-NV1.html”.
Bước 2. Tạo cấu trúc và khai báo phần tử head.
Bước 3. Tạo biểu mẫu.
– Trong nội dung phần tử body, khai báo bằng cặp thẻ <form></form>.
+ Thêm ô text để nhập liệu cho thông tin “Họ và tên” và “Địa chỉ email”.
<label>Họ và tên:<input type = “text” name = “txtTen”></label><br>
+ Thêm ô textarea để nhập đoạn văn bản thể hiện thông tin “Ý kiến đóng góp”.
<label>Ý kiến đóng góp:<textarea name = “txtComment” rows = “6” cols = “40”></textarea></label>
Bước 4. Ghi lưu, mở tệp bằng trình duyệt web và xem kết quả.
Câu hỏi:
@205945343312@@205945347498@
2. Thêm các điều khiển vào biểu mẫu
❓Yêu cầu: Thêm các điều khiển nhập dữ liệu vào biểu mẫu.
⚡Hướng dẫn thực hiện:
Bước 1. Mở tệp HTML “Bai7-NV1.html” và ghi lưu tệp với tên mới là “Bai7-NV2.html”.
Bước 2. Cập nhật nội dung phần tử body.
– Thêm thể loại sách cần bổ sung bằng cách tạo nhóm các checkbox.
– Thêm nút submit bằng khai báo:
<input type= “submit” name= “cmd” value= “Góp ý”>
Bước 3. Ghi lưu, mở tệp bằng trình duyệt web và xem kết quả.
Câu hỏi:
@205945354827@
3. Tạo trang web phản hồi người dùng
❓Yêu cầu: Nhấn nút thì hiển thị trang web phản hồi.
⚡Hướng dẫn thực hiện:
Bước 1. Tạo tệp “Bai7-NV3.html”.
Bước 2. Tạo cấu trúc và khai báo phần tử head cho tệp “Bai7-NV3.html”.
Bước 3. Khai báo nội dung phần tử body cho tệp “Bai7-NV3.html”.
Bước 4. Cập nhật khai báo phần tử form cho tệp “Bai7-NV2.html”.
Mở tệp “Bai7-NV2.html”, cập nhật thuộc tính action trong khai báo phần tử form thành: action = “Bai7-NV3.html”.
Lưu ý: Tệp “Bai7-NV3.html” được lưu cùng thư mục chứa tệp “Bai7-NV2.html”.
Bước 5. Ghi lưu, mở tệp “Bai7-NV2.html” bằng trình duyệt web, điền biểu mẫu và nháy chuột vào nút “Góp ý” để quan sát kết quả.
Câu hỏi:
@205945422815@@205945431746@
