Một yếu tố ngữ nghĩa mới đã xuất hiện trên tiêu chuẩn HTML : <search>. Nó đại diện cho một phần của tài liệu được sử dụng để tìm kiếm hoặc lọc . Nó phải chứa các điều khiển biểu mẫu (như nhập văn bản, danh sách thả xuống, nút, v.v.) và phạm vi tìm kiếm/lọc có thể là bất kỳ thứ gì: từ cùng một tài liệu đến toàn bộ Internet.

Làm thế nào nó hoạt động

Trước <search>phần tử, chúng ta có thể thêm một role="search"vào <form>thẻ để cho biết rằng biểu mẫu dùng để tìm kiếm:

<form role="search" method="get" action="/search">
  <input type="search" name="search-text" />
  <button>Search</button>
</form>

<search>
  <form method="get" action="/search">
    <input type="search" name="search-text" />
    <button>Search</button>
  </form>
</search>

<search role="search">
   ...
</search>

Lưu ý: mặc dù chúng tôi không cần <form>thẻ để tạo thành phần tìm kiếm, nhưng thật thú vị (và thậm chí là cần thiết) nếu có một thẻ, vì vậy tìm kiếm sẽ hoạt động ngay cả khi không có JavaScript hoặc tuân theo chiến lược nâng cao dần dần.

Một điều quan trọng khác cần lưu ý là vùng tìm kiếm không nhất thiết phải là kiểu nhập văn bản có nút để tìm kiếm trên trang web hoặc trực tuyến. Chúng ta có thể sử dụng <search>để lọc kết quả hoặc hàng của bảng. Tiện ích của nó không chỉ là nhập văn bản và hộp tìm kiếm:

<search>
  <h2>Filter results</h2>

  <form>
    <label for="cartype">Car type</label>
    <select id="cartype">
      <option value="coupe">Coupe</option>
      <option value="sedan">Sedan</option>
    </select>

    <label for="electric">Electric?</label>
    <input type="checkbox" id="electric" />
  </form>
</search>

Có một yếu tố để xác định các khu vực tìm kiếm là tốt. Như Scott O'Hara chỉ định trong bài viết này , đó là vai trò mốc ARIA duy nhất không có ngữ nghĩa tương đương trong HTML cho đến bây giờ:

• biểu ngữ →<header>
• bổ sung →<aside>
• thông tin nội dung →<footer>
• biểu mẫu →<form>
• chính →<main>
• chuyển hướng →<nav>
• khu vực → <section>(có tên có thể truy cập)
• tìm kiếm → ???

…nhưng, từ quan điểm của một lập trình viên, có vẻ như nó bị thiếu hoặc không bổ sung nhiều cho việc triển khai hiện có. Các yếu tố ngữ nghĩa khác có thể tăng cường khả năng truy cập và đơn giản hóa cách chúng tôi mã hóa các thành phần cụ thể. Ví dụ, theo ý kiến ​​​​trung thực của tôi, một cái gì đó giống như <tabpanel>và <tab>sẽ hấp dẫn và có giá trị hơn đáng kể.

Điều đó không làm mất đi bất kỳ tầm quan trọng nào của nó. Tất cả các cải tiến – kể cả những cải tiến nhỏ – đều được hoan nghênh. Và đó sẽ là trường hợp của <search>. Một bổ sung mới tuyệt vời cho gia đình HTML.

Thêm thông tin

• HTML Living Standard: Phần tử tìm kiếm .
• Yếu tố tìm kiếm , bởi Scott O'Hara.

Cảm ơn vì đã là một phần của cộng đồng của chúng tôi! Trước khi bạn đi:

• Vỗ tay cho truyện và theo dõi tác giả
• Xem thêm nội dung trong ấn phẩm Level Up Coding
• Khóa học phỏng vấn mã hóa miễn phí ⇒ Xem khóa học
• Theo dõi chúng tôi: Twitter | LinkedIn | bản tin