HTML検索ボックスの作り方

HTML 検索ボックスを作成するにはどうすればよいですか?

最新の Web サイトは、Web サイトの基本要素の 1 つとなっている検索機能と切り離すことができません。ユーザーが特定の情報を見つける必要がある場合、特に Web サイトのコンテンツが膨大な場合、検索機能は特に重要です。 HTML では、検索ボックスの実装に多くのコードやスキルは必要なく、特定の仕様に従うだけで簡単に実装できます。

この記事では、Web サイトに検索機能をすぐに追加できるように、HTML 検索ボックスの実装方法と実践的なスキルを詳しく紹介します。

1. HTML 検索ボックスの基本構造を作成する

検索ボックスを作成するには、まず HTML を使用して検索ボックスの基本構造を定義する必要があります。検索ボックスでは通常、多くの種類がある 要素を使用します。以下に示すように、ここでは type="text" タイプを使用してテキスト入力ボックスを定義します:

<form>
  <input type="text" placeholder="请在这里输入">
</form>

この HTML コード スニペットでは、

要素を作成し、テキスト入力ボックスも定義しましたは、プレースホルダー属性を使用して、入力ボックスにプロンプ​​ト情報を提供します。注: プレースホルダ属性は、HTML5 の新しい属性です。この属性は、テキスト ボックスにプロンプ​​ト情報を入力するために使用できます。ユーザーがテキスト ボックスにコンテンツを入力すると、この属性は表示されなくなります。

2. 送信ボタンを追加する

検索機能を作成するときは、送信ボタンも必要です。ユーザーはテキストを入力した後、マウスまたはキーボードを使用して検索リクエストを入力し、送信する必要があります。送信ボタンについては、以下に示すように、タイプ「submit」の 要素も使用します:

<form>
  <input type="text" placeholder="请在这里输入">
  <input type="submit" value="搜索">
</form>

この HTML コードでは、 要素を追加しました。は検索フォームの送信ボタンとして機能し、value 属性はボタンがページ上に表示するテキストを指定します。

3. 検索機能の実装

上記で検索ボックスの基本構造とスタイルを定義しました。次に、検索機能を実装する必要があります。最も簡単な方法は、HTML の action 属性を使用して、検索フォームのリクエストをサーバーに渡して処理することです。たとえば、次のコードは、検索フォームリクエストを「search.php」ページに送信して処理します。

<form action="search.php">
  <input type="text" placeholder="请在这里输入">
  <input type="submit" value="搜索">
</form>

ただし、サーバーをまだ持っていない場合、またはサーバー側のコードを書いていない場合は、HTML で JavaScript を使用して検索機能を実装できます。 JavaScript を使用して送信ボタンのクリック イベントをリッスンし、入力ボックス内のテキスト情報を取得します。具体的な操作は次のとおりです:

<form>
  <input id="searchBox" type="text" placeholder="请在这里输入">
  <input type="submit" value="搜索" onclick="search()">
</form>

<script>
function search() {
  var keyword = document.getElementById("searchBox").value;
  alert("正在搜索：" + keyword);
  // 实现搜索功能
}
</script>

この例では、JavaScript コードで要素への参照を簡単に取得できるように、まず 要素に id 属性を追加します。次に、送信ボタンの onclick イベントによって呼び出される「search」という JavaScript 関数を定義します。 「検索」関数では、document.getElementByIdで入力ボックスへの参照を取得し、入力ボックスに入力された検索キーワードを取得し、最後にアラート関数を使って検索中のキーワードを表示します。アラート関数の背後に独自の検索コードを記述することができます。

4. 自動プロンプト機能の実装

検索ボックスの自動プロンプト機能を使用すると、キーワードを入力すると、関連する検索候補が自動的にポップアップ表示されます。この機能は、ユーザーが必要な情報をより速く見つけるのに役立つため、非常に便利です。 HTML で検索ボックスの自動プロンプト機能を実装するには、JavaScript を使用して実装できます。たとえば、入力ボックスの onkeyup イベントをバインドすると、入力ボックスに文字が入力されるたびに、関連する検索候補がユーザーに自動的にポップアップ表示されます。

<form>
  <input id="searchBox" type="text" placeholder="请在这里输入" onkeyup="showHint()">
  <input type="submit" value="搜索">
</form>

<script>
function showHint() {
  var keyword = document.getElementById("searchBox").value;
  var xmlhttp;
  if (keyword.length==0) { 
    document.getElementById("hintBox").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest) {
    xmlhttp=new XMLHttpRequest();
  } else { 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (this.readyState==4 && this.status==200) {
      document.getElementById("hintBox").innerHTML=this.responseText;
    }
  }
  xmlhttp.open("GET","gethint.php?q="+keyword,true);
  xmlhttp.send();
}
</script>

上記のコードでは、「showHint」という名前の関数を定義します。この関数は、XMLHttpRequest オブジェクトを使用してバックグラウンドに get リクエストを送信し、キーワード関連の検索候補を取得します。検索候補を取得すると、ID が「hintBox」の定義された HTML 要素に表示されます。

5. スタイルの追加

最後に、CSS スタイルを使用して検索ボックスの外観を美しくすることができます。たとえば、背景色、外枠、内側のマージンなどを設定することで、検索ボックスのスタイルを統一することができます。 コードは次のとおりです。

input[type="text"] {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
  outline: none;
}
input[type="text"]:focus {
  border-color: #369;
  box-shadow: 0 0 5px #369;
}
input[type="submit"] {
  background-color: #369;
  color: #fff;
  border: none;
  padding: 10px 20px;
  margin-left: -5px;
  border-radius: 0 10px 10px 0;
  cursor: pointer;
}
input[type="submit"]:hover {
  background-color: #258;
}

上記のコードでは、内側のマージンを設定しています。入力ボックス、外枠、丸い角などのスタイルを使用すると、より美しく見えます。同時に、:focus 疑似クラスも定義しました。入力ボックスがフォーカスを取得すると、境界線のスタイルが変更され、ボックスのレンダリングとの関係が確立されます。送信ボタンのスタイルでは、マウスオーバー時のスタイルの変化を設定します。

概要

この記事の導入を通じて、HTML と JavaScript を使用して検索ボックスを作成する方法を学び、自動プロンプト機能や美化スタイルなどのいくつかの一般的なテクニックを習得しました。など。検索ボックスの実装原理はハイパーリンクの実装原理でもあり、最も簡単な実装方法は、HTML フォーム要素の送信機能を使用してフォーム データをサーバーに送信して処理することです。もちろん、JavaScript フックを使用して、フロントエンドでの部分処理のためにデータをインターセプトすることもできます。これにより、多くの場合、より高速で、より安全で、ビジネス ニーズをより適切に満たすことができます。これらのスキルを習得すると、Web ページがよりカラフルになると思います。

以上がHTML検索ボックスの作り方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。