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

検索フォームを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で完結できるならそれが一番楽で良いのかなと考えています。

mike2mike4

2021/12/15 12:06

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

decatail

2021/12/15 12:10

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

行動規範の内容に同意します

回答2件

ベストアンサー

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

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

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

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

そういう形のURLにJavaScriptで整形してlocation.hrefでページ移動
もしくは、.htaccessでリライト。
もしくは、サーバーサイドでGETを受け取ってリダイレクト。

投稿2021/12/15 12:21

m.ts10806

総合スコア80875

decatail

2021/12/16 02:49

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

行動規範の内容に同意します

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>

投稿2021/12/16 02:48

decatail

総合スコア43