Slide bài giảng Tin học ứng dụng 12 kết nối bài 12: Tạo biểu mẫu

Slide điện tử bài 12: Tạo biểu mẫu. Trình bày với các hiệu ứng hiện đại, hấp dẫn. Giúp học sinh hứng thú học bài. Học nhanh, nhớ lâu. Có tài liệu này, hiệu quả học tập của môn Tin học ứng dụng 12 Kết nối tri thức sẽ khác biệt

Bạn chưa đủ điều kiện để xem được slide bài này. => Xem slide bài mẫu

Tóm lược nội dung

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

KHỞI ĐỘNG

Để tham gia hội chợ ẩm thực ở trường, lớp em đã chọn một website để quảng cáo sản phẩm. Em hãy thảo luận và chọn loại phần tử HTML cần sử dụng để tạo đơn hàng trên website.

Trả lời rút gọn:

Cần sử dụng các phần tử HTML như <form>, <input>, và <button> để tạo đơn hàng trên website.

1. BIỂU MẪU WEB

Hoạt động 1: Tương tác bằng biểu mẫu web

Mô tả các bước mà em đã thực hiện khi đăng kí tài khoản trên một trang web nào đó.

Trả lời rút gọn:

- Nhập tên, địa chỉ email, số điện thoại, v.v.

- Nhập mật khẩu cho tài khoản, thông tin được che đi để bảo mật.

- Nhập lại mật khẩu.

- Xác thực thông tin tài khoản.

Câu hỏi 1: Điểm khác nhau giữa radio. Checkbox và select là gì?

Trả lời rút gọn:

Radio

checkbox

select

-các phần tử đầu vào (input) cho phép người dùng chọn giá trị từ danh sách tùy chọn

- chỉ cho phép chọn một giá trị duy nhất

-các phần tử đầu vào (input) cho phép người dùng chọn giá trị từ danh sách tùy chọn

- cho phép chọn nhiều giá trị

-tạo một danh sách thả xuống cho người dùng chọn giá trị

- cho phép chọn một giá trị duy nhất từ danh sách thả xuống

 

Câu hỏi 2: 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.

Trả lời rút gọn:

Ta viết được câu lệnh mã HTML là:

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

Kết quả trả về:

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

LUYỆN TẬP

Lần lượt tạo các loại phần tử forn 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.

Trả lời rút gọn:

- Tạo phần tử <form> ta được kết quả như sau:

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

- Tạo phần tử <input> với loại dữ liệu "text" ta có kết quả như sau:

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

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

- Phần tử <input> với loại dữ liệu "password":

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

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

- Phần tử <input> với loại dữ liệu "radio":

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

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

- Phần tử <input> với loại dữ liệu "checkbox":

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

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

- Phần tử <input> với loại dữ liệu "submit":

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

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

- Phần tử <input> với loại dữ liệu "file":

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

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

VẬN DỤNG

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

Trả lời rút gọn:

Mẫu đăng kí thành viên câu lạc bộ bằng mã HTML như sau:

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

Kết quả:

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

Câu 2: 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át chuột vào liên kết, trang web đã việt ở Câu 1 sẽ được hiển thị trong iframe.

Trả lời rút gọn:

Ta sử đoạn mã đề bài đã cho, có kết quả như sau:

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

Kết quả hiển thị:

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