搜索前的Html搜索前5位

Question

我的网站上有个问题。我希望有人知道怎么解决它。

我想为我的网站做一个内置的搜索栏，它搜索谷歌搜索的搜索词，但在搜索词之前添加前5名:前5名搜索词。(例如，如果用户输入香蕉，该网站将打开一个新窗口，谷歌搜索:前5名香蕉)

我试着找出怎样才能做到这一点，但我不知道该怎么做。

我试图构建一个html表单：

            <form action="https://www.google.com/search" method="GET">
                <input type"text" name="q" placeholder="Search">
                <input type="submit" value="Search">
                </form>

但是我不能把get表单操作放到https://www.google.de/search?&q=top+5上

我希望你能帮我解决我的问题。

Answer 1

@Terox对于您的用例，您需要动态更新用户值，只使用HTMl是不可能的。您需要使用javascript，在用户按下"submit“按钮之前，您必须获得用户的输入，并在此之前预置”默认字符串“。在这种情况下，表单action不会帮助您，您可以为这个特定的用例使用下面的代码

<script type="application/javascript">
    // get elements of the form
    const form = document.querySelector("#searchForm");
    const inputBox = document.querySelector("#inputBox");

    // add a listener to update the value on form submit
    form.addEventListener("submit", event => {
        // prevents automatic submit of the form and lets you update the value
        event.preventDefault();

       // takes you to different url and append your custom string before
        window.location.href = 'https://www.google.com/search?q=top+5+' + inputBox.value;
    });
</script>

了解更多关于it的信息，here