HTML セットのドロップダウン ボックス

HTML ドロップダウン ボックスは、一般的に使用される Web フォーム コントロールです。ユーザーはドロップダウン メニューからオプションを選択できます。 HTML では、標準の HTML ドロップダウン ボックス要素を使用する方法や、JavaScript や CSS などの高度な技術を使用してドロップダウン ボックスの外観と機能をカスタマイズする方法など、ドロップダウン ボックスを設定するためのさまざまな方法が提供されています。

1. 標準 HTML ドロップダウン ボックスの設定

最も基本的な HTML ドロップダウン ボックスは、 要素と 要素を使用して作成されます。簡単なサンプル コードを次に示します。

<select name="fruit">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="orange">Orange</option>
  <option value="pear">Pear</option>
</select>

このコードは、「Apple」、「Banana」、「Orange」、「Pear」の 4 つのオプションを持つ「fruit」という名前のドロップダウン ボックスを作成します。各オプションは

要素で表され、value 属性はオプションの値を表し、テキストの内容はオプションのラベルです。

2. オプション グループの設定

実際の使用では、通常、ユーザーがより便利に見つけて選択できるように、同じ意味を持つオプションのグループをグループ化する必要があります。 HTML には、オプション グループを作成するための

要素が用意されています:

<select name="fruit">
  <optgroup label="Fresh Fruits">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="orange">Orange</option>
  </optgroup>
  <optgroup label="Dried Fruits">
    <option value="raisin">Raisin</option>
    <option value="date">Date</option>
  </optgroup>
  <optgroup label="Canned Fruits">
    <option value="peach">Peach</option>
    <option value="pear">Pear</option>
  </optgroup>
</select>

上記のコードは、合計 3 つのオプション グループを持つ「fruit」という名前のドロップダウン ボックスを作成します: 「Fresh Fruits」は新鮮な果物のグループを表します、「Dried Fruits」はドライフルーツのグループを表し、「Canned Fruits」は缶詰のフルーツのグループを表します。各オプション グループは

要素で表され、label 属性はグループ名を表します。各グループ内で、 要素を使用して特定のオプションを作成できます。

3. デフォルト オプションの設定

ページの読み込み時に、ユーザーがフォーム入力操作をより迅速に完了できるように、オプションをデフォルト オプションとして設定することが必要になる場合があります。 HTML では、

要素に selected 属性を指定して、デフォルトのオプションを設定します:

<select name="fruit">
  <option value="apple" selected>Apple</option>
  <option value="banana">Banana</option>
  <option value="orange">Orange</option>
  <option value="pear">Pear</option>
</select>

上記のコードは、「fruit」という名前のドロップダウン ボックスを作成し、その中で「Apple」オプションがデフォルトのオプション。デフォルト オプションの

要素に selected 属性を設定するだけであることに注意してください。

4. JavaScript または CSS を使用してドロップダウン ボックスをカスタマイズします

標準の HTML ドロップダウン ボックスはシンプルで使いやすいですが、その外観は比較的シンプルであり、ニーズを満たすことができません。上級ユーザーの。ドロップダウン ボックスの対話性と視覚効果を向上させるために、開発者は通常、JavaScript や CSS などのテクノロジを使用してドロップダウン ボックスをカスタマイズします。

1. ドロップダウン ボックスを設定するための JavaScript

JavaScript を通じて、ドロップダウン ボックス要素を動的に作成および変更して、カスタマイズされたさまざまなドロップダウン ボックス効果を実現できます。以下は、ドロップダウンの三角形のロゴをドロップダウン ボックスに追加し、マウスがホバーしているときに強調表示する単純な JavaScript コードの例です。

// 给下拉框添加下拉三角标志
var selectBox = document.getElementById("fruit");
var arrow = document.createElement("span");
arrow.innerHTML = "▼";
arrow.className = "arrow";
selectBox.parentNode.insertBefore(arrow, selectBox.nextSibling);

// 鼠标悬停时高亮显示
selectBox.addEventListener("mouseover", function() {
  this.style.backgroundColor = "#f0f0f0";
});

selectBox.addEventListener("mouseout", function() {
  this.style.backgroundColor = "#ffffff";
});

上記のコードでは、最初に document.getElementById() メソッドが使用されています。 「fruit」という名前の

要素を取得し、ドロップダウンの三角マークとして 要素を作成し、parentNode.insertBefore() メソッドを使用してドロップダウン ボックス要素の前に挿入します。次に、addEventListener() メソッドを使用して、マウスオーバー イベント リスナーとマウスアウト イベント リスナーをドロップダウン ボックスに追加し、マウスがホバーしたときと離れたときのドロップダウン ボックスの背景色をそれぞれ変更します。

2. CSS 設定ドロップダウン ボックス

CSS を使用すると、色、フォント、境界線の変更など、ドロップダウン ボックスのスタイルをより簡単に調整できます。他の属性。以下は、丸い角、影、トランジション効果を実装するための簡単な CSS コード例です。

select {
  border-radius: 5px;
  box-shadow: 2px 2px 5px #999;
  transition: all .2s ease-in-out;
}

select:hover {
  background-color: #f0f0f0;
}

上記のコードでは、border-radius プロパティを使用してドロップダウン ボックスの角の半径を設定し、box-シャドウ効果を追加するにはshadowプロパティを使用し、トランジション効果を実現するにはtransition属性を使用します。同時に、:hover 疑似クラスを使用して、マウスホバー状態のドロップダウン ボックスに他のスタイルを適用し、より良い視覚効果を実現します。

概要

HTML ドロップダウン ボックスは、一般的に使用される Web フォーム コントロールです。標準の HTML 要素、または JavaScript や CSS などのテクノロジを使用して、外観と機能をカスタマイズできます。開発者は、ユーザーエクスペリエンスとWebサイトの有効性を向上させるための特定のニーズに基づいて、自分に合った設定方法を選択できます。

以上がHTML セットのドロップダウン ボックスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。