Để cho học sinh đăng kí học ngoại khoá, nhà trường đã yêu

Đề bài

Để cho học sinh đăng kí học ngoại khoá, nhà trường đã yêu cầu thành viên truyền thông làm một biểu mẫu đăng kí trực tuyến như sau đây:

Sau khi xem qua nhiều biểu mẫu, các thành viên của Ban truyền thông đã trao đổi và có một số có ý kiến về mã lệnh HTML tương ứng như sau:

1. Sử dụng thẻ input với giá trị thuộc tính type= “radio” cho việc lựa chọn giới tính type= “checkbox” cho việc chọn câu lạc bộ

2. Để xây dựng cấu trúc biểu mẫu trên, có thể sử dụng mã lệnh HTML để tạo ra bảng có cấu trúc như sau:

3. Để lựa chọn thành phần giới tính, sử dụng đoạn mã lệnh HTML sau trong dòng sau:<tr><td> Giới tính</td><td><input type="radio" name="Nam" checked> Nam<input type="radio" name="Nữ"> Nữ<input type="radio" name="Khac". Khác</td></tr>

4. Để tạo hai nút "Đăng ký" và "Thoát", sử dụng đoạn mã lệnh HTML sau trong dòng 5:<td colspan="2" style="text-align:center"><input type="submit" value="Đăng ký"><input type="submit" value="Thoát"></td>

Đáp án đúng: 1Đ, 2Đ, 3S, 4Đ

Xem lời giải

Lời giải chi tiết

Sau đây là phân tích và nhận định về các ý kiến của Ban truyền thông:

Ý kiến 1: Sử dụng thẻ <input> với giá trị thuộc tính type="radio" cho việc lựa chọn giới tính, và type="checkbox" cho lựa chọn câu lạc bộ là hoàn toàn đúng.
Ý kiến 2: Việc sử dụng bảng (<table>) để tạo ra cấu trúc biểu mẫu trên là một cách tiếp cận hợp lý nếu muốn sắp xếp các phần tử theo một bố cục cố định. Tuy nhiên, HTML5 khuyến khích sử dụng các thẻ <div> và CSS để định dạng giao diện người dùng thay vì sử dụng bảng cho bố cục.

Ý kiến 3: Đoạn mã HTML cho nút chọn giới tính có lỗi, cụ thể là thuộc tính name của thẻ <input> cần giống nhau cho tất cả tùy chọn để nhóm lại với nhau:

<tr><td> Giới tính</td>
<td>
 <input type="radio" name="gioi_tinh" value="Nam" checked> Nam
 <input type="radio" name="gioi_tinh" value="Nu"> Nữ
 <input type="radio" name="gioi_tinh" value="Khac"> Khác
</td></tr>

Ý kiến 4: Đoạn mã HTML để tạo hai nút "Đăng ký" và "Thoát" chưa phù hợp cho chức năng submit và reset form. Cần sử dụng type="reset" cho nút "Thoát" hoặc xử lý thêm trong JavaScript:
```
<td colspan="2" style="text-align:center">
 <input type="submit" value="Đăng ký">
 <input type="reset" value="Thoát">
</td>
```

Chú ý khi giải

Khi làm việc với thuộc tính name của type="radio", hãy đảm bảo rằng tất cả các tùy chọn trong cùng một nhóm có cùng tên để chúng hoạt động như mong muốn.
Nên chọn type="reset" nếu muốn nút "Thoát" có chức năng xóa toàn bộ các trường nhập trong biểu mẫu.
Sử dụng CSS để định dạng nếu cần có giao diện đẹp và linh hoạt hơn mà không cần dùng bảng để căn chỉnh.
Thử nghiệm mã HTML trên trình duyệt để kiểm tra kết quả.

Đang Quan Tâm