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

1. NHẬN BIẾT (4 CÂU)

Câu 1: Trình bày các thành phần chính của một biểu mẫu web.

Trả lời:

Biểu mẫu web có hai thành phần chính:

Biểu mẫu hiển thị trên web, được tạo bằng HTML.

Các ứng dụng hoặc script xử lý dữ liệu, thường nằm trên máy chủ.

Câu 2: Nêu cấu trúc cơ bản của phần tử <form> trong HTML.

Trả lời:

<form>

các phần tử của biểu mẫu

</form>

Câu 3: Liệt kê ba phần tử HTML thường dùng trong biểu mẫu web.

Trả lời:

Các phần tử thường dùng gồm:

<label>

<input>

<select>

Câu 4: Thẻ <label> trong HTML có chức năng gì?

Trả lời:

Thẻ <label> định nghĩa nhãn cho phần tử input và giúp người dùng tương tác dễ dàng bằng cách đưa con trỏ vào vùng nhập liệu.

2. THÔNG HIỂU (4 CÂU)

Câu 1: Giải thích ý nghĩa của thuộc tính name trong phần tử <input>.

<img src="images/thethao.PNG" alt="">

Trả lời:

Thuộc tính name được sử dụng để tham chiếu đến dữ liệu đã nhập khi gửi thông tin lên máy chủ hoặc khi thực hiện xử lý dữ liệu.

Câu 2: So sánh hai loại phần tử <input> với thuộc tính type="text" và type="number".

Trả lời:

type="text": Cho phép nhập dữ liệu dạng chữ.

type="number": Cho phép nhập dữ liệu số và có thể tăng/giảm bằng nút điều chỉnh.

Câu 3: Phân biệt chức năng của thẻ <select> và thẻ <input> với type="radio".

Trả lời:

Thẻ <select> cho phép người dùng chọn một giá trị từ danh sách thả xuống.

Thẻ <input> với type="radio" cho phép chọn một trong nhiều lựa chọn nhưng các lựa chọn được hiển thị đồng thời.

Câu 4: Tại sao nên sử dụng thẻ <fieldset> và <legend> khi tạo biểu mẫu?

<iframe src="the_thao.html" width="600" height="400"></iframe>

Trả lời:

Thẻ <fieldset> nhóm các phần tử liên quan lại với nhau trong một khung, còn thẻ <legend> cung cấp tiêu đề cho nhóm đó, giúp biểu mẫu rõ ràng và dễ nhìn.

3. VẬN DỤNG (3 CÂU)

Câu 1: Viết mã HTML tạo biểu mẫu nhập tên món ăn và đơn giá.

Trả lời:

<form>

<label for="tenmon">Tên món ăn:</label><br>

<input id="tenmon" type="text" name="tenmon"><br>

<label for="dongia">Đơn giá:</label><br>

<input id="dongia" type="number" name="dongia"><br>

</form>

Câu 2: Tạo biểu mẫu cho phép nhập ngày sinh và giới tính (giới tính dùng radio button).

Trả lời:

<form>

<label for="ngaysinh">Ngày sinh:</label>

<input id="ngaysinh" type="date" name="ngaysinh"><br>

Giới tính:

<input type="radio" id="nam" name="gioitinh" value="Nam">

<label for="nam">Nam</label>

<input type="radio" id="nu" name="gioitinh" value="Nữ">

<label for="nu">Nữ</label>

</form>

Câu 3: Viết mã HTML tạo biểu mẫu có checkbox cho môn Toán và Văn.

Trả lời:

<form>

<label for="toan">Toán:</label>

<input type="checkbox" id="toan" name="monhoc" value="Toan"><br>

<label for="van">Văn:</label>

<input type="checkbox" id="van" name="monhoc" value="Van"><br>

</form>

4. VẬN DỤNG CAO (2 CÂU)

Câu 1: Kết hợp các phần tử đã học, viết mã HTML hoàn chỉnh cho biểu mẫu đăng ký thi tốt nghiệp gồm họ tên, ngày sinh, giới tính, môn thi và nút gửi.

Trả lời:

<form>

<h1>Đăng ký thi tốt nghiệp</h1>

<fieldset>

<legend>Thông tin cá nhân</legend>

<label for="hoten">Họ và tên:</label>

<input id="hoten" type="text" name="hoten"><br>

<label for="ngaysinh">Ngày sinh:</label>

<input id="ngaysinh" type="date" name="ngaysinh"><br>

Giới tính:

<input type="radio" id="nam" name="gioitinh" value="Nam">

<label for="nam">Nam</label>

<input type="radio" id="nu" name="gioitinh" value="Nữ">

<label for="nu">Nữ</label>

</fieldset>

<fieldset>

<legend>Môn thi</legend>

<label for="toan">Toán:</label>

<input type="checkbox" id="toan" name="monhoc" value="Toan"><br>

<label for="van">Văn:</label>

<input type="checkbox" id="van" name="monhoc" value="Van"><br>

</fieldset>

<input type="submit" value="Gửi thông tin">

</form>

Câu 2: Đánh giá lợi ích của việc sử dụng thẻ <fieldset> và <legend> trong biểu mẫu lớn có nhiều nhóm thông tin.

Trả lời:

Thẻ <fieldset> và <legend> giúp biểu mẫu rõ ràng, có cấu trúc nhóm thông tin cụ thể, tạo trải nghiệm người dùng tốt hơn và dễ đọc.