[SGK Tin học Lớp 12 Chân trời sáng tạo] Bài F5. Tạo biểu mẫu trong trang web trang 95, 96, 97 SGK Tin học 12 Chân trời sáng tạo

Hướng dẫn học bài: Bài F5. Tạo biểu mẫu trong trang web trang 95, 96, 97 SGK Tin học 12 Chân trời sáng tạo - Môn Tin học Lớp 12 Lớp 12. Đây là sách giáo khoa nằm trong bộ sách 'SGK Tin học Lớp 12 Chân trời sáng tạo Lớp 12' được biên soạn theo chương trình đổi mới của Bộ giáo dục. Hi vọng, với cách hướng dẫn cụ thể và giải chi tiết các bé sẽ nắm bài học tốt hơn.

ch tr 94 kđ

khi truy xuất trang web, người dùng không chỉ xem nội dung mà còn muốn tương tác với trang web, chẳng hạn nhập vào nội dung mới. em hãy nêu một số tình huống mà em thường tương tác tới trang web và mô tả cụ thể các thao tác này.

phương pháp giải:

áp dụng kiến thức thực tế để trả lời câu hỏi.

các trường hợp em đã gặp.


lời giải chi tiết:

dưới đây là một số tình huống mà em thường tương tác với trang web cùng với mô tả cụ thể các thao tác:

 đăng ký tài khoản

mô tả:

  • khi truy cập vào một trang web mới, em thường cần đăng ký tài khoản để sử dụng dịch vụ.

thao tác:

  • nhấp vào nút "đăng ký".

  • điền thông tin cá nhân như họ tên, địa chỉ email, mật khẩu.

  • nhấn nút "gửi" để hoàn tất đăng ký.

gửi phản hồi hoặc ý kiến

mô tả:

  • em muốn gửi phản hồi về sản phẩm hoặc dịch vụ mà mình đã sử dụng.

thao tác:

  • truy cập vào trang "liên hệ" hoặc "phản hồi".

  • điền vào biểu mẫu với họ tên, địa chỉ email và nội dung phản hồi.

  • nhấn nút "gửi".

tìm kiếm thông tin

mô tả:

  • khi cần tìm một thông tin cụ thể trên trang web.

thao tác:

  • sử dụng thanh tìm kiếm, nhập từ khóa cần tìm.

  • nhấn "enter" hoặc nút tìm kiếm để xem kết quả.

ch tr 94 kp

em hãy kể tên một số biểu mẫu phổ biến trên các trang web.

phương pháp giải:

các tình huống em đã gặp biểu mẫu trên các trang web.

liệt kê các loại hay gặp nhất.


lời giải chi tiết:

một số biểu mẫu phổ biến trên các trang web như: nhập dữ liệu văn bản, số, email, mật khẩu, chọn phương thức thanh toán, chọn phương án, nháy chuột vào nút nhấn…


em hãy kể tên một số biểu mẫu phổ biến trên các trang web. (ảnh 1)

ch tr 97 kp

em hãy thêm vào biểu mẫu trong các ví dụ trên những thành phần sau:

a. hộp văn bản để người dùng cập nhập địa chỉ emai.

b. hộp kiểm để người dùng chọn thêm một câu lạc bộ

c. nhấn nút để xoá dữ liệu hiện có trên biểu mẫu.


phương pháp giải:

mỗi thành phần ứng với 1 đặc điểm khác nhau.

a) hộp văn bản

b) hộp kiểm

c) nút xóa.


lời giải chi tiết:

a. hộp văn bản để người dùng cập nhập địa chỉ emai.

code như sau:

 

 

 

 

kỉ yếu lớp 12a

 

 

    

biểu mẫu góp ý

    

    

    

    

    

    

    

 

kết quả:

em hãy thêm vào biểu mẫu trong các ví dụ trên những thành phần sau: a. hộp văn bản để người dùng cập nhập địa chỉ emai. (ảnh 1)

b. hộp kiểm để người dùng chọn thêm một câu lạc bộ

code như sau:

 

 

 

 

kỉ yếu lớp 12a

 

 

chọn câu lạc bộ bạn đang tham gia:




    

 

c. nhấn nút để xoá dữ liệu hiện có trên biểu mẫu.

code như sau:

 

 

 

 

kỉ yếu lớp 12a

 

 

nhập ý kiến đóng góp của bạn:


    

 

kết quả:


em hãy thêm vào biểu mẫu trong các ví dụ trên những thành phần sau: a. hộp văn bản để người dùng cập nhập địa chỉ emai. (ảnh 2)

ch tr 97 lt1

em hãy nêu khái niệm biểu mẫu web và một số ví dụ biểu mẫu thông dụng.

phương pháp giải:

biểu mẫu web là thành phần để người dùng nhập dữ liệu vào web.

lời giải chi tiết:

biểu mẫu web là thành phần để người dùng nhập dữ liệu vào web. người dùng có thể tương tác với web thông qua biểu mẫu theo nhiều cách thức khác nhau như nhập dữ liệu văn bản, số, email, mật khẩu hoặc chọn nhiều phương án, nháy chuột vào nút nhấn.

ch tr 97 lt2

thảo luận với bạn và kể tên một số thành phần nhập liệu trên biểu mẫu web và thẻ html tương ứng để tạo các thành phần đó.


phương pháp giải:

cùng bạn thảo luận và thống nhất ý kiến về các thành phần nhập liệu và thẻ html tương ứng hay dùng.

lời giải chi tiết:

một số thành phần nhập liệu trên biểu mẫu web và thẻ html tương ứng để tạo các thành phần đó:

- biểu mẫu web được tạo từ thẻ

- thẻ

- thẻ có các thuộc tính: id, name, for, type…

- thẻ


ch tr 97 lt2

theo em, tên, giá trị và ý nghĩa của những thuộc tính trong thẻ là gì?

phương pháp giải:

thẻ được dùng thường xuyên với những giá trị, ý nghĩa khác nhau giúp hoàn thành yêu cầu đề ra.

lời giải chi tiết:

tên, giá trị và ý nghĩa của những thuộc tính trong thẻ <input) là:

- thuộc tính type được chỉ định là tex cho biết hộp văn bản này chỉ cho phép nhập một dòng.

- thuộc tính id dùng để chỉ định mã định danh của thẻ nhằm phần biệt với các thẻ khác. trong một biểu mẫu, thuộc tính thường được dùng để để xác định một phần tử cụ thể để thao tác với css hoặc java, thuộc tính name thường được dùng để xác định dữ liệu của phần tử khi gửi biểu mẫu lên máy chủ.

- thuộc tính name của hai thẻ được chỉ định cùng một giá trị (dinhhuong) để hai nút tròn cùng thuộc một nhóm phương án chung, khi người dùng chọn một phương án thì các phương án còn lại sẽ tự động huỷ chọn.


ch tr 98 vd1

bổ sung mã lệnh html vào tệp login.html để thêm các thành phần nhập liệu sau:

a) hộp kiểm có nhãn ghi nhớ cho lần đăng nhập sau

b) đường liên kết quên mật khẩu? để điều hướng đến trang web recovery.html.

c) thay đổi kiểu chữ và màu sắc các thành phần của biểu mẫu trong tệp login.html vừa tạo.


phương pháp giải:

sử dụng kết hợp các thẻ để thực hiện yêu cầu.

lời giải chi tiết:

a)

mã html:

https://tech12h.com/sites/default/files/ck5/2024-04/image_19790.png

hiển thị:

https://tech12h.com/sites/default/files/ck5/2024-04/image_19791.png

b)

mã html:

https://tech12h.com/sites/default/files/ck5/2024-04/image_19789.png

hiển thị:

https://tech12h.com/sites/default/files/ck5/2024-04/image_19792.png

c)

mã html:

hiển thị:


https://tech12h.com/sites/default/files/ck5/2024-04/image_19795.png


 

ch tr 98 vd2

 tạo biểu mẫu web để người dùng là học sinh làm bài kiểm tra với các yêu cầu sau:

a) trang web thongtin.html có biểu mẫu gồm 3 hộp văn bản nhập họ tên, lớp, số thứ tự trong lớp và nút nhấn để chuyển đến trang web cauhoi.html.

b) trang web cauhoi.html có biểu mẫu gồm 3 câu hỏi trắc nghiệm, mỗi câu có 4 phương án lựa chọn, một câu hỏi tự luận và nút nhấn để chọn tệp bài làm tự luận trên máy tính.

c) tìm hiểu cách tạo hộp danh sách chọn lớp để thay thế cho hộp văn bản nhập lớp.


phương pháp giải:

gợi ý:

sử dụng thẻ <input> và chỉ định giá trị number cho thuộc tính type để tạo hộp văn bản nhập số thứ tự. để chuyển đến trang web cauhoi.html, em chèn thêm thuộc tính action vào thẻ <form>: <form action="cauhoi.html">.

sử dụng thẻ <input> và chỉ định giá trị file cho thuộc tính type để tạo nút nhấn chọn tệp trên máy tính.

sử dụng thẻ <select> và <option> để tạo hộp danh sách chọn lớp.


lời giải chi tiết:

a)

mã html:

https://tech12h.com/sites/default/files/ck5/2024-04/image_19804.png

hiển thị:

https://tech12h.com/sites/default/files/ck5/2024-04/image_19805.png

b)

mã html:

https://tech12h.com/sites/default/files/ck5/2024-04/image_19802.png 

https://tech12h.com/sites/default/files/ck5/2024-04/image_19803.png

hiển thị:

https://tech12h.com/sites/default/files/ck5/2024-04/image_19807.png

c)

mã html:

https://tech12h.com/sites/default/files/ck5/2024-04/image_19806.png

hiển thị:

https://tech12h.com/sites/default/files/ck5/2024-04/image_19808.png


Giải bài tập những môn khác

Môn Ngữ văn Lớp 12

Môn Vật lí Lớp 12

Môn Sinh học Lớp 12

Môn Hóa học Lớp 12

Môn Tiếng Anh Lớp 12

  • Đề thi đề kiểm tra Tiếng Anh lớp 12 Bright
  • Đề thi đề kiểm tra Tiếng Anh lớp 12 English Discovery
  • Đề thi đề kiểm tra Tiếng Anh lớp 12 Friends Global
  • Đề thi đề kiểm tra Tiếng Anh lớp 12 Global Success
  • Đề thi đề kiểm tra Tiếng Anh lớp 12 iLearn Smart World
  • Đề thi tốt nghiệp THPT môn Anh
  • Đề thi, đề kiểm tra Tiếng Anh Lớp 12 Bright
  • Đề thi, đề kiểm tra Tiếng Anh Lớp 12 iLearn Smart World
  • Đề thi, đề kiểm tra Tiếng Anh Lớp 12 Friends Global
  • Đề thi, đề kiểm tra Tiếng Anh Lớp 12 Global Success
  • Đề thi, đề kiểm tra Tiếng Anh Lớp 12 English Discovery
  • Hướng dẫn ôn thi tốt nghiệp THPT môn Tiếng Anh
  • SBT Tiếng anh Lớp 12 English Discovery
  • SBT Tiếng Anh Lớp 12 Global Success - Kết nối tri thức
  • SBT Tiếng anh Lớp 12 iLearn Smart World
  • SBT Tiếng Anh Lớp 12 iLearn Smart World
  • SBT Tiếng anh Lớp 12 Bright
  • SBT Tiếng Anh Lớp 12 English Discovery - Cánh buồm
  • SBT Tiếng Anh Lớp 12 Friends Global - Chân trời sáng tạo
  • SBT Tiếng anh Lớp 12 Global Success
  • SBT Tiếng Anh Lớp 12 Bright
  • SBT Tiếng anh Lớp 12 Friends Global
  • SGK Tiếng Anh Lớp 12 Bright
  • SGK Tiếng Anh Lớp 12 Friends Global
  • SGK Tiếng Anh Lớp 12 english Discovery
  • SGK Tiếng Anh Lớp 12 Global Success
  • SGK Tiếng Anh Lớp 12 iLearn Smart World
  • Tiếng Anh Lớp 12 Bright
  • Tiếng Anh Lớp 12 Friends Global
  • Tiếng Anh Lớp 12 iLearn Smart World
  • Tiếng Anh Lớp 12 English Discovery
  • Tiếng Anh Lớp 12 Global Success