本文介绍如何使用纯html与javascript，将用户输入的搜索关键词动态拼接到固定url路径中，实现无后端提交的前端跳转式搜索功能。

本文介绍如何使用纯html与javascript，将用户输入的搜索关键词动态拼接到固定url路径中，实现无后端提交的前端跳转式搜索功能。

在构建静态网站或轻量级前端项目时，常需实现“输入即跳转”的搜索行为——例如用户输入 john，点击提交后直接跳转至 https://website.org/search/john。这种方案无需服务端处理表单，完全由前端控制路由，简洁高效。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

实现步骤

1. 编写基础HTML表单
   使用语义化 <form></form>，并为搜索输入框设置 name="search" 便于JS获取：

<form class="search-form">
  <input type="text" name="search" placeholder="请输入关键词..." required>
  <button type="submit">搜索</button>
</form>

✅ 注意：<button></button> 默认 type="submit"，但显式声明更稳妥；添加 required 可启用原生空值校验。

2. 绑定提交事件并重定向
   在表单后引入以下 JavaScript（推荐置于