HTMLのformでgetメソッドにパラメータを付与

HTML

HTMLのformでgetメソッドにパラメータを付与

HTMLのform要素でGETメソッドを使用してパラメータを付与する方法について説明します。
GETメソッドは、フォームデータをURLのクエリ文字列として送信します。
これにより、データがURLに含まれ、サーバー側で処理できます。

以下に、基本的なHTMLフォームをGETメソッドで設定する方法と、URLにパラメータを付与するためのコード例を示します。

基本的なHTMLフォームの作成

まず、formタグを使用してフォームを作成します。
method属性をgetに設定することで、GETメソッドを指定します。
action属性には、フォームデータが送信されるURLを指定します。
例えば、以下のようなHTMLコードを使用します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GETメソッドのフォーム</title>
</head>
<body>
  <form method="get" action="search.php">
    <label for="query">検索クエリ:</label>
    <input type="text" id="query" name="query">
    <button type="submit">検索</button>
  </form>
</body>
</html>

このフォームでは、ユーザーが検索クエリを入力し、"検索"ボタンをクリックすると、search.phpに対してGETメソッドでデータが送信されます。
フォームの入力データはURLのクエリ文字列として追加されます。

URLにパラメータを付与する

フォームのaction属性に指定したURLには、フォームが送信されるときにクエリパラメータが自動的に付与されます。
例えば、ユーザーが「apple」と入力して送信した場合、search.phpにリクエストが送信されるURLは次のようになります。

search.php?query=apple

これにより、search.phpはqueryというパラメータを含むリクエストを受け取ることができます。

フォームのパラメータをJavaScriptで操作する

JavaScriptを使用してフォームの送信前にクエリパラメータを操作することもできます。
以下の例では、フォーム送信時にJavaScriptでURLにパラメータを追加します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GETメソッドのフォーム</title>
  <script>
    function addCustomParameter(event) {
      event.preventDefault();
      var form = event.target;
      var query = form.query.value;
      var customParam = 'custom=value';
      var action = form.action;
      var separator = action.indexOf('?') !== -1 ? '&' : '?';
      form.action = action + separator + 'query=' + encodeURIComponent(query) + '&' + customParam;
      form.submit();
    }
  </script>
</head>
<body>
  <form method="get" action="search.php" onsubmit="addCustomParameter(event)">
    <label for="query">検索クエリ:</label>
    <input type="text" id="query" name="query">
    <button type="submit">検索</button>
  </form>
</body>
</html>

このスクリプトでは、フォームが送信される前にaddCustomParameter関数が呼ばれます。
関数内でaction属性にカスタムパラメータを追加し、その後フォームを送信します。

以上の方法で、HTMLのフォームをGETメソッドで設定し、パラメータをURLに付与することができます。
フォームのデータをURLパラメータとして送信することで、サーバー側で処理や分析が行いやすくなります。