HTMLの検索フォームの検索結果URLを任意の物に変更する手段

Question

検索フォームをHTMLで書きました。

<form method="get" action="https://example.com">
    <input type="search" name="search" placeholder="キーワードを入力">
    <input type="submit" value="検索">
</form>

このHTMLファイルを表示させると、検索フォーム表示自体はうまくいきましたし、検索ボタンをおして画面遷移も出来ました。しかし遷移する先のURLを変更したいと考えています。

上のソースコードだと下記のように「?」や「=」がついてしまいます。

https://example.com/?search=テスト

上記のURLを下記のものに変更したいと考えています。

https://example.com/search/テスト

なにか良い方法がございましたら御教授願います。ちなみに、Webサーバーとしてnginx、RubyのアプリケーションサーバーとしてSinatraを構築しています。ただ、HTMLで完結できるならそれが一番楽で良いのかなと考えています。

Comments

[mike2mike4]

JavaScriptでURLを組み立てるのはどうでしょうか？　この程度ならフロントエンドでできます。

[decatail]

コメントありがとうございます。JavaScriptは全くの無知なのですが、一つの手段としてJavaScriptがあるのですね。動きのあるサイト作ってないので、その発想はなかったです。

Answer 1

上のソースコードだと下記のように「?」や「=」がついてしまいます。

form送信におけるGETリクエストの仕様です。
「クエリストリング」と言います。

上記のURLを下記のものに変更したいと考えています。

form送信関係ない構成になるので、

1. そういう形のURLにJavaScriptで整形してlocation.hrefでページ移動

2. もしくは、.htaccessでリライト。

3. もしくは、サーバーサイドでGETを受け取ってリダイレクト。

Comments

[decatail]

コメントありがとうございます。JSは全くの無知ですが、なんとか組めました。

Answer 2

JSで書いた。もっと良い書き方があるのかも知れないが、これで想定した動きはした。

<form>
    <input type="text" id="word" placeholder="キーワードを入力">
    <input type="button" value="検索" size="31" maxlength="255" id="search" onclick="redirect()">
</form>

<script type="text/javascript">
    const textbox = document.getElementById("word");
    function redirect() {
        const search = textbox.value;
        window.location.href = "https://example.com/search/" + search;
    }
</script>

Comments

[decatail]

こっちのほうがいいかも。

https://teratail.com/questions/374122