Thẻ dịch vụ

8.1 Thẻ <datalist>

Thẻ <datalist> được sử dụng để cung cấp danh sách các tùy chọn có sẵn cho các phần tử <input>. Điều này cho phép người dùng lựa chọn giá trị từ danh sách các tùy chọn được đề xuất, giúp dễ dàng nhập dữ liệu và đảm bảo đầu vào chính xác và có thể dự đoán được.

Cú pháp

    
      <datalist id="list-id">
        <option value="Option 1">
        <option value="Option 2">
        <option value="Option 3">
      </datalist>
      <input list="list-id">
    
  

Thẻ <datalist> không có thuộc tính cụ thể, nhưng khía cạnh quan trọng của nó là liên kết với phần tử <input> thông qua thuộc tính list. Thuộc tính id của thẻ <datalist> phải khớp với giá trị của thuộc tính list trên phần tử <input>.

Ví dụ sử dụng:

    
      <form>
        <label for="browser">Chọn trình duyệt:</label>
        <input list="browsers" id="browser" name="browser">
        <datalist id="browsers">
          <option value="Chrome">
          <option value="Firefox">
          <option value="Safari">
          <option value="Opera">
          <option value="Edge">
        </datalist>
        <button type="submit">Gửi</button>
      </form>
    
  

Giải thích

• Phần tử <datalist>: chứa một danh sách giá trị có thể nhập vào
• Phần tử <input>: chứa thuộc tính list, liên kết nó với phần tử <datalist> qua định danh browsers

Lợi ích của việc sử dụng <datalist>

• Tiện lợi cho người dùng: cung cấp các tùy chọn có sẵn giúp người dùng nhập dữ liệu nhanh chóng và chính xác hơn
• Giảm lỗi nhập liệu: bằng cách đưa ra các tùy chọn có sẵn, có thể giảm thiểu số lượng lỗi nhập liệu
• Cải thiện trải nghiệm người dùng: người dùng có thể dễ dàng chọn từ các tùy chọn đề xuất, làm cho biểu mẫu trở nên tương tác và thân thiện hơn

Hạn chế của <datalist>

• Hỗ trợ định dạng hạn chế: các tùy chọn trong <datalist> không thể được định dạng linh hoạt như các phần tử thông thường
• Khác biệt trong hiện thực hóa: các trình duyệt khác nhau có thể hiển thị danh sách các tùy chọn khác nhau, có thể ảnh hưởng đến sự đồng nhất của trải nghiệm người dùng

8.2 Thẻ <output>

Thẻ <output> được sử dụng để hiển thị kết quả của phép tính hoặc hành động thực hiện bằng cách JavaScript. Thẻ này rất phù hợp để hiển thị nội dung thay đổi động, chẳng hạn như kết quả của phép tính, dữ liệu biểu mẫu hoặc các giá trị khác có thể thay đổi theo thời gian thực.

Cú pháp

    
      <output name="result" for="input-id-1 input-id-2">Kết quả</output>
    
  

Thuộc tính

• name: xác định tên của phần tử <output>, có thể được sử dụng trong JavaScript để lấy hoặc thay đổi giá trị
• for: chứa một danh sách các định danh của các phần tử có liên quan đến giá trị hiện tại của <output>. Điều này rất hữu ích để liên kết kết quả với nhiều phần tử đầu vào

Ví dụ sử dụng:

    
      <form oninput="calculateSum()">
        <label for="num1">Số 1:</label>
        <input type="number" id="num1" name="num1">
        <br>
        <label for="num2">Số 2:</label>
        <input type="number" id="num2" name="num2">
        <br>
        <output id="result" name="result" for="num1 num2">0</output>
      </form>
    
  

    
      function calculateSum() {
        const num1 = parseFloat(document.getElementById('num1').value) || 0;
        const num2 = parseFloat(document.getElementById('num2').value) || 0;
        const sum = num1 + num2;
        document.getElementById('result').value = sum;
      }
    
  

Giải thích

• Phần tử <output>: được sử dụng để hiển thị kết quả của phép tính
• Thuộc tính for và name: liên kết phần tử <output> với các phần tử đầu vào và cho phép dễ dàng xác định nó trong JavaScript
• Hàm calculateSum(): được gọi khi các giá trị của phần tử đầu vào thay đổi và cập nhật giá trị <output>

Lợi ích của việc sử dụng <output>

• Tiện lợi khi hiển thị kết quả: thẻ <output> cung cấp một cách chính xác về ngữ nghĩa để hiển thị kết quả của phép tính hoặc các dữ liệu động khác
• Dễ dàng tích hợp với JavaScript: dễ dàng nhận và thay đổi giá trị <output> bằng JavaScript, làm cho nó trở nên lý tưởng cho các ứng dụng web động
• Giữ mã sạch sẽ: sử dụng <output> giúp giữ mã HTML sạch sẽ và đúng ngữ nghĩa, cải thiện khả năng bảo trì và đọc hiểu mã

Hạn chế của <output>

• Hỗ trợ định dạng hạn chế: tương tự như <datalist>, việc định dạng phần tử <output> có thể bị giới hạn so với các phần tử khác
• Phụ thuộc vào JavaScript: trong hầu hết các trường hợp, <output> được sử dụng kết hợp với JavaScript, điều này có thể không phù hợp cho tất cả các kịch bản

8.3 Thẻ <label>

Thẻ <label> được sử dụng để tạo nhãn văn bản cho một phần tử biểu mẫu. Nó có thể được liên kết với phần tử biểu mẫu theo hai cách: qua thuộc tính for hoặc bằng cách chèn phần tử biểu mẫu bên trong thẻ <label>. Các cách này giúp cải thiện khả năng tiếp cận của biểu mẫu cho người dùng có hạn chế, như những người sử dụng chương trình đọc màn hình.

Thuộc tính for liên kết nhãn với phần tử biểu mẫu, sử dụng định danh của phần tử (giá trị của thuộc tính id). Điều này cho phép người dùng nhấp vào nhãn để tập trung hoặc kích hoạt phần tử biểu mẫu liên quan.

Ví dụ sử dụng thuộc tính for:

    
      <label for="username">Tên người dùng:</label>
      <input type="text" id="username" name="username">
    
  

Phần tử biểu mẫu lồng

Phần tử biểu mẫu có thể được lồng vào trong thẻ <label>, điều này cũng liên kết chúng lại với nhau. Trong trường hợp này, thuộc tính for không cần thiết.

Ví dụ sử dụng phần tử biểu mẫu lồng:

    
      <label>Tên người dùng:
        <input type="text" name="username">
      </label>
    
  

Lợi ích của việc sử dụng thẻ <label>

1. Cải thiện khả năng tiếp cận: nhãn giúp người dùng sử dụng các chương trình đọc màn hình hiểu rõ dữ liệu nào cần thiết cho mỗi phần tử biểu mẫu. Các chương trình đọc màn hình đọc nhãn cùng với các phần tử biểu mẫu, làm cho biểu mẫu dễ tiếp cận hơn.
2. Tiện ích cho người dùng: người dùng có thể nhấp vào nhãn để tập trung hoặc kích hoạt phần tử biểu mẫu tương ứng. Điều này đặc biệt hữu ích cho các phần tử nhỏ, như hộp kiểm và nút radio.
3. Tăng sự rõ ràng: nhãn giúp người dùng hiểu rõ hơn dữ liệu nào cần thiết cho mỗi phần tử biểu mẫu, từ đó giảm số lượng lỗi nhập liệu.