怎么用html5做搜索_HTML5搜索表单与本地搜索实现-html教程-PHP中文网

怎么用html5做搜索_HTML5搜索表单与本地搜索实现

爱谁谁

发布： 2025-10-20 11:26:02

原创

576人浏览过

使用HTML5创建搜索表单可通过<form>与type="search"实现语义化结构，结合JavaScript对列表内容实时过滤，提升静态页面交互体验。

怎么用html5做搜索_html5搜索表单与本地搜索实现

使用HTML5创建搜索表单

HTML5 提供了更语义化的标签和输入类型，让构建搜索功能变得更简单。要创建一个基本的搜索表单，可以使用 form 和 input 元素，并将输入类型设为 search。

示例代码：

<form action="#" method="get">
  <label for="search-input">搜索：</label>
  <input type="search" id="search-input" name="q" placeholder="输入关键词..." autofocus>
  <button type="submit">搜索</button>
</form>

登录后复制

说明：

type="search" 是 HTML5 新增的输入类型，语义明确，部分浏览器会自动添加清除按钮。
autofocus 属性让页面加载时输入框自动获得焦点。
placeholder 显示提示文字。
name="q" 是常见搜索参数名，便于后端接收。

实现简单的本地搜索功能

如果不需要连接服务器，可以用 JavaScript 在页面上实现本地内容搜索。比如在一个文章列表或商品列表中实时过滤内容。

立即学习“前端免费学习笔记（深入）”；

豆绘AI

豆绘AI是国内领先的AI绘图与设计平台，支持照片、设计、绘画的一键生成。

485

查看详情

示例：对一个无序列表进行关键词过滤

<input type="search" id="local-search" placeholder="本地搜索...">

<ul id="content-list">
  <li>HTML5 教程</li>
  <li>CSS 布局技巧</li>
  <li>JavaScript 入门</li>
  <li>响应式网页设计</li>
</ul>

<script>
const searchInput = document.getElementById('local-search');
const listItems = document.querySelectorAll('#content-list li');

searchInput.addEventListener('input', function() {
  const keyword = this.value.toLowerCase();

  listItems.forEach(item => {
    const text = item.textContent.toLowerCase();
    if (text.includes(keyword)) {
      item.style.display = '';
    } else {
      item.style.display = 'none';
    }
  });
});
</script>

登录后复制

关键点：