Giáo án tích hợp AI Tin học 12 KHMT Bài 12: Tạo biểu mẫu

BÀI 12: TẠO BIỂU MẪU

I. NỘI DUNG CHI TIẾT BÀI HỌC

1. Biểu mẫu web (Form)

• Biểu mẫu web (Form) là công cụ thu thập dữ liệu người dùng trên trang web. 

• Cấu trúc cơ bản: <form> các phần tử </form>. 

• Phần tử input: Dùng để nhập dữ liệu, xác định bởi thẻ đơn <input id="định_danh" type="loại_dữ_liệu" name="tên">.

• Phần tử label: Định nghĩa nhãn cho phần tử input, giúp tăng tính tương tác: <label for="định_danh_input">Tên nhãn</label>. 

1. Các phần tử biểu mẫu thường dùng

• Input types: text (văn bản), password (mật khẩu), radio (chọn 1), checkbox (chọn nhiều), submit (nút gửi).

• Select: Tạo danh sách chọn thả xuống, chứa các thẻ <option> bên trong.

• Textarea: Vùng nhập văn bản có nhiều dòng.

• Fieldset & Legend: Dùng để nhóm các phần tử có liên quan và đặt tiêu đề cho nhóm.

II. KIẾN THỨC TRỌNG TÂM

1. Biểu mẫu là thành phần tương tác chính để thu thập thông tin từ người dùng. 

2. Thuộc tính type của thẻ <input> quyết định cách người dùng nhập liệu (văn bản, mật khẩu, chọn lựa). 

3. Thẻ <label> gắn kết với <input> thông qua thuộc tính for và id giúp cải thiện trải nghiệm người dùng. 

4. Radio sử dụng khi cần chọn duy nhất 1 giá trị, checkbox dùng khi cần chọn nhiều giá trị.

5. Phân tử <select> phối hợp với <option> là lựa chọn tối ưu cho danh sách chọn thả xuống.

6. Sử dụng <fieldset> giúp tổ chức giao diện biểu mẫu gọn gàng, logic hơn.

III. BỐ CỤC SLIDE PPTX

• Slide 1: Tiêu đề

  • Tiêu đề: BÀI 12: TẠO BIỂU MẪU

  • Nội dung: Họ và tên, Năm học 2026 - 2027.

• Slide 2: Tổng quan về Form

  • Tiêu đề: Biểu mẫu web (Form) là gì?

  • Nội dung: Định nghĩa, vai trò thu thập dữ liệu và cấu trúc thẻ <form>.

• Slide 3: Nhãn và Nhập liệu

  • Tiêu đề: Phần tử Input và Label

  • Nội dung: Cách tạo nhãn <label> và vùng nhập liệu <input> cùng thuộc tính type.

• Slide 4: Các loại Input phổ biến

  • Tiêu đề: Các loại dữ liệu thông dụng

  • Nội dung: Bảng tóm tắt các kiểu text, password, radio, checkbox, submit.

• Slide 5: Lựa chọn và Văn bản dài

  • Tiêu đề: Danh sách chọn và Textarea

  • Nội dung: Cách dùng thẻ <select>, <option> và <textarea>.

• Slide 6: Tổ chức biểu mẫu

  • Tiêu đề: Nhóm phần tử trong Form

  • Nội dung: Sử dụng thẻ <fieldset> và <legend> để phân nhóm logic.

• Slide 7: Tổng kết

  • Tiêu đề: Tóm tắt bài học

  • Nội dung: Tầm quan trọng của biểu mẫu trong giao tiếp giữa người dùng và máy chủ.