HTMLでドロップダウンリストを作成する方法

HTMLの最も単純なドロップダウンリストは、selectタグを使用して簡単に作成できます。これはコンテナタグで、オプションタグが埋め込まれています。リストタグを指定します。

リストにはいくつかのオプションがありますドロップダウンリスト(メインフィールドをクリックするかカーソルをポイントした後にドロップアウトするオプション)と複数選択肢リスト(ユーザーが複数の項目を選択できる)の選択タグを使用して作成します。最初のものはより一般的です、彼らは現代のサイトのナビゲーションの重要な要素です。たとえば、複数の製品特性を選択する必要があるディレクトリで、複数選択のドロップダウンリストを適用できます。

ドロップダウンリスト

ユニバーサル属性と特殊属性を使用して、リストの外観とプロパティを変更できます。

selectタグの属性

1.複数 - 複数の選択肢を設定します。

2。 サイズは、 - それは高さ、リストに表示行数を指定します。そして、すべてが属性が複数であるかどうかによって異なります。もしそうなら、あなたは、すべてのオプションが表示されます複数のユーザーの存在下で、サイズのベッドが指定されていないが、複数が欠落している場合、一行のみであることが示され、他のユーザーが右側にエレベーターのアイコンをクリックしたときに、読み取ることができます。サイズの高さが指定され、それはバーが表示され、右スクロールのオプションの数より少ない場合。

3.名前は名前です。ドロップダウンリストはそれなしで実行できますが、サーバー上のハンドラと対話する必要があります。原則として、その名前はまだ示しています。

selectタグにはオプションタグとは異なり、必須の属性はありません。

htmlドロップダウンリスト

ネストされたオプションタグの属性

  1. 選択済み - リスト項目を強調表示します。複数の属性が指定されている場合、ユーザーは複数の項目を選択できます(上記参照)。
  2. 値は値です。この属性は必須です。 Webサーバーは、ユーザーが選択した項目を理解している必要があります。
  3. ラベル。 この属性を使用すると、長すぎるリスト項目を短くすることができます。たとえば、タグに指定されている「ミラノ - ロンバルディの管理センター」オプションの代わりに、「ミラノ」と表示されます。北イタリア "。この属性は、リスト内の項目をグループ化するためにも使用されます。

リストの幅は、リスト内の最も広いテキストの長さに応じてデフォルトで設定されます。もちろん、HTMLスタイルを使用して幅を変更できます。

他の方法でのドロップダウンリスト

これはCSSを使用して行うことができます。たとえば、このリストは、カーソルをページ要素の上に置くと表示されます。リストを作成するための優れた機会は、Jqueryライブラリによって単純化されたJavaScriptによって提供されます。このライブラリに接続されているドロップダウンリストは、カスケードなど、非常に複雑になることがあります。それはあなたが以下のリストを表示しますリスト内の項目を選択すると、例えば、「婦人服」メニューは、(あなたが服のドロップ種類を置くと)種の一つは、例えば、「トップス」とき、その後、ドロップダウンリストを要素とがあり、次のとおりです。ジャケット、公園、コート、ショートコート、毛皮コートなど

jqueryドロップダウンリスト

我々は、主な方法を表面的に列挙した。そのヘルプを使用してドロップダウンリストを作成することができます。もちろん、HTMLにはCSSやJavaScriptのニュアンスがあり、リストの機能や外観を変更することができます。