KIỂM TRA BÀI CŨ
KHỞI ĐỘNG
BÀI 12. TẠO BIỂU MẪU
1. BIỂU MẪU WEB
- Biểu mẫu (form) là công cụ dùng để thu thập dữ liệu từ người dùng để xử lý tại chỗ hoặc gửi về máy chủ. Một biểu mẫu đầy đủ gồm phần hiển thị (HTML) và phần xử lý dữ liệu (script/server).
- Biểu mẫu được tạo bởi cặp thẻ <form>...</form>.
a) Các phần tử cơ bản của biểu mẫu
Phần tử <label>:
Dùng để định nghĩa nhãn cho các vùng nhập liệu, giúp người dùng biết cần nhập gì.
Phần tử <input>:
Xác định vùng để người dùng nhập dữ liệu. Đây là thẻ đơn, có các thuộc tính quan trọng như id (định danh), name (tham chiếu khi xử lý), và type (loại dữ liệu).
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM
Câu 1: Biểu mẫu (form) trên trang web là một công cụ vô cùng quan trọng dùng để thu thập dữ liệu từ người dùng. Để bắt đầu tạo một biểu mẫu trên trang web, lập trình viên sử dụng cặp thẻ nào?
Câu 2: Khi xây dựng biểu mẫu, để giúp người dùng dễ dàng nhận biết được thông tin nào cần nhập vào ô trống tương ứng, người lập trình sử dụng phần tử <label>. Chức năng chính của phần tử <label> này là gì?
Câu 3: Trong quá trình viết mã tạo một ô nhập liệu cho biểu mẫu, bạn cần thiết lập để hệ thống máy chủ có thể tham chiếu và nhận diện đúng trường dữ liệu này khi xử lý. Thuộc tính nào của thẻ <input> được sử dụng cho mục đích này?
b) Một số loại dữ liệu (type) thông dụng của input
- text: Tạo trường nhập văn bản một dòng.
- password: Nhập mật khẩu (ký tự bị ẩn đi).
- radio: Chọn duy nhất một giá trị trong nhóm.
- checkbox: Ô lựa chọn cho phép chọn nhiều giá trị (có hoặc không).
- button: Tạo một nút bấm.
- file: Chọn tệp tin từ máy tính để tải lên.
- submit: Nút đặc biệt để gửi toàn bộ dữ liệu trong form về máy chủ.
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM
Câu 4: Trong các biểu mẫu trực tuyến, phần tử <input> cung cấp rất nhiều định dạng nhập liệu thông qua thuộc tính type. Để tạo ra một trường cho phép người dùng nhập văn bản một dòng (như họ tên), người ta dùng giá trị nào?
Câu 5: Bảo mật thông tin khi người dùng đăng nhập tài khoản là điều tối quan trọng. Để các kí tự người dùng nhập vào ô mật khẩu bị ẩn đi (thường biến thành dấu chấm hoặc sao), thuộc tính type của <input> phải là gì?
Câu 6: Khi thiết kế một câu hỏi trắc nghiệm hoặc lựa chọn giới tính trên biểu mẫu, người dùng chỉ được phép chọn duy nhất một đáp án trong số nhiều lựa chọn được đưa ra. Khi đó, thuộc tính type của thẻ <input> cần được thiết lập là gì?
Câu 7: Trong phần khảo sát ý kiến khách hàng về các môn học yêu thích, bạn muốn cung cấp các ô lựa chọn cho phép khách hàng có thể chọn cùng lúc nhiều giá trị khác nhau. Lúc này, thuộc tính type của thẻ <input> phải nhận giá trị nào?
Câu 8: Sau khi người dùng đã điền đầy đủ tất cả thông tin vào các trường nhập liệu của biểu mẫu, họ cần một nút bấm đặc biệt để gửi toàn bộ dữ liệu này về máy chủ để xử lý. Nút này được tạo ra bằng thuộc tính type nào?
Câu 9: Khi người dùng truy cập vào trang web tuyển dụng, họ cần cung cấp hồ sơ lý lịch bằng cách chọn một tệp tin định dạng PDF từ máy tính cá nhân để tải lên hệ thống. Để xây dựng chức năng này, lập trình viên sẽ dùng thuộc tính type nào?
Câu 10: Khi tạo ra một nhóm các nút lựa chọn giới tính (Nam/Nữ) bằng thẻ <input type="radio">, làm thế nào để trình duyệt web hiểu rằng các nút này thuộc cùng một nhóm và người dùng chỉ được phép chọn duy nhất một trong số đó?
Câu 11: Trong HTML, có nhiều loại nút bấm được tạo ra trên biểu mẫu để thực hiện các chức năng khác nhau. Sự khác biệt cốt lõi về chức năng giữa thẻ <input type="button"> thông thường và thẻ <input type="submit"> là gì trong quá trình thao tác với biểu mẫu?
Câu 12: Bạn được giao nhiệm vụ thiết kế một biểu mẫu đăng nhập hệ thống, trong đó yêu cầu phải có một ô trống để người dùng nhập "Mật khẩu" (các ký tự gõ vào không được hiển thị rõ ràng). Đoạn mã HTML nào sau đây đáp ứng đúng yêu cầu này?
Câu 13: Trong phần khảo sát "Bạn muốn nhận thông tin qua kênh nào?" của một biểu mẫu, để người dùng có thể đồng thời đánh dấu chọn cả hai phương án "Email" và "Điện thoại", bạn phải thiết lập thuộc tính type cho các ô vuông nhỏ này là gì?
c) Các phần tử nhập liệu khác
Phần tử <select>:
Tạo danh sách thả xuống để người dùng chọn. Các lựa chọn bên trong được định nghĩa bằng thẻ <option>.
Phần tử <textarea>:
Vùng nhập văn bản nhiều dòng và nhiều cột.
Phần tử <fieldset> và <legend>:
Nhóm các phần tử liên quan lại và đặt tên cho nhóm đó.
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM
Câu 14: Trong nhiều trường hợp, biểu mẫu yêu cầu người dùng phải lựa chọn một mục từ một danh sách dài có sẵn (ví dụ: danh sách các tỉnh/thành phố) để tiết kiệm diện tích. Phần tử HTML nào được sử dụng để tạo danh sách thả xuống này?
Câu 15: Nếu bạn muốn tạo một khung nhập liệu lớn trên biểu mẫu để khách hàng có thể thoải mái viết những dòng đóng góp ý kiến dài gồm nhiều dòng và nhiều cột, bạn nên sử dụng phần tử nhập liệu chuyên biệt nào trong HTML?
Câu 16: Khi xây dựng một danh sách thả xuống bằng phần tử <select>, để định nghĩa chi tiết cho từng lựa chọn cụ thể hiển thị bên trong danh sách đó (ví dụ: "Hà Nội", "TP.HCM"), người thiết kế web bắt buộc phải dùng lồng thêm thẻ nào?
Câu 17: Khi một biểu mẫu trực tuyến có quá nhiều trường thông tin khác nhau, người ta thường dùng các thẻ đặc biệt để nhóm các phần tử có liên quan lại với nhau (như "Thông tin cá nhân", "Thông tin học vấn") thành một khung chữ nhật. Các thẻ đó là gì?
Câu 18: Bạn đang lập trình một biểu mẫu phản hồi và muốn tạo một vùng nhập liệu văn bản lớn có kích thước được thiết lập hiển thị mặc định với chiều cao là 4 dòng và chiều rộng là 50 cột. Đoạn mã HTML nào sau đây là hoàn toàn chuẩn xác?
2. THỰC HÀNH TẠO BIỂU MẪU
Trong phần này, các em sẽ thực hiện hai nhiệm vụ chính để làm quen với việc xây dựng form thực tế:
a) Nhiệm vụ 1: Tạo biểu mẫu nhập thông tin món ăn
- Yêu cầu: Tạo form gồm Tên món ăn, Đơn giá, Số lượng.
- Sử dụng thẻ <h2> làm tiêu đề, dùng thẻ <br> để ngắt dòng cho các label.
b) Nhiệm vụ 2: Tạo biểu mẫu đăng ký môn thi tốt nghiệp
- Yêu cầu: Phân tích các loại dữ liệu cần thiết như: Họ tên (text), Ngày sinh (date), Giới tính (radio), Môn thi (checkbox), Tổ hợp (select/radio) và Nút gửi (submit).
- Sử dụng thẻ <fieldset> để bao quanh toàn bộ các trường nhập liệu giúp giao diện chuyên nghiệp hơn.
