JavaScriptでGoogle検索入力を作成する方法


方法1: HTMLの

要素を使用する方法

まず、HTMLの要素を使用して、Google検索入力フォームを作成します。以下は、基本的なHTMLの例です。

<form action="https://www.google.com/search" method="GET">
  <input type="text" name="q" placeholder="Googleで検索する">
  <input type="submit" value="検索">
</form>

このコードでは、<form>要素のaction属性をGoogleの検索URLに設定し、<input>要素のname属性をqに設定しています。これにより、入力されたテキストがGoogleの検索クエリとして送信されます。

方法2: JavaScriptを使用して入力フォームを動的に作成する方法

もう一つの方法は、JavaScriptを使用して入力フォームを動的に作成する方法です。以下は、JavaScriptを使用した例です。

<div id="search-form-container"></div>
<script>
  var container = document.getElementById("search-form-container");
  var form = document.createElement("form");
  form.action = "https://www.google.com/search";
  form.method = "GET";
  var input = document.createElement("input");
  input.type = "text";
  input.name = "q";
  input.placeholder = "Googleで検索する";
  var submitButton = document.createElement("input");
  submitButton.type = "submit";
  submitButton.value = "検索";
  form.appendChild(input);
  form.appendChild(submitButton);
  container.appendChild(form);
</script>

このコードでは、JavaScriptを使用して動的にフォーム要素を作成し、HTMLの特定の要素に追加しています。