BÀI F5 - TẠO BIỂU MẪU TRONG TRANG WEB (CTST

BÀI F5 - TẠO BIỂU MẪU TRONG TRANG WEB (CTST - CS & ICT)

Đây là bài soạn gợi ý trả lời SGK tin học 12 (bộ sách Chân trời sáng tạo). Bài này là kiến thức cốt lõi chung cho cả hai định hướng: Khoa học máy tính (CS) và Tin học ứng dụng (ICT). Các em truy cập vào để tham khảo nhé. Chúc các em có nhiều sức khỏe và chăm ngoan học giỏi.

(trang 127 sách ict, trang 94 sách cs)

Khi truy xuất trang web, người dùng không chỉ xem nội dung mà còn muốn tương tác với trang web, chẳng hạn nhập vào nội dung mới. Em hãy nêu một số tình huống mà em thường tương tác với trang web và mô tả cụ thể các thao tác này.

Gợi ý trả lời

Một số tình huống mà em thường tương tác với trang web:
- Đăng nhập vào tài khoản học tập: nhập tên đăng nhập, mật khẩu và nhấn nút “Đăng nhập”.
- Gửi ý kiến phản hồi: nhập họ tên, email, nội dung phản hồi, rồi nhấn “Gửi”.
- Thực hiện khảo sát: chọn đáp án trắc nghiệm, điền nhận xét và nhấn “Gửi”.

(trang 127 sách ict, trang 94 sách cs)

Em hãy kể tên một số biểu mẫu phổ biến trên các trang web.

Gợi ý trả lời

Một số biểu mẫu phổ biến trên các trang web:
- Biểu mẫu đăng nhập
- Biểu mẫu đăng ký tài khoản
- Biểu mẫu liên hệ/ý kiến phản hồi
- Biểu mẫu khảo sát, kiểm tra, đăng ký thông tin

(trang 130 sách ict, trang 97 sách cs)

Em hãy thêm vào biểu mẫu trong các ví dụ trên những thành phần sau:
a) Hộp văn bản để người dùng nhập địa chỉ email.
b) Hộp kiểm để người dùng chọn thêm một câu lạc bộ.
c) Nút nhấn để xoá dữ liệu hiện có trên biểu mẫu.

Gợi ý trả lời

a) Hộp văn bản nhập email:
<label for="email">Email:</label>
<input type="email" id="email" name="email">
b) Hộp kiểm chọn thêm một câu lạc bộ:
<label><input type="checkbox" name="clb" value="cntt"> Câu lạc bộ Tin học</label>
c) Nút nhấn xoá dữ liệu biểu mẫu:
<input type="reset" value="Xoá dữ liệu">

(trang 130 sách ict, trang 97 sách cs)

1. Em hãy nêu khái niệm biểu mẫu web và một số ví dụ biểu mẫu thông dụng.
2. Thảo luận với bạn và kể tên một số thành phần nhập liệu trên biểu mẫu web và thẻ HTML tương ứng để tạo các thành phần đó.
3. Theo em, tên, giá trị và ý nghĩa của những thuộc tính trong thẻ <input> là gì?

Gợi ý trả lời

1. Khái niệm biểu mẫu web và ví dụ:
- Biểu mẫu web là vùng trên trang web cho phép người dùng nhập dữ liệu hoặc tương tác với trang web.
- Ví dụ: biểu mẫu đăng ký, biểu mẫu khảo sát, biểu mẫu phản hồi...
2. Một số thành phần nhập liệu trên biểu mẫu web và thẻ HTML tương ứng:

3. Tên, giá trị và ý nghĩa của các thuộc tính trong thẻ <input<:

(trang 131 sách ict, trang 98 sách cs)

Em hãy thực hiện các yêu cầu dưới đây.
1. Bổ sung mã lệnh HTML vào tệp login.html để thêm các thành phần nhập liệu sau:
a) Hộp kiểm có nhãn Ghi nhớ cho lần đăng nhập sau.
b) Đường liên kết Quên mật khẩu? để điều hướng đến trang web recovery.html.
c) Thay đổi kiểu chữ và màu sắc các thành phần của biểu mẫu trong tệp login.html vừa tạo.
2. Tạo biểu mẫu web để người dùng là học sinh làm bài kiểm tra với các yêu cầu sau:
a) Trang web thongtin.html có biểu mẫu gồm 3 hộp văn bản nhập họ tên, lớp, số thứ tự trong lớp và nút nhấn để chuyển đến trang web cauhoi.html.
b) Trang web cauhoi.html có biểu mẫu gồm 3 câu hỏi trắc nghiệm, mỗi câu có 4 phương án lựa chọn, một câu hỏi tự luận và nút nhấn để chọn tệp bài làm tự luận trên máy tính.
c) Tìm hiểu cách tạo hộp danh sách chọn lớp để thay thế cho hộp văn bản nhập lớp.
Gợi ý:
Sử dụng thẻ <input> và chỉ định giá trị number cho thuộc tính type để tạo hộp văn bản nhập số thứ tự. Để chuyển đến trang web cauhoi.html, em chèn thêm thuộc tính action vào thẻ <form>: <form action="cauhoi.html">.
Sử dụng thẻ <input> và chỉ định giá trị file cho thuộc tính type để tạo nút nhấn chọn tệp trên máy tính.
Sử dụng thẻ <select> và <option> để tạo hộp danh sách chọn lớp.

Gợi ý trả lời

1. Bổ sung mã lệnh HTML vào tệp login.html:
a) Hộp kiểm “Ghi nhớ”
<label><input type="checkbox" name="remember"> Ghi nhớ cho lần đăng nhập sau</label>
b) Đường liên kết "Quên mật khẩu?"
<a href="recovery.html">Quên mật khẩu?</a>
c) Đổi kiểu chữ và màu sắc bằng CSS: