search

何时使用

将此地标包裹在网站主要搜索区域周围 — 通常是一个包含输入框和提交按钮的 <form>。如果条件允许，请使用原生 <search> 元素，它可免费提供地标语义。如需兼容旧版浏览器，可在 <form> 上使用 role="search" 代替。

该地标的意义在于将搜索功能暴露在屏幕阅读器地标菜单中，让用户可以直接跳转至此。若没有该地标，搜索表单只是页面上普通的一个表单。

搜索地标内部的输入框应使用 <input type="search"> — 这样可为字段提供搜索语义、平台清除按钮交互，以及移动端的「搜索」回车键。

何时添加标签

单个搜索地标无需标签。如果同一页面存在多个搜索区域（例如页头的全站搜索和页内内容的筛选搜索），则需为每个地标分别添加标签 — 如「站内搜索」「筛选结果」。

常见错误

• 搜索表单缺少地标。用户无法通过地标导航跳转至此。
• role="search" 被误用于 <input> 而非其外层的 <form> 或包装元素。该角色应用于容器，而非字段本身。
• 存在多个搜索地标但未添加标签。
• 搜索地标仅包裹输入框，提交按钮却置于地标之外。用户能找到输入框，但按钮处于地标范围之外。
• 在 CRUD 页面中针对「按名称查找」的输入框使用 role="search" — 过度使用；那是筛选器，而非站内搜索。

示例

<!-- 推荐（现代 HTML）-->
<search>
  <form action="/search">
    <label for="q">Search</label>
    <input id="q" type="search" name="q">
    <button type="submit">Go</button>
  </form>
</search>

<!-- 兼容更多浏览器 -->
<form role="search" action="/search">
  <label for="q2">Search</label>
  <input id="q2" type="search" name="q">
  <button type="submit">Go</button>
</form>