HTMLでGoogleのような検索バーを作成する方法

HTMLフォームの作成: まず、HTMLのform要素を使用して検索バーを作成します。以下のコードをHTMLファイルに追加します。

<form action="https://www.google.com/search" method="GET">
  <input type="text" name="q" placeholder="検索キーワードを入力してください">
  <input type="submit" value="検索">
</form>

上記のコードでは、action属性はGETメソッドを使用し、検索キーワードはname属性が"q"のinput要素によって送信されます。

<style>
  form {
    display: flex;
    justify-content: center;
  }
  input[type="text"] {
    padding: 10px;
    width: 300px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
  }
  input[type="submit"] {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
  }
</style>

上記のコードでは、検索バーを中央に配置するためにform要素にdisplay: flex; justify-content: center;を適用しています。また、検索テキストボックスと検索ボタンのスタイルも指定しています。

これで、HTMLでGoogleのような検索バーを作成することができます。必要に応じてスタイルを調整したり、他の要素と組み合わせたりすることもできます。