Introducing the latest HTML search component, designed for incorporating search features seamlessly into websites or web applications. Its primary function is to offer appropriate semantics for search operations within the browser. In this article, I will demonstrate its usage in various typical search scenarios. Without further ado, let's delve into it.
Recognizing the importance of selecting the most appropriate HTML tag for specific tasks is crucial. Ensuring that the browser or assistive technologies comprehensively interpret the context within our applications is a key consideration. This principle extends to search functionality.
In the HTML specification, the ARIA specification introduces the concept of landmark roles to enhance contextual understanding. These roles include Banner, Complementary, Contentinfo, Form, Main, Navigation, Region, and, with the recent addition in early 2023, Search. Previously, all these landmarks could be implicitly added using the correct HTML elements, except for the Search element, which is now available.
Now that we have the HTML search element, it is essential to grasp when and how to effectively incorporate it. Let's explore an example to illustrate its usage.
How to Use the HTML Search Element With a Common Search Form
Here, we encounter a set of conventional markup for a search form.
<form action="./search/" role="search">
<label for="search">Search Books</label>
<input type="search" id="search" autocomplete="off" [(ngModel)]="searchText" placeholder="Enter book title or author" />
<button type="submit">Find</button>
</form>
We've incorporated a form element with the appropriate ARIA landmark role attribute set to "search." Following that, we include the label for our search textbox, the search textbox itself, and the button responsible for submitting our search query. The submission triggers a backend process, resulting in a filtered list displayed below our search form.
In situations where a search submission button is present, we can streamline the structure by enclosing the entire form within the newly introduced search element. Consequently, the role attribute becomes redundant, as the search element inherently imparts the required semantic meaning.
<search>
<form action="./search/">
<label for="search">Search Books</label>
<input type="search" id="search" autocomplete="off" [(ngModel)]="searchText" placeholder="Enter book title or author" />
<button type="submit">Find</button>
</form>
</search>
And there you have it, a straightforward process.
The Distinction Between ARIA Landmark Search Role and HTML Search Element
A crucial point to highlight is the substitution of the ARIA role attribute with the newly introduced HTML search element. Although maintaining the previous setup with the landmark role attribute and omitting the search element is possible, the ARIA specification emphasizes using the element that inherently provides the appropriate semantics when available. In this context, the existence of the search element signifies that it should be employed in lieu of the role attribute.
Implementing the HTML Search Element in a Contemporary Setting: Filterable Search Controlled by JavaScript
Having explored a more conventional search setup, let's now consider a modern approach, such as a web app search where JavaScript controls the search without actually submitting a form for the query. Revisiting our example, this demonstration is constructed using Angular, enabling seamless client-side search functionality. While delving into the intricacies of the Angular search implementation is beyond the scope here, it's essential to understand that this is the underlying process in this scenario.
<form action="./search/">
<label for="search">Search Books</label>
<input type="search" id="search" autocomplete="off" [(ngModel)]="searchText" placeholder="Enter book title or author" />
<button type="submit">Find</button>
</form>
@for (book of books | filter: searchText; track book.title) {
<app-book [book]="book"></app-book>
} @empty {
<p>Sorry, we couldn't find any books with the title or author you entered</p>
}
Therefore, in this scenario, it is advisable to encapsulate the search results within the search element, as it serves the purpose of encompassing all search functionalities. Additionally, the necessity for a button diminishes because the search is now linked to the change in the textbox value. Consequently, as we type, the results will be automatically filtered without the requirement to click a button. With the elimination of the form submission and the absence of a submit button, the form element itself becomes superfluous.
<search>
<label for="search">Search Books</label>
<input type="search" id="search" autocomplete="off" [(ngModel)]="searchText" placeholder="Enter book title or author" />
@for (book of books | filter: searchText; track book.title) {
<app-book [book]="book"></app-book>
} @empty {
<p>Sorry, we couldn't find any books with the title or author you entered</p>
}
</search>
When to use HTML Search Element?
By now, you should be adept at incorporating the search element wherever it is suitable for your projects. It is essential to comprehend the suitable types of search regions that merit placement within the search element. This element is fitting for various search or filtering functionalities, whether implemented for an entire website or app, a specific section thereof, or even for external searches spanning other sites or the entire web.
It's crucial to emphasize that having multiple search elements within a website or app is entirely permissible. With these insights, you are now well-equipped to seamlessly integrate the search element into your projects.