Thực hành tạo biểu mẫu (trang 69). Đây là phần thực hành của bài 12 - Tạo biểu mẫu - tin học 12 (KNTT). Thầy Cô và các em học sinh có thể dùng làm tài liệu tham khảo. Chúc Thầy Cô dạy tốt, chúc các em học sinh học giỏi.
Hãy thật sự cố gắng khi còn có thể.
Vì mọi sự cố gắng đều đem lại kết quả tốt đẹp.
Vì mọi sự cố gắng đều đem lại kết quả tốt đẹp.
2. THỰC HÀNH TẠO BIỂU MẪU
Nhiệm vụ 1: Tạo biểu mẫu
Yêu cầu: Tạo biểu mẫu để nhập thông tin các món ăn (Hình 12.2).
Hướng dẫn:
Bước 1. Tạo tiêu đề cho biểu mẫu bằng thẻ heading:<h2> thông tin món ăn</h2>.
Bước 2. Tạo một biểu mẫu bằng cặp thẻ <form></form>.
Bước 3. Trong cặp thẻ <form>, lần lượt tạo ba cặp label và input.
Mỗi thẻ <input>, ngoài việc sử dụng thuộc tính type để xác định kiểu dữ liệu cần nhập, cần thiết lập mã định danh bằng thuộc tính id để liên kết với thẻ <label> tương ứng. Ví dụ:
Để phần tử label được viết trên dòng mới cần thêm thẻ <br> vào trước thẻ <label> tương ứng.
Nhiệm vụ 2: Tạo biểu mẫu
Yêu cầu: Tạo biểu mẫu để nhập thông tin đăng kí môn thi tốt nghiệp (Hình 12.3).
Hướng dẫn:
Bước 1. Xác định thông tin cần cung cấp:- Họ và tên: type="text”.
- Số căn cước công dân: type="number”.
- Ngày sinh: type="date”.
- Giới tính: Chọn một trong hai giá trị type="radio” (hoặc phần tử select).
- Các môn Toán, Ngữ văn, Ngoại ngữ: Giá trị có hoặc không: type="checkbox”.
- Tổ hợp môn Khoa học tự nhiên hoặc Khoa học xã hội: Chọn một trong hai giá trị type=”radio” (hoặc phần tử select).
- Nút gửi thông tin: type="submit” value="Gửi thông tin”.
Bước 2. Lần lượt thêm các phần tử đã phân tích ở trên theo cấu trúc đã học.
Bước 3. Ngoài ra, để biểu mẫu dễ nhìn, ta bổ sung thêm tiêu đề bằng thẻ <h1> và nhóm các thông tin bằng thẻ <fieldset> bằng cách đặt tất cả các câu lệnh để hiển thị các phần tử nằm trong khung giữa cặp thẻ <fieldset> … </fieldset>.
Kết quả thu được là biểu mẫu như Hình 12.3.
Code tham khảo Nhiệm vụ 1. Tạo biểu mẫu Thông tin món ăn ➺ Tải file
CÙNG CHUYÊN MỤC:
Bài thực hành số 1. Định dạng văn bản và phông chữ (trang 50 của bài 8)
Bài thực hành số 2. Tạo danh sách và bảng (trang 55 của bài 9)
Bài thực hành số 3. Tạo liên kết (trang 61 của bài 10)
Bài thực hành số 4. Chèn tệp đa phương tiện và khung nội tuyến (trang 65 của bài 11)
Bài thực hành số 5. Tạo biểu mẫu (trang 69 của bài 12)
Bài thực hành số 6. Định dạng văn bản bằng CSS (trang 81 của bài 14)
Bài thực hành số 7. Tạo màu cho chữ và nền (trang 88 của bài 15)
Bài thực hành số 8. Định dạng khung (trang 93 của bài 16)
Bài thực hành số 9. Các mức ưu tiên của bộ chọn (trang 100 của bài 17)
Bài thực hành số 10. Thực hành tổng hợp thiết kế trang web (trang 103 của bài 18)
Bài thực hành số 2. Tạo danh sách và bảng (trang 55 của bài 9)
Bài thực hành số 3. Tạo liên kết (trang 61 của bài 10)
Bài thực hành số 4. Chèn tệp đa phương tiện và khung nội tuyến (trang 65 của bài 11)
Bài thực hành số 5. Tạo biểu mẫu (trang 69 của bài 12)
Bài thực hành số 6. Định dạng văn bản bằng CSS (trang 81 của bài 14)
Bài thực hành số 7. Tạo màu cho chữ và nền (trang 88 của bài 15)
Bài thực hành số 8. Định dạng khung (trang 93 của bài 16)
Bài thực hành số 9. Các mức ưu tiên của bộ chọn (trang 100 của bài 17)
Bài thực hành số 10. Thực hành tổng hợp thiết kế trang web (trang 103 của bài 18)
CÁC CHUYÊN MỤC LIÊN QUAN: