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

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.

Giải chi tiết:

Để tạo đơn hàng trên website của lớp em để tham gia hội chợ ẩm thực, cần sử dụng các phần tử HTML phù hợp để người dùng có thể đặt hàng một cách thuận tiện. Thường thì, việc tạo đơn hàng yêu cầu có các phần tử sau:

1. Form (Biểu mẫu): Đây là phần tử cơ bản để người dùng nhập thông tin và đặt hàng. Form sử dụng thẻ <form> trong HTML để bao quanh các trường nhập liệu và nút gửi.

2. Các trường nhập liệu: Các trường nhập liệu như tên sản phẩm, số lượng, thông tin liên hệ (tên, số điện thoại, địa chỉ), và các yêu cầu đặc biệt khác. Đối với mỗi trường thông tin, sử dụng các thẻ như <input>, <textarea>, hoặc <select>.

3. Nút Gửi (Submit button): Đây là nút dùng để gửi thông tin đơn hàng sau khi người dùng đã điền đầy đủ thông tin vào form. Nút Gửi được tạo bằng thẻ <button> hoặc <input type="submit">.

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

Giải chi tiết:

Khi đăng ký tài khoản trên một trang web, các bước thông thường mà em có thể thực hiện như sau:

1. Truy cập trang web đăng ký: Truy cập vào trang web mà em muốn đăng ký tài khoản. Thường thì có một liên kết "Đăng ký" hoặc "Tạo tài khoản" ở gần nút đăng nhập.

2. Điền thông tin cá nhân: Điền các thông tin cá nhân yêu cầu. Thông tin này có thể bao gồm:

   • Tên đầy đủ

   • Địa chỉ email

   • Mật khẩu (có thể yêu cầu xác nhận mật khẩu)

   • Ngày sinh

   • Giới tính

   • Địa chỉ và thông tin liên lạc khác (tùy trang web yêu cầu).

3. Chọn tên đăng nhập: Một số trang web yêu cầu chọn một tên đăng nhập duy nhất. Tên đăng nhập này có thể được sử dụng để đăng nhập vào tài khoản của em sau này.

4. Xác nhận điều khoản và điều kiện: Đọc và đồng ý với các điều khoản và điều kiện sử dụng của trang web. Thường có một ô đồng ý hoặc nút "Đăng ký" để em xác nhận việc đăng ký tài khoản.

5. Xác nhận thông tin và hoàn thành đăng ký: Sau khi điền đầy đủ thông tin và xác nhận các điều khoản, nhấn vào nút "Đăng ký" hoặc "Hoàn thành đăng ký" để gửi thông tin lên máy chủ của trang web.

6. Xác nhận email (nếu có): Một số trang web yêu cầu xác nhận địa chỉ email bằng cách gửi một liên kết xác nhận đến địa chỉ email mà em đã cung cấp. Em cần kiểm tra email và nhấn vào liên kết xác nhận để hoàn tất đăng ký.

7. Đăng nhập vào tài khoản mới đăng ký: Sau khi đăng ký thành công và xác nhận email (nếu có), em có thể sử dụng tên đăng nhập và mật khẩu để đăng nhập vào tài khoản của mình trên trang web.

Những bước này giúp em có thể đăng ký và sử dụng tài khoản trên các trang web để tận dụng các tính năng và dịch vụ mà trang web đó cung cấp.

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

Giải chi tiết:

Các yếu tố HTML như <input type="radio">, <input type="checkbox"> và <select> đều được sử dụng để cho phép người dùng chọn lựa các tùy chọn khác nhau trên các biểu mẫu trang web. Dưới đây là các điểm khác nhau giữa chúng:

1. Radio button (<input type="radio">):

   • Được sử dụng khi chỉ có một lựa chọn duy nhất được phép trong một nhóm các tùy chọn.

   • Thường sử dụng các radio button để người dùng chọn giới tính (nam/nữ), chọn loại thẻ (VISA/MasterCard), chọn ngôn ngữ (Tiếng Anh/Tiếng Pháp/Tiếng Tây Ban Nha), và các tùy chọn khác mà chỉ có một lựa chọn duy nhất là hợp lý.

2. Checkbox (<input type="checkbox">):

   • Cho phép người dùng chọn nhiều tùy chọn từ một danh sách các tùy chọn.

   • Các checkbox thường được sử dụng khi người dùng cần có thể chọn hoặc không chọn nhiều tùy chọn, ví dụ như chọn các mục trong một danh sách, hoặc đánh dấu các tính năng bổ sung.

3. Dropdown list (<select>):

   • Cho phép người dùng chọn một tùy chọn duy nhất từ một danh sách các tùy chọn.

   • Thường được sử dụng khi danh sách các tùy chọn quá dài để hiển thị trên form, nhưng người dùng chỉ có thể chọn một trong số các tùy chọn, chẳng hạn như chọn quốc gia, chọn thành phố, hoặc chọn loại sản phẩm.

Mỗi loại phần tử này đều có mục đích và cách sử dụng khác nhau, và thường được lựa chọn dựa trên loại dữ liệu mà người dùng cần chọn và cách mà thông tin sẽ được sắp xếp và hiển thị trên giao diện người dù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.

Giải chi tiết:

Mã HTML:

Kết quả trả về:

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.

Giải chi tiết:

- Phần tử <form>:

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

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

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

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

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

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

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ộ.

Giải chi tiết:

Mã HTML:

Kết quả:

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.

Giải chi tiết:

Mã HTML sửa lại thành:

Kết quả hiển thị: