Giải Tin học 12 - Định hướng khoa học máy tính trang 70

Lời giải chi tiết SGK Lớp 12 · Môn Tin Há»c · Trang 70–71

Hai trang này thuộc Bài 12 về tạo biểu mẫu (form) trong HTML. Mình tóm tắt lý thuyết rồi giải các câu hỏi nhé.

Tóm tắt lý thuyết

Phần tử input – thành phần quan trọng nhất của biểu mẫu

Thuộc tính name: dùng để tham chiếu tới dữ liệu đã nhập khi tính toán hoặc gửi tới máy chủ.
Thuộc tính type: xác định loại dữ liệu mà input chứa.
Lưu ý: input chỉ dùng để nhập dữ liệu; muốn có nhãn mô tả thì phải tạo kèm label.

Bảng 12.1 – Một số loại type thông dụng

Type	Ví dụ	Ý nghĩa
`text`	`type="text"`	Trường nhập văn bản
`password`	`type="password"`	Trường nhập mật khẩu, văn bản bị che
`radio`	`type="radio" value="Nam"`	Chọn 1 giá trị duy nhất trong nhóm cùng `name`
`checkbox`	`type="checkbox" value="Toán"`	Chọn có hoặc không (chọn nhiều)
`button`	`type="button" value="Nút"`	Một nút bấm, cần thuộc tính `value`
`file`	`type="file"`	Nút chọn tệp và tải lên máy chủ
`submit`	`type="submit" value="Gửi thông tin"`	Nút gửi thông tin tới `action` của form

Lưu ý: mỗi ô radio và checkbox cần thêm value để ghi nhận giá trị.

Các phần tử khác

select: tạo danh sách thả xuống, chứa nhiều option. Mỗi option là một lựa chọn.
textarea: vùng nhập văn bản nhiều dòng, dùng rows (số dòng) và cols (số cột).
fieldset: nhóm các phần tử liên quan bằng khung chữ nhật; dùng legend để đặt tên nhóm.

Câu hỏi 1: Điểm khác biệt giữa radio, checkbox và select

Đề: Điểm khác biệt giữa radio, checkbox và select là gì?

Trả lời:

Phần tử	Cách chọn	Hiển thị
`radio`	Chỉ chọn được 1 giá trị trong nhóm các ô cùng `name`	Các nút tròn hiển thị sẵn tất cả lựa chọn
`checkbox`	Có thể chọn nhiều giá trị cùng lúc (mỗi ô độc lập, chọn có/không)	Các ô vuông hiển thị sẵn tất cả lựa chọn
`select`	Chọn 1 giá trị (mặc định) trong danh sách	Danh sách thả xuống, gọn, chỉ hiện lựa chọn đang chọn

Điểm cốt lõi:

radio và select đều cho chọn 1 giá trị, nhưng radio bày tất cả lựa chọn ra ngoài còn select ẩn trong danh sách thả xuống (tiết kiệm chỗ khi nhiều lựa chọn).
checkbox khác hẳn ở chỗ cho phép chọn nhiều giá trị cùng lúc.

Câu hỏi 2: Viết câu lệnh thêm nút "Quên mật khẩu"

Đề: Hãy viết câu lệnh để thêm một nút có tên "Quên mật khẩu" vào biểu mẫu.

Lời giải:

Dựa vào Bảng 12.1, để tạo một nút bấm ta dùng input với type="button", tên hiển thị trên nút đặt ở thuộc tính value:

Giải thích: type="button" tạo ra nút bấm, còn value="Quên mật khẩu" chính là dòng chữ hiển thị trên nút. Đây là cách đúng theo mẫu trong bảng.

Phần thực hành: Nhiệm vụ 1 – Tạo biểu mẫu

Đề: Tạo biểu mẫu nhập thông tin các món ăn như Hình 12.2 (Tên món ăn, Đơn giá, Số lượng).

Hướng dẫn theo các bước trong sách:

Bước 1: Tạo tiêu đề bằng thẻ heading Thông tin món ăn.
Bước 2: Tạo biểu mẫu bằng cặp thẻ .
Bước 3: Trong
, tạo ba cặp label và input, mỗi input dùng id để liên kết với label qua thuộc tính for. Thêm trước mỗi label để xuống dòng.

Mã hoàn chỉnh gợi ý:

Thông tin món ăn

  Tên món ăn
  
  

  Đơn giá
  
  

  Số lượng

Giải thích: thuộc tính id của input phải trùng với giá trị for của label tương ứng (ví dụ for="monan" ↔ id="monan") để khi bấm vào nhãn thì con trỏ tự nhảy vào ô nhập. Thẻ đặt trước label giúp mỗi cặp nhãn–ô nhập nằm trên một dòng riêng, đúng như bố cục Hình 12.2.

Chế độ đọc sách →