Skip to content

Latest commit

 

History

History
199 lines (159 loc) · 7.26 KB

index.md

File metadata and controls

199 lines (159 loc) · 7.26 KB
title slug l10n
<datalist>: HTML データリスト要素
Web/HTML/Element/datalist
sourceCommit
942a529383ee7ee3996fb234187641c08935f3ff

{{HTMLSidebar}}

<datalist> は HTML の要素で、この要素には {{HTMLElement("option")}} 要素の集合が含まれ、他のコントロール内で選択できる許容または推奨オプションを表します。

{{InteractiveExample("HTML Demo: <datalist>", "tabbed-standard")}}

<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
  <option value="Chocolate"></option>
  <option value="Coconut"></option>
  <option value="Mint"></option>
  <option value="Strawberry"></option>
  <option value="Vanilla"></option>
</datalist>
label {
  display: block;
  margin-bottom: 10px;
}

<datalist> 要素をコントロールに結びつけるには、id 属性で固有の識別子を与え、同じ識別子を値とした list 属性を {{HTMLElement("input")}} 要素に追加します。 この動作は、特定の種類の {{HTMLElement("input")}} だけが対応しており、また、ブラウザーの種類によっても異なる場合があります。

メモ: <option> 要素は内部コンテンツとして、また value 属性と label 属性に値を格納することができます。ドロップダウンメニューでどちらが表示されるかはブラウザーに依存しますが、クリックされたときに制御フィールドに入力されるコンテンツは常に value 属性に由来します。

属性

この要素には、すべての要素が持つグローバル属性以外の属性はありません。

例

テキスト型

{{HTMLElement("input/text", "text")}}、{{HTMLElement("input/search", "search")}}、{{HTMLElement("input/url", "url")}}、{{HTMLElement("input/tel", "tel")}}、{{HTMLElement("input/email", "email")}}、{{HTMLElement("input/number", "number")}} の各型は、ユーザーがコントロールをクリックまたはダブルクリックすると、ドロップダウンメニューで表示されます。 通常、コントロールの右側には、定義済みの値があることを示す矢印もあります。

<label for="myBrowser">一覧からブラウザーを選択して下さい:</label>
<input list="browsers" id="myBrowser" name="myBrowser" />
<datalist id="browsers">
  <option value="Chrome"></option>
  <option value="Firefox"></option>
  <option value="Opera"></option>
  <option value="Safari"></option>
  <option value="Microsoft Edge"></option>
</datalist>

{{EmbedLiveSample("Textual_types", 600, 40)}}

日付と時刻型

{{HTMLElement("input/month", "month")}}、{{HTMLElement("input/week", "week")}}、{{HTMLElement("input/date", "date")}}、{{HTMLElement("input/time", "time")}}、{{HTMLElement("input/datetime-local", "datetime-local")}} の各型は、日付や時刻を便利に選択できるようなインターフェイスを表示することができます。 あらかじめ定義された値をそこに示すことで、ユーザーはすばやく制御値を満たすことができます。

Note

type に対応していない場合、単純なテキストフィールドを作成する text 型が代わりに使用されます。このフィールドは推奨値を正しく認識し、ドロップダウンメニューでユーザーに表示します。

<input type="time" list="popularHours" />
<datalist id="popularHours">
  <option value="12:00"></option>
  <option value="13:00"></option>
  <option value="14:00"></option>
</datalist>

{{EmbedLiveSample("Date_and_Time_types", 600, 40)}}

範囲型

{{HTMLElement("input/range", "range")}} 型の推奨値は、ユーザーが簡単に選択できるように目盛りの羅列で示されます。

<label for="tick">Tip amount:</label>
<input type="range" list="tickmarks" min="0" max="100" id="tick" name="tick" />
<datalist id="tickmarks">
  <option value="0"></option>
  <option value="10"></option>
  <option value="20"></option>
  <option value="30"></option>
</datalist>

{{EmbedLiveSample("Range_type", 600, 70)}}

色型

{{HTMLElement("input/color", "color")}} の種類は、あらかじめ定義された色をブラウザーが提供するインターフェイスで示すことができます。

<label for="colors">色を選択して下さい（できれば赤系）:</label>
<input type="color" list="redColors" id="colors" />
<datalist id="redColors">
  <option value="#800000"></option>
  <option value="#8B0000"></option>
  <option value="#A52A2A"></option>
  <option value="#DC143C"></option>
</datalist>

{{EmbedLiveSample("Color_type", 600, 70)}}

パスワード型

仕様書では <datalist> を {{HTMLElement("input/password", "password")}} 型にリンクすることができることになっていますが、セキュリティ上の理由から、対応しているブラウザーはありません。

<label for="pwd">パスワードを入力:</label>
<input type="password" list="randomPassword" id="pwd" />
<datalist id="randomPassword">
  <option value="5Mg[_3DnkgSu@!q#"></option>
</datalist>

{{EmbedLiveSample("Password_type", 600, 40)}}

技術的概要

コンテンツカテゴリー フローコンテンツ、記述コンテンツ
許可されている内容 記述コンテンツ、または 0 個以上の {{HTMLElement("option")}} 要素のどちらか
タグの省略 なし。開始タグと終了タグの両方が必須です。
許可されている親要素 記述コンテンツを受け入れるすべての要素
暗黙の ARIA ロール listbox
許可されている ARIA ロール なし
DOM インターフェイス {{domxref("HTMLDataListElement")}}

仕様書

{{Specifications}}

ブラウザーの互換性

{{Compat}}

関連情報

  • {{HTMLElement("input")}} 要素、特に list 属性
  • {{HTMLElement("option")}} 要素