Giáo án điện tử Khoa học máy tính 12 kết nối Bài 12: Tạo biểu mẫu

Bài giảng điện tử Tin học 12 - Định hướng Khoa học máy tính kết nối tri thức. Giáo án powerpoint Bài 12: Tạo biểu mẫu. Giáo án thiết kế theo phong cách hiện đại, nội dung đầy đủ, đẹp mắt, tạo hứng thú học tập cho học sinh. Thầy, cô giáo có thể tham khảo.

Xem: => Giáo án Tin học 12 - Định hướng Khoa học máy tính kết nối tri thức

Click vào ảnh dưới đây để xem 1 phần giáo án rõ nét

Giáo án điện tử Khoa học máy tính 12 kết nối Bài 12: Tạo biểu mẫu
Giáo án điện tử Khoa học máy tính 12 kết nối Bài 12: Tạo biểu mẫu
Giáo án điện tử Khoa học máy tính 12 kết nối Bài 12: Tạo biểu mẫu
Giáo án điện tử Khoa học máy tính 12 kết nối Bài 12: Tạo biểu mẫu
Giáo án điện tử Khoa học máy tính 12 kết nối Bài 12: Tạo biểu mẫu
Giáo án điện tử Khoa học máy tính 12 kết nối Bài 12: Tạo biểu mẫu
Giáo án điện tử Khoa học máy tính 12 kết nối Bài 12: Tạo biểu mẫu
Giáo án điện tử Khoa học máy tính 12 kết nối Bài 12: Tạo biểu mẫu
Giáo án điện tử Khoa học máy tính 12 kết nối Bài 12: Tạo biểu mẫu
Giáo án điện tử Khoa học máy tính 12 kết nối Bài 12: Tạo biểu mẫu
Giáo án điện tử Khoa học máy tính 12 kết nối Bài 12: Tạo biểu mẫu
Giáo án điện tử Khoa học máy tính 12 kết nối Bài 12: Tạo biểu mẫu

Các tài liệu bổ trợ khác

Xem toàn bộ: Giáo án điện tử khoa học máy tính 12 kết nối tri thức

CHÀO ĐÓN CẢ LỚP

ĐẾN BÀI HỌC MỚI!

 

KHỞI ĐỘNG

Lấy ý kiến phản hồi

Tạo tài khoản Facebook

Các trang web thường thu thập dữ liệu từ người dùng như thế nào?

 

KHỞI ĐỘNG

Các trang web thường sử dụng biểu mẫu để thu thập dữ liệu từ người dùng.

 

BÀI 12:

TẠO BIỂU MẪU

 

NỘI DUNG BÀI HỌC

1. Biểu mẫu web

2. Thực hành tạo biểu mẫu

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 đó.

Các bước đăng kí tài khoản trên một trang web:

  • Nhập tên, địa chỉ email, số điện thoại,…
  • 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.

 

  • Biểu mẫu web là gì?
  • Biểu mẫu được dùng để làm gì?
  • Biểu mẫu web đầy đủ bao gồm mấy thành phần?
  • HTML cung cấp thẻ nào để tạo biểu mẫu?
  • Biểu mẫu thường dùng những phần tử HTML nào? Mỗi phần tử có chức năng và cấu trúc như thế nào?

THẢO LUẬN NHÓM

 

1. BIỂU MẪU WEB

Biểu mẫu web hay phần tử form của HTML là một công cụ dùng để thu thập dữ liệu.

Khái niệm

 

Sử dụng biểu mẫu:

Đăng kí tài khoản.

Mua sắm.

Tìm kiếm thông tin.

 

Thành phần

Biểu mẫu hiển thị trên web: được tạo thành bởi các đoạn mã HTML. Được sử dụng để người dùng nhập và gửi thông tin.

Các ứng dụng hoặc script xử lí dữ liệu: thường nằm trên máy chủ, không thuộc phạm vi ngôn ngữ HTML.

Cấu trúc chung của biểu mẫu web được tạo bởi thẻ <form>:

 

Các phần tử của biểu mẫu thường dùng: input, label, select, textarea; ngoài ra còn có fieldset, legend, datalist,...

  • label: định nghĩa nhãn, có cấu trúc như sau:

 

  • input: xác định vùng nhập dữ liệu. Phần tử input xác định bởi thẻ đơn, có cấu trúc như sau:

Thuộc tính name được sử dụng để tham chiếu tới dữ liệu đã nhập khi thực hiện tính toán hay gửi tới máy chủ.

Thuộc tính type xác định loại dữ liệu mà phần tử input chứa.

Lưu ý: Phần tử input chỉ dùng để nhập dữ liệu, muốn có thông tin về nội dung nhập phải tạo kèm label.

 

TypeVí dụÝ nghĩaMinh họa
texttype=“text”Tạo ra trường nhập văn bản. 
passwordtype=“password”Tạo ra trường nhập mật khẩu, dùng để nhập văn bản nhưng bị che thông tin. 
radio

type=“radio”

value=“Nam”

Tạo ra ô chọn 1 giá trị duy nhất trong các phần tử checkbox cùng tên (name). 

Bảng 12.1. Một số loại dữ liệu (type) thông dụng

 

Bảng 12.1. Một số loại dữ liệu (type) thông dụng

TypeVí dụÝ nghĩaMinh họa
checkbox

type=“checkbox”

value=“Toán”

Tạo ra ô lựa chọn giá trị có hoặc không.

Mỗi ô radio và ô checkbox cần thêm thuộc tính value để ghi nhận giá trị.

 
button

type=“button”

value=“Nút”

Tạo ra một nút bấm.

Cần thêm thuộc tính value=“tên hiện trên nút”.

 

 

TypeVí dụÝ nghĩaMinh họa
filetype=“file”Tạo ra nút để chọn một tệp tin và tải lên máy chủ. 
submit

type=“submit”

value=“Gửi thông tin”

Tạo ra nút để gửi thông tin đến máy chủ, trình duyệt sẽ gọi tới đường dẫn chỉ định tại thuộc tính action của thẻ <form>. Cần thêm thuộc tính value như button. 

 

TypeÝ nghĩa
dateTrường nhập dữ liệu dạng ngày.
emailTrường nhập dữ liệu dạng email.
numberTrường nhập dữ liệu dạng số.
telTrường nhập dữ liệu dạng số điện thoại.
urlTrường nhập dữ liệu dạng đường dẫn.

Ngoài ra còn có một số kiểu dữ liệu (type) khác như:

 

  • select:
  • Cho phép người dùng chọn một trong các lựa chọn trong danh sách thả xuống.
  • Chứa nhiều thẻ option, mỗi cặp định nghĩa một lựa chọn trong danh sách.
  • Cấu trúc:

 

  • textarea:
  • Xác định một vùng nhập văn bản có nhiều dòng và cột.
  • Cấu trúc:

Lưu ý: Phần Nội_dung được hiển thị trong vùng nhập, nếu không để Nội_dung trong thẻ, vùng nhập văn bản là vùng trắng.

 

  • fieldset:
  • Nhóm các phần tử có liên quan trong biểu mẫu bằng cách vẽ một hình chữ nhật bao quanh các phần tử đặt trong cặp thẻ <fieldset>...</fieldset> .
  • Có thể thêm tên cho nhóm phần tử bằng cách đặt phần tử legend trong phần tử fieldset tương ứng.

 

Ví dụ:

Đoạn mã HTML

 

Kết quả hiển thị trên trình duyệt

 

Nguyên lí hoạt động và cách thức làm việc của biểu mẫu trên web:

Cách thức làm việc chung cho các biểu mẫu web nói chung:

 

Câu hỏi củng cố SGK tr.69

Câu 1. Điểm khác biệt giữa radio, checkbox và select là gì?

Câu 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.

 

Câu 1:

  • Radio và checkbox: 2 kiểu trong phần tử input / select: phần tử select.
  • Radio và select chỉ chọn một giá trị trong các giá trị sẵn có nhưng khác nhau về cách biểu diễn (không gian sử dụng trong biểu mẫu).
  • Số lựa chọn không quá 7: thường dùng radio.
  • Số lựa chọn lớn hơn 7: thường dùng select.
  • Select chỉ tập trung vào lựa chọn được chọn, radio phân bố sự tập trung đều nhau.
  • Checkbox dùng để chọn giá trị dưới dạng có/không.

---------------------------------------

----------------------Còn tiếp---------------------

Trên chỉ là 1 phần của giáo án. Giáo án khi tải về có đầy đủ nội dung của bài. Đủ nội dung của học kì I + học kì II

Hệ thống có đầy đủ các tài liệu:

  • Giáo án word (350k)
  • Giáo án Powerpoint (400k)
  • Trắc nghiệm theo cấu trúc mới (200k)
  • Đề thi cấu trúc mới: ma trận, đáp án, thang điểm..(200k)
  • Phiếu trắc nghiệm câu trả lời ngắn (200k)
  • Trắc nghiệm đúng sai (200k)
  • Lý thuyết bài học và kiến thức trọng tâm (200k)
  • File word giải bài tập sgk (150k)
  • Phiếu bài tập để học sinh luyện kiến thức (200k)
  • .....

Nâng cấp lên VIP đê tải tất cả ở tài liệu trên

  • Phí nâng cấp VIP: 900k

=> Chỉ gửi 500k. Tải về dùng thực tế. Nếu hài lòng, 1 ngày sau mới gửi phí còn lại

Cách tải hoặc nâng cấp:

  • Bước 1: Chuyển phí vào STK: 1214136868686 - cty Fidutech - MB(QR)
  • Bước 2: Nhắn tin tới Zalo Fidutech - nhấn vào đây để thông báo và nhận tài liệu

Xem toàn bộ: Giáo án điện tử khoa học máy tính 12 kết nối tri thức

ĐẦY ĐỦ GIÁO ÁN CÁC BỘ SÁCH KHÁC

GIÁO ÁN WORD LỚP 12 KẾT NỐI TRI THỨC

Giáo án toán 12 kết nối tri thức
Giáo án đại số 12 kết nối tri thức
Giáo án hình học 12 kết nối tri thức

Giáo án vật lí 12 kết nối tri thức
Giáo án hoá học 12 kết nối tri thức
Giáo án sinh học 12 kết nối tri thức

Giáo án ngữ văn 12 kết nối tri thức
Giáo án lịch sử 12 kết nối tri thức
Giáo án địa lí 12 kết nối tri thức
Giáo án kinh tế pháp luật 12 kết nối tri thức

Giáo án Công nghệ Điện - điện tử 12 kết nối tri thức
Giáo án Công nghệ 12 Lâm nghiệp - Thuỷ sản kết nối tri thức
Giáo án Tin học 12 - Định hướng Khoa học máy tính kết nối tri thức
Giáo án Tin học 12 - Định hướng Tin học ứng dụng kết nối tri thức

Giáo án thể dục 12 bóng rổ kết nối tri thức
Giáo án thể dục 12 cầu lông kết nối tri thức
Giáo án thể dục 12 bóng chuyền kết nối tri thức

Giáo án mĩ thuật 12 kết nối tri thức
Giáo án âm nhạc 12 kết nối tri thức
Giáo án hoạt động trải nghiệm hướng nghiệp 12 kết nối tri thức

GIÁO ÁN POWERPOINT LỚP 12 KẾT NỐI TRI THỨC

Giáo án Powerpoint Toán 12 kết nối tri thức
Giáo án Powerpoint hình học 12 kết nối tri thức
Giáo án Powerpoint đại số 12 kết nối tri thức

Giáo án powerpoint vật lí 12 kết nối tri thức
Giáo án powerpoint ngữ văn 12 kết nối tri thức
Giáo án powerpoint địa lí 12 kết nối tri thức

Giáo án powerpoint lịch sử 12 kết nối tri thức
Giáo án powerpoint địa lí 12 kết nối tri thức
Giáo án Powerpoint Kinh tế pháp luật 12 kết nối tri thức

Giáo án Powerpoint Mĩ thuật 12 kết nối tri thức
Giáo án Powerpoint Tin học 12 - Định hướng Tin học ứng dụng kết nối tri thức
Giáo án Powerpoint Tin học 12 - Định hướng Khoa học máy tính kết nối tri thức

Giáo án powerpoint Công nghệ 12 Điện - điện tử kết nối tri thức
Giáo án powerpoint Công nghệ 12 Lâm nghiệp - Thuỷ sản kết nối tri thức
Giáo án powerpoint hoạt động trải nghiệm hướng nghiệp 12 kết nối tri thức

GIÁO ÁN CHUYÊN ĐỀ LỚP 12 KẾT NỐI TRI THỨC

Giáo án chuyên đề toán 12 kết nối tri thức
Giáo án chuyên đề vật lí 12 kết nối tri thức
Giáo án chuyên đề hoá học 12 kết nối tri thức
Giáo án chuyên đề sinh học 12 kết nối tri thức

Giáo án chuyên đề ngữ văn 12 kết nối tri thức
Giáo án chuyên đề lịch sử 12 kết nối tri thức
Giáo án chuyên đề địa lí 12 kết nối tri thứ
Giáo án chuyên đề kinh tế pháp luật 12 kết nối tri thức

Giáo án chuyên đề Công nghệ 12 Công nghệ điện - điện tử kết nối tri thức
Giáo án chuyên đề Công nghệ 12 Lâm nghiệp - Thuỷ sản kết nối tri thức
Giáo án chuyên đề Tin học 12 - Định hướng Khoa học máy tính kết nối tri thức
Giáo án chuyên đề Tin học 12 - Định hướng Tin học ứng dụng kết nối tri thức

GIÁO ÁN POWERPOINT CHUYÊN ĐỀ LỚP 12 KẾT NỐI TRI THỨC

 

GIÁO ÁN DẠY THÊM LỚP 12 KẾT NỐI TRI THỨC

Giáo án dạy thêm ngữ văn 12 kết nối tri thức
Giáo án powerpoint dạy thêm ngữ văn 12 kết nối tri thức
Giáo án dạy thêm toán 12 kết nối tri thức
Giáo án powerpoint dạy thêm toán 12 kết nối tri thức

Tài liệu giảng dạy

Xem thêm các bài khác

GIÁO ÁN POWERPOINT CHỦ ĐỀ 1. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

Giáo án điện tử Khoa học máy tính 12 kết nối Bài 1: Làm quen với Trí tuệ nhân tạo
Giáo án điện tử Khoa học máy tính 12 kết nối Bài 2: Trí tuệ nhân tạo trong khoa học và đời sống

GIÁO ÁN POWERPOINT CHỦ ĐỀ 2. MẠNG MÁY TÍNH VÀ INTERNET

Giáo án điện tử Khoa học máy tính 12 kết nối Bài 3: Một số thiết bị mạng thông dụng
Giáo án điện tử Khoa học máy tính 12 kết nối Bài 3: Một số thiết bị mạng thông dụng (bổ sung)
Giáo án điện tử Khoa học máy tính 12 kết nối Bài 4: Giao thức mạng
Giáo án điện tử Khoa học máy tính 12 kết nối Bài 5: Thực hành chia sẻ tài nguyên trên mạng

GIÁO ÁN POWERPOINT CHỦ ĐỀ 3. ĐẠO ĐỨC, PHÁP LUẬT VÀ VĂN HOÁ TRONG MÔI TRƯỜNG SỐ

Giáo án điện tử Khoa học máy tính 12 kết nối Bài 6: Giao tiếp và ứng xử trong không gian mạng

GIÁO ÁN POWERPOINT CHỦ ĐỀ 4. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH

Giáo án điện tử Khoa học máy tính 12 kết nối Bài 7: HTML và cấu trúc trang web
Giáo án điện tử Khoa học máy tính 12 kết nối Bài 8: Định dạng văn bản
Giáo án điện tử Khoa học máy tính 12 kết nối Bài 8: Định dạng văn bản (P2)
Giáo án điện tử Khoa học máy tính 12 kết nối Bài 9: Tạo danh sách, bảng
Giáo án điện tử Khoa học máy tính 12 kết nối Bài 10: Tạo liên kết
Giáo án điện tử Khoa học máy tính 12 kết nối Bài 11: Chèn tập tin đa phương tiện và khung nội tuyến vào trang web
Giáo án điện tử Khoa học máy tính 12 kết nối Bài 12: Tạo biểu mẫu
 
Giáo án điện tử Khoa học máy tính 12 kết nối Bài 13: Khái niệm, vai trò của CSS
Giáo án điện tử Khoa học máy tính 12 kết nối Bài 14: Định dạng văn bản bằng CSS
Giáo án điện tử Khoa học máy tính 12 kết nối Bài 14: Định dạng văn bản bằng CSS (P2)
Giáo án điện tử Khoa học máy tính 12 kết nối Bài 15: Tạo màu cho chữ và nền
Giáo án điện tử Khoa học máy tính 12 kết nối Bài 16: Định dạng khung
Giáo án điện tử Khoa học máy tính 12 kết nối Bài 17: Các mức ưu tiên của bộ chọn
Giáo án điện tử Khoa học máy tính 12 kết nối Bài 18: Thực hành tổng hợp thiết kế trang web

GIÁO ÁN POWERPOINT CHỦ ĐỀ 5. HƯỚNG NGHIỆP VỚI TIN HỌC

Giáo án điện tử Khoa học máy tính 12 kết nối Bài 19: Dịch vụ sửa chữa và bảo trì máy tính
Giáo án điện tử Khoa học máy tính 12 kết nối Bài 20: Nhóm nghề quản trị trong ngành Công nghệ thông tin
Giáo án điện tử Khoa học máy tính 12 kết nối Bài 21: Hội thảo hướng nghiệp

GIÁO ÁN POWERPOINT CHỦ ĐỀ 6. MẠNG MÁY TÍNH VÀ INTERNET

Giáo án điện tử Khoa học máy tính 12 kết nối Bài 22: Tìm hiểu thiết bị mạng
Giáo án điện tử Khoa học máy tính 12 kết nối Bài 23: Đường truyền mạng và ứng dụng
Giáo án điện tử Khoa học máy tính 12 kết nối Bài 24: Sơ bộ về thiết kế mạng

GIÁO ÁN POWERPOINT CHỦ ĐỀ 7. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH

Giáo án điện tử Khoa học máy tính 12 kết nối Bài 25: Làm quen với Học máy
Giáo án điện tử Khoa học máy tính 12 kết nối Bài 26: Làm quen với Khoa học dữ liệu
Giáo án điện tử Khoa học máy tính 12 kết nối Bài 27: Máy tính và Khoa học dữ liệu
Giáo án điện tử Khoa học máy tính 12 kết nối Bài 28: Thực hành trải nghiệm trích rút thông tin và tri thức
Giáo án điện tử Khoa học máy tính 12 kết nối Bài 29: Mô phỏng trong giải quyết vấn đề
Giáo án điện tử Khoa học máy tính 12 kết nối Bài 30: Ứng dụng mô phỏng trong giáo dục

Chat hỗ trợ
Chat ngay