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.
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ụ:
Ở đây phần tử
input là thường nhập dữ liệu dạng chữ, ứng với nhãn Tên món ăn.
Để 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
Code tham khảo Nhiệm vụ 2. Tạo biểu mẫu Đăng kí môn thi tốt nghiệp ➺ Tải file
