本文介绍如何使用纯html与javascript，将用户输入的搜索关键词动态拼接到固定url路径中，实现点击提交后直接跳转至类似“https://website.org/search/关键词”的目标地址，无需后端参与。
本文介绍如何使用纯html与javascript，将用户输入的搜索关键词动态拼接到固定url路径中，实现点击提交后直接跳转至类似“https://website.org/search/关键词”的目标地址，无需后端参与。
要实现搜索框提交后跳转到形如 https://website.org/search/关键词 的静态路径，核心思路是：拦截表单默认提交行为，获取输入值，编码后拼接URL，再通过 window.location 重定向。该方案轻量、兼容性好，适用于静态站点或前端主导的搜索路由场景。
✅ 基础HTML结构
确保表单具有明确的类名（如 search-form）和输入字段的 name 属性（如 search），便于JS精准选取：
⚠️ 注意：
<button></button>默认为type="submit"，但显式声明更稳妥；required属性可防止空提交。
✅ JavaScript逻辑（推荐放在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
