type="search"
The difference between the Text state and the Search state is primarily stylistic: on platforms where search fields are distinguished from regular text fields, the Search state might result in an appearance consistent with the platform’s search fields rather than appearing like a regular text field. 4.10.5.1.2. Text (type=text) state and Search state (type=search)
Links about type="search"
Maybe Ignore type=search
Another case of the headline saying it all. If you have a valid, accessible search field (with a useful, sensible label) then you can probably ignore type=”search” and use type=”text” instead. I made a code sample you can use for testing in your preferred set-up; it is what I used…
Tags:
<input type=“search”>
input elements of type search are text fields designed for the user to enter search queries into. These are functionally identical to text inputs, but may be styled differently by the user agent.
Code sample
<label for="search">Search:</label>
<input type="search" id="search">Explore other pages
- aria-labelledby
Identifies the element (or elements) that labels the current element.
- article
Represents a self-contained composition in a document, page, or application.
- aria-details
Identifies the element that provides a detailed, extended description for the object.
- scroll-snap-type
Specifies whether a scroll container is a scroll snap container, how strictly it snaps, and which axes are considered.