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

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

Nguon: Tin Hoc 12 KHMT (trang 72 – 73)

🔍 Kiến thức cần nhớ

Biểu mẫu (form) trong HTML dùng để thu thập dữ liệu từ người dùng.

Phần tử
bao toàn bộ biểu mẫu.
Phần tử tạo ô nhập với thuộc tính type xác định loại dữ liệu:
type="text": nhập văn bản tự do.
type="number": nhập số.
type="date": nhập ngày tháng.
type="radio": chọn một trong nhiều lựa chọn (cùng name).
type="checkbox": chọn nhiều (hoặc có/không) độc lập.
type="submit": nút gửi dữ liệu.





      
      CCCD:
      



      
      Ngày sinh:
      



      
      Giới tính:
      Nam
      Nữ



      
      Môn thi:

      Toán
      Văn
      Ngoại ngữ



      
      Tổ hợp:

Mỗi trường được ánh xạ đúng kiểu dữ liệu: họ tên → text, CCCD → number, ngày sinh → date, giới tính → radio (cùng name="gioitinh" để chỉ chọn được một), môn thi → checkbox (có thể chọn nhiều), tổ hợp → select, cuối cùng là nút submit. Kết quả hiển thị đúng như Hình 12.3.

⚠️ Lưu ý thi: Các nút radio cùng một nhóm bắt buộc phải có cùng giá trị name thì mới hoạt động "chọn một". Nếu đặt khác name, học sinh sẽ chọn được nhiều nút cùng lúc – đây là lỗi sai rất hay gặp.

LUYỆN TẬP

Đề bài: Lần lượt tạo các loại phần tử form và các phần tử input với những loại dữ liệu khác nhau và liệt kê ra ba ví dụ có thể sử dụng của từng loại.

Cách 1 — Lập bảng phân loại theo `type` kèm ví dụ minh họa

`type`	Mã ví dụ	Ba trường hợp sử dụng
`text`		Họ tên, địa chỉ, tên đăng nhập
`password`		Mật khẩu, mã PIN, mã bảo mật
`number`		Số CCCD, tuổi, số lượng sản phẩm
`date`		Ngày sinh, ngày hẹn, hạn nộp
`email`		Email đăng kí, email liên hệ, email khôi phục
`radio`		Giới tính, khối thi, loại tài khoản
`checkbox`		Sở thích, môn học chọn, đồng ý điều khoản
`submit`		Gửi đăng kí, đăng nhập, tìm kiếm

Trang web minh họa gộp các loại lại:


  Tên đăng nhập: 

  Mật khẩu:      

  Tuổi:          

  Ngày sinh:     

  Email:         

  Giới tính:     Nam
                 Nữ

  Sở thích:      Đọc sách
                 Thể thao

💡 Mẹo nhớ: Cứ hỏi "dữ liệu là gì?" để chọn type: là chữ → text, là con số → number, là ngày → date, chọn một → radio, chọn nhiều → checkbox.

VẬN DỤNG – Câu 1

Đề bài: Tạo một biểu mẫu đăng kí thành viên câu lạc bộ.

Cách 1 — Vận dụng cấu trúc form đã học




  
  Đăng kí thành viên CLB


  
    
      Đăng kí thành viên Câu lạc bộ

      Họ và tên:
      



      Email:
      



      Số điện thoại:
      



      Ngày sinh:
      



      Giới tính:
      Nam
      Nữ



      Câu lạc bộ muốn tham gia:
      



      Lí do tham gia:

Biểu mẫu lấy đủ thông tin cá nhân (họ tên, email, SĐT, ngày sinh, giới tính), nguyện vọng CLB qua </code> và nút <code>submit</code> để gửi.</p> <hr /> <h4>VẬN DỤNG – Câu 2</h4> <p><strong>Đề bài:</strong> Sửa lại mã nguồn của trang web đã viết trong Nhiệm vụ 2, Bài 11 để thêm một liên kết cho cụm từ "Đăng kí". Khi nháy chuột vào liên kết, trang web đã viết ở Câu 1 sẽ được hiển thị trong <code>iframe</code>.</p> <h5>Cách 1 — Dùng thuộc tính <code>target</code> trỏ tới tên của <code>iframe</code></h5> <p>Ý tưởng: đặt một phần tử <code><iframe></code> có thuộc tính <code>name</code>, rồi tạo liên kết <code><a></code> với <code>target</code> trùng tên đó. Khi nháy vào liên kết, trang đích sẽ mở ngay bên trong khung iframe thay vì mở cửa sổ mới.</p> <p>Giả sử trang Câu 1 được lưu là <code>dangki.html</code>, sửa trang của Bài 11 như sau:</p> <pre><code><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Trang câu lạc bộ</title> </head> <body>  <a href="dangki.html" target="khung">Đăng kí</a>  <iframe name="khung" width="600" height="400"></iframe> </body> </html></code></pre> <p>Cơ chế: giá trị <code>target="khung"</code> của thẻ <code><a></code> khớp với <code>name="khung"</code> của <code><iframe></code>, nên nội dung <code>dangki.html</code> (biểu mẫu Câu 1) sẽ được nạp vào đúng khung này khi người dùng nháy vào chữ "Đăng kí".</p> <blockquote>⚠️ <strong>Lưu ý thi:</strong> Để liên kết mở <strong>trong iframe</strong>, <code>target</code> của <code><a></code> phải bằng đúng <code>name</code> của <code><iframe></code>. Nếu thiếu thuộc tính <code>name</code>, hoặc viết <code>target="_blank"</code>, trang sẽ mở ra cửa sổ/tab mới chứ không vào khung.</blockquote> <hr /> <h3>Bài 13: Khái niệm, vai trò của CSS</h3> <h4>Hoạt động 1 — Câu 1</h4> <p><strong>Đề bài:</strong> Hình 13.2 là mã nguồn của trang web trong Hình 13.1. Em có nhận xét gì về cách thiết lập định dạng của trang này?</p> <h5>Cách 1 — Phân tích phần <code><style></code></h5> <p>Trong vùng <code><head></code> xuất hiện cặp thẻ <code><style>...</style></code> (dòng 6–10) chứa các quy tắc định dạng:</p> <pre><code>h1 {color: red;} h1 {border: 2px solid blue;} p {text-indent: 15px;}</code></pre> <p>Nhận xét:</p> <ul><li>Định dạng được khai báo <strong>tập trung một nơi</strong> ở phần <code><style></code>, tách khỏi nội dung trong <code><body></code>.</li><li>Định dạng được gắn theo <strong>tên phần tử HTML</strong> (gọi là bộ chọn – selector): mọi <code>h1</code> đều có chữ màu đỏ và viền xanh dày 2px; mọi <code>p</code> đều thụt đầu dòng 15px.</li><li>Như vậy chỉ cần viết định dạng <strong>một lần</strong> là áp dụng cho <strong>tất cả</strong> các phần tử cùng loại. Đây chính là cách dùng CSS (Cascading Style Sheets) để định dạng trang web.</li></ul> <h4>Hoạt động 1 — Câu 2</h4> <p><strong>Đề bài:</strong> Em thấy gì từ đoạn mã nguồn trên?</p> <h5>Cách 1 — Rút ra đặc điểm chung của CSS</h5> <p>Từ đoạn mã, có thể thấy:</p> <ul><li>Phần định dạng (CSS) và phần nội dung (HTML) được <strong>viết tách biệt</strong>: nội dung nằm trong <code><body></code>, hình thức trình bày nằm trong <code><style></code>.</li><li>Mỗi quy tắc CSS có dạng: <strong>bộ chọn { thuộc tính: giá trị; }</strong>. Ví dụ <code>h1 {color: red;}</code> nghĩa là phần tử <code>h1</code> có màu chữ đỏ.</li><li>Có thể <strong>định dạng mẫu một lần</strong> rồi áp dụng cho nhiều phần tử cùng loại, giúp trang web thống nhất và dễ chỉnh sửa: muốn đổi giao diện chỉ cần sửa ở phần <code><style></code>, không phải sửa từng phần tử.</li></ul> <p>Đây là trả lời cho ba câu hỏi đầu bài: trang có các phần tử <code>h1</code>, <code>p</code>; điểm chung là chúng được định dạng theo loại phần tử; và <strong>hoàn toàn có thể</strong> định dạng mẫu một lần để dùng cho nhiều phần tử – đó là vai trò cốt lõi của CSS.</p> <blockquote>💡 <strong>Mẹo nhớ:</strong> "HTML là khung xương (nội dung), CSS là quần áo (hình thức)". Tách hai phần này giúp trang web gọn gàng và dễ bảo trì.</blockquote> <hr /> <blockquote>🎯 <strong>Ghi nhớ:</strong> - Chọn <code>type</code> của <code>input</code> đúng theo loại dữ liệu; radio cùng nhóm phải cùng <code>name</code>. - Dùng <code><fieldset></code> và <code><label></code> để biểu mẫu rõ ràng, dễ nhìn. - Liên kết mở trong <code>iframe</code> bằng cách cho <code>target</code> của <code><a></code> trùng <code>name</code> của <code><iframe></code>. - CSS giúp tách định dạng khỏi nội dung, định dạng một lần dùng cho nhiều phần tử qua cú pháp <strong>selector { thuộc tính: giá trị; }</strong>.</blockquote></div><a class="sol-cta" href="https://hockha.com/reader?id=lop12-tin-hoc-khmt&p=35"><svg class="ico-book" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg> Chế độ đọc sách →</a><nav class="sol-nav" aria-label="Trang trước/sau"><a href="/giai/lop12-tin-hoc-khmt/34">← Trang trước</a><a href="/giai/lop12-tin-hoc-khmt/36">Trang sau →</a></nav></article></main><footer class="site-footer"><div class="container"><p class="disclaimer"><a href="/legal" style="text-decoration: underline;">Điều khoản sử dụng</a></p></div></footer><button class="to-top" id="toTop" aria-label="Lên đầu trang">↑</button><nav class="mobile-nav" aria-label="Điều hướng di động"><div class="mobile-nav-inner"><a class="mobile-nav-item active" href="/" aria-label="Thư viện"><span class="mobile-nav-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M4 5.5A2.5 2.5 0 0 1 6.5 3H20v16H6.5A2.5 2.5 0 0 0 4 21.5v-16Z"></path><path d="M4 5.5A2.5 2.5 0 0 1 6.5 8H20"></path></svg></span><span class="mobile-nav-label">Thư viện</span></a><a class="mobile-nav-item" href="/review" aria-label="Ôn tập"><span class="mobile-nav-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M12 20h9"></path><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5Z"></path></svg></span><span class="mobile-nav-label">Ôn tập</span></a><a class="mobile-nav-item" href="/cong-thuc" aria-label="Công thức"><span class="mobile-nav-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M4 19h16"></path><path d="M7 16 13 4l6 12"></path><path d="M9 12h8"></path></svg></span><span class="mobile-nav-label">Công thức</span></a><a class="mobile-nav-item" href="/features" aria-label="Tính năng"><span class="mobile-nav-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M12 3l1.7 5.3L19 10l-5.3 1.7L12 17l-1.7-5.3L5 10l5.3-1.7L12 3Z"></path><path d="M19 15l.8 2.2L22 18l-2.2.8L19 21l-.8-2.2L16 18l2.2-.8L19 15Z"></path></svg></span><span class="mobile-nav-label">Tính năng</span></a></div></nav><script> // Nút lên đầu trang (function() { var btn = document.getElementById('toTop'); if (!btn) return; function onScroll() { btn.classList.toggle('show', window.scrollY > 360); } window.addEventListener('scroll', onScroll, { passive: true }); btn.addEventListener('click', function() { window.scrollTo({ top: 0, behavior: 'smooth' }); }); onScroll(); })(); </script></body></html>