PHP小码农

Appearance

search 搜索容器 ​

<search> 元素是 HTML 新增的语义化标签，用于包裹页面中与搜索功能相关的内容。它告诉浏览器和辅助技术这部分是一个搜索区域，有助于屏幕阅读器用户快速定位搜索功能。

前置知识

阅读本节前，建议先了解：address 联系信息

基础概念 ​

<search> 是 HTML 规范中相对较新的语义化元素，用于表示页面的搜索区域。它将搜索表单和相关的搜索控件组织在一起，为辅助技术提供明确的搜索 landmark。

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>search 示例</title>
</head>
<body>
  <header>
    <h1>我的网站</h1>
    <!-- 搜索容器 -->
    <search>
      <form action="/search" method="get">
        <label for="search-input">搜索</label>
        <input type="search" id="search-input" name="q" placeholder="输入关键词...">
        <button type="submit">搜索</button>
      </form>
    </search>
  </header>
</body>
</html>

search 的隐式角色 ​

属性值说明
隐式角色search自动映射为 search landmark
可访问名称无（可使用 aria-label）帮助区分多个 search 区域
Landmark 支持屏幕阅读器可快速定位按 D 键可跳转到搜索区域

search 与 role="search" 的关系 ​

在 <search> 标签出现之前，开发者通常手动添加 role="search" 来标识搜索区域：

html
<!-- 旧方式：手动添加 role -->
<div role="search">
  <form action="/search" method="get">
    <input type="search" name="q">
    <button type="submit">搜索</button>
  </form>
</div>

<!-- 新方式：使用 search 标签 -->
<search>
  <form action="/search" method="get">
    <input type="search" name="q">
    <button type="submit">搜索</button>
  </form>
</search>

语法与使用 ​

基本语法 ​

html
<search>
  <form action="/search" method="get">
    <label for="q">搜索</label>
    <input type="search" id="q" name="q">
    <button type="submit">搜索</button>
  </form>
</search>

search 可以包含的内容 ​

内容类型说明示例
form 表单搜索表单<form action="/search">...</form>
input 输入框搜索输入框<input type="search">
button 按钮提交/清除按钮<button type="submit">搜索</button>
filter 筛选器搜索筛选条件复选框、下拉选择等
搜索结果搜索结果列表<ul> 结果列表

search 的使用位置 ​

<search> 可以出现在页面的不同位置：

html
<body>
  <header>
    <!-- 位置 1：页面头部搜索 -->
    <search>
      <form action="/search">
        <input type="search" name="q">
        <button>搜索</button>
      </form>
    </search>
  </header>

  <main>
    <article>
      <h1>文章标题</h1>
      <p>正文...</p>

      <!-- 位置 2：文章内搜索（站内搜索） -->
      <search>
        <form action="/article-search">
          <input type="search" name="q" placeholder="搜索本文章...">
        </form>
      </search>
    </article>
  </main>

  <aside>
    <!-- 位置 3：侧边栏搜索 -->
    <search>
      <form action="/search">
        <input type="search" name="q" placeholder="搜索文章...">
      </form>
    </search>
  </aside>
</body>

详细说明 ​

简单搜索表单 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>简单搜索表单示例</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: -apple-system, sans-serif; }

    .site-header {
      background: #1a1a2e; color: #fff; padding: 1rem 2rem;
      display: flex; justify-content: space-between; align-items: center;
    }

    /* search 容器样式 */
    search form {
      display: flex; align-items: center; gap: 0.5rem;
    }

    search input[type="search"] {
      padding: 0.5rem 1rem; border: 1px solid rgba(255,255,255,0.3);
      border-radius: 20px; background: rgba(255,255,255,0.1);
      color: #fff; outline: none; width: 250px;
      transition: all 0.3s;
    }

    search input[type="search"]::placeholder {
      color: rgba(255,255,255,0.5);
    }

    search input[type="search"]:focus {
      border-color: rgba(255,255,255,0.6);
      background: rgba(255,255,255,0.15);
      width: 300px;
    }

    search button {
      padding: 0.5rem 1.25rem; background: #3498db; color: #fff;
      border: none; border-radius: 20px; cursor: pointer;
      transition: background 0.2s;
    }

    search button:hover { background: #2980b9; }

    main { max-width: 800px; margin: 2rem auto; padding: 0 2rem; }
  </style>
</head>
<body>
  <header class="site-header">
    <h1>MySearch</h1>
    <search>
      <form action="/search" method="get" role="search">
        <label for="search-input" class="sr-only">搜索</label>
        <input type="search" id="search-input" name="q" placeholder="搜索文章...">
        <button type="submit">搜索</button>
      </form>
    </search>
  </header>

  <main>
    <h1>搜索结果</h1>
    <p>请输入关键词开始搜索。</p>
  </main>
</body>
</html>

带筛选条件的搜索 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>带筛选的搜索示例</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: -apple-system, sans-serif; background: #f5f5f5; }

    .site-header { background: #2c3e50; color: #fff; padding: 1rem 2rem; }

    main { max-width: 900px; margin: 2rem auto; padding: 0 2rem; }

    /* 搜索区域样式 */
    .search-area {
      background: #fff; padding: 2rem; border-radius: 12px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.08); margin-bottom: 2rem;
    }

    .search-row {
      display: flex; gap: 0.75rem; margin-bottom: 1rem;
    }

    .search-input {
      flex: 1; padding: 0.75rem 1rem;
      border: 2px solid #e2e8f0; border-radius: 8px;
      font-size: 1rem; outline: none; transition: border-color 0.2s;
    }

    .search-input:focus { border-color: #3b82f6; }

    .search-btn {
      padding: 0.75rem 2rem; background: #3b82f6; color: #fff;
      border: none; border-radius: 8px; font-size: 1rem; cursor: pointer;
    }

    .search-btn:hover { background: #2563eb; }

    /* 筛选器 */
    .filter-row {
      display: flex; gap: 1rem; flex-wrap: wrap;
      padding-top: 1rem; border-top: 1px solid #f0f0f0;
    }

    .filter-group {
      display: flex; align-items: center; gap: 0.5rem;
    }

    .filter-group label {
      font-size: 0.85rem; color: #64748b; font-weight: 500;
    }

    .filter-group select, .filter-group input {
      padding: 0.4rem 0.75rem; border: 1px solid #d1d5db;
      border-radius: 4px; font-size: 0.85rem;
    }
  </style>
</head>
<body>
  <header class="site-header"><h1>TechDocs</h1></header>

  <main>
    <!-- 带筛选条件的搜索 -->
    <search class="search-area" aria-label="文档搜索">
      <form action="/search" method="get">
        <div class="search-row">
          <input type="search" name="q" class="search-input" placeholder="搜索文档..." aria-label="搜索关键词">
          <button type="submit" class="search-btn">搜索</button>
        </div>

        <!-- 筛选条件 -->
        <div class="filter-row">
          <div class="filter-group">
            <label for="category">分类：</label>
            <select id="category" name="category">
              <option value="">全部</option>
              <option value="html">HTML</option>
              <option value="css">CSS</option>
              <option value="javascript">JavaScript</option>
            </select>
          </div>

          <div class="filter-group">
            <label for="sort">排序：</label>
            <select id="sort" name="sort">
              <option value="relevance">相关性</option>
              <option value="date">最新</option>
              <option value="popular">最热</option>
            </select>
          </div>

          <div class="filter-group">
            <label for="date-range">时间：</label>
            <select id="date-range" name="date">
              <option value="">不限</option>
              <option value="week">最近一周</option>
              <option value="month">最近一月</option>
              <option value="year">最近一年</option>
            </select>
          </div>
        </div>
      </form>
    </search>

    <section>
      <h2>搜索结果</h2>
      <p>输入关键词开始搜索文档。</p>
    </section>
  </main>
</body>
</html>

站内搜索（无 form 场景） ​

在某些 SPA 应用中，搜索不使用传统表单提交，而是通过 JavaScript 处理：

html
<search aria-label="站内搜索">
  <label for="inline-search">搜索本页面</label>
  <input type="search" id="inline-search" placeholder="搜索...">
  <button type="button" onclick="handleSearch()">搜索</button>
  <!-- 搜索结果列表 -->
  <div id="search-results" aria-live="polite"></div>
</search>

<script>
  function handleSearch() {
    const query = document.getElementById('inline-search').value;
    const resultsDiv = document.getElementById('search-results');
    // 处理搜索逻辑...
  }
</script>

实战示例 ​

电商网站搜索 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>电商搜索示例</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: -apple-system, sans-serif; }

    .top-bar { background: #0f172a; color: #94a3b8; padding: 0.5rem 2rem; font-size: 0.8rem; }

    .main-header {
      background: #1e293b; color: #fff; padding: 1.5rem 2rem;
    }

    .header-inner {
      max-width: 1200px; margin: 0 auto;
      display: flex; align-items: center; gap: 2rem;
    }

    .brand { font-size: 1.5rem; font-weight: 700; white-space: nowrap; }

    /* 电商搜索框 */
    search { flex: 1; }
    search form { display: flex; }
    search select {
      padding: 0.75rem; border: 2px solid #334155; border-right: none;
      border-radius: 8px 0 0 8px; background: #334155; color: #fff;
      font-size: 0.9rem; outline: none;
    }

    search input[type="search"] {
      flex: 1; padding: 0.75rem 1rem;
      border: 2px solid #334155; border-left: none; border-right: none;
      outline: none; font-size: 1rem;
    }

    search button {
      padding: 0.75rem 2rem; background: #f59e0b; color: #1e293b;
      border: 2px solid #f59e0b; border-radius: 0 8px 8px 0;
      font-weight: 600; cursor: pointer; transition: background 0.2s;
    }

    search button:hover { background: #d97706; }

    .hot-words {
      padding: 0.5rem 2rem; font-size: 0.8rem;
      color: #94a3b8;
    }

    .hot-words a {
      color: #94a3b8; text-decoration: none; margin-right: 1rem;
    }

    .hot-words a:hover { color: #fff; }

    main { max-width: 1200px; margin: 2rem auto; padding: 0 2rem; }
  </style>
</head>
<body>
  <div class="top-bar">
    <span>欢迎来到 ShopMall</span>
  </div>

  <header class="main-header">
    <div class="header-inner">
      <div class="brand">ShopMall</div>

      <!-- 电商搜索 -->
      <search aria-label="商品搜索">
        <form action="/search" method="get">
          <select name="category" aria-label="搜索分类">
            <option>全部商品</option>
            <option>数码电子</option>
            <option>服装鞋帽</option>
            <option>家居生活</option>
          </select>
          <input type="search" name="q" placeholder="搜索商品..." aria-label="搜索关键词">
          <button type="submit">搜索</button>
        </form>
      </search>
    </div>
  </header>

  <div class="hot-words">
    热门搜索：<a href="/search?q=手机">手机</a>
    <a href="/search?q=耳机">耳机</a>
    <a href="/search?q=笔记本">笔记本</a>
    <a href="/search?q=平板">平板</a>
  </div>

  <main>
    <h2>推荐商品</h2>
    <p>浏览我们的精选商品...</p>
  </main>
</body>
</html>

注意事项 ​

浏览器兼容性 ​

<search> 是较新的 HTML 元素，浏览器兼容情况：

浏览器支持版本备注
Chrome121+2024 年初支持
Firefox121+同步支持
Safari17.4+2024 年初支持
Edge121+基于 Chromium

对于不支持 <search> 的浏览器，可以添加 polyfill：

html
<!-- Polyfill：为旧浏览器添加 search 支持 -->
<script>
  if (!customElements.get('search-element-polyfill')) {
    // search 在旧浏览器中会被当作未知元素，默认 display: inline
    document.querySelectorAll('search').forEach(el => {
      el.style.display = 'block';
    });
  }
</script>

<style>
  /* 保险方案：为不支持 search 的浏览器添加默认样式 */
  search {
    display: block;
  }
</style>

常见错误 ​

  1. search 内没有搜索相关的功能：不应将非搜索内容放入 <search>
  2. 忘记添加标签：搜索区域应该有可访问名称
  3. 重复使用 search：页面中通常只需要一个搜索区域

最佳实践 ​

  1. 配合 aria-label 使用：为搜索区域提供描述性名称
  2. 使用 label 标签：搜索输入框必须有 label
  3. 添加 placeholder：提供搜索提示
  4. 支持键盘操作：确保搜索可用 Tab 和 Enter 操作
  5. 提供搜索建议：提升搜索体验

下一节

继续学习：div 通用容器

参考链接 ​