<datalist> - 略語

トップ > HTMLリファレンス > <datalist>

概要

項目説明
形式<datalist>~</datalist>
サポートH5 / e10 / Ch20 / Fx4 / Op9.5
カテゴリフローコンテンツ, フレージングコンテンツ
親要素フレージングコンテンツ を子要素に持てるもの
子要素フレージングコンテンツ(0個以上の option要素を子孫に持つ)、または 0個以上の option要素
タグの省略開始タグ:必須 / 終了タグ:必須

説明

datalist は <option> と組み合わせて入力項目の選択肢を定義します。input要素の label属性と、datalist要素の id属性で両者を結び付けます。<input type="text"> は入力のみ、<select> は選択のみ可能なのに対して、datalist付き inputは、入力と選択の両方を利用することが可能です。

Internet Explorer 10、Google Chrome 20、Firefox 4.0、Opera 9.5 でサポートされています。

属性

【一般属性】
属性意味
accesskey=keyH4/e4/Ch2/Fx2/Sa3/Op12/N6/i1。アクセスキーを指定します。
class=classH4/e3/Ch1/Fx1/Sa1/Op1/N4。クラスを指定します。
contenteditable=boolH5/e55/Ch11/Fx3/Op10.6/Sa3.2。要素を編集可能にします。
dir=dirH4/e5/Ch5/Fx4/Sa6/Op25/N6。文字の表示方向を指定します。
hiddenH5/e/Ch/Fx/Sa/Op。要素を非表示にします。
id=idH4/e3/Ch/Fx/Sa/Op/N4。ID を指定します。
lang=langH4/e4/Ch/Fx/Sa/Op/N6。言語を指定します。
spellcheck=boolH5。スペルをチェックします。
style=styleH4/e3/Ch/Fx/Sa/Op/N4。スタイルシートを指定します。
tabindex=nH4/e4/Ch/Fx/Sa/Op/N6。タブインデックスを指定します。
title=titleH2/e2/Ch/Fx/Sa/Op/N6。タイトルを指定します。
translate=titleH5。翻訳可否を指定します。

使用例

HTML
<label>
 好きなスポーツは?
 <input type="text" name="fav_sports" list="sports_list">
 <datalist id="sports_list">
  <option value="サッカー">
  <option value="野球">
  <option value="ゴルフ">
 </datalist>
</label>
表示

関連項目

<input><option>

Copyright (C) 2011-2015 杜甫々
初版:2011年6月4日 最終更新:2015年1月24日
http://www.tohoho-web.com/html/datalist.htm