このページについて
このページではHTMLで使う事ができるdatalistの機能と使い方を解説しています。
datalistタグ
datalistはその名の通り、データリストを定義する機能を持っています。表示するにはinputタグで使う必要があるんですが、それは後で解説します。
datalistと一緒に使うのはoptionタグというものになります。これはシンプルに書くと中身を定義するタグになります。
datalistの書き方
datalistはとりあえずリストのみを定義するという使い方になります。中身に関しては一つずつoptionタグで定義する必要があります。
<datalist>
<option value="コーヒー">
<optioon value="コーラ">
<optoon value="サイダー">
</datalist>こんな感じで、optionタグにそれぞれの値を付与していきます。
datalistとinputタグの関係性
datalistは単体で書いた場合は、ただリストを定義しただけで終わります。実際に画面に表示して、ユーザーの回答を受け付けるにはinputタグを使う必要があります。
inputタグで表示すると言っても、下準備が必要です。それは「listタグのlist属性の値と、datalistのid属性の値を一致させておく」ことです。実際にサンプルで書くと
<input list="pokemon" name="poke" id="pokelist">
<datalist id="pokemon">
<option value="カメックス">
<option value="カイオーガ">
<option value="インテレオン">
</datalist>このようにしておく必要があります。こうしないとinputタグで表示するリストとの関連付けができなくなるため、データリストを定義しても意味がなくなってしまいます。
まとめ
datalistは事前にデータリストを定義する機能を持っています。ただし定義するだけなので、呼び出して使う際にはinputタグを必要とします。その際もinputタグのlist属性と、datalistのid属性を一致させる必要があるので注意しておきましょう。
- HTMLの基礎
- HTMLってどんな言語？書き方やHTMLファイルの作成方法などを解説。
- HTMLタグで押さえておきたいポイント3選
- HTMLタグを使う上で必ず押さえておいてほしいポイント3つの解説です。
- HTMLタグと属性一覧
- HTMLタグと属性の一覧です。
- tableタグ生成ページ
- tableタグの基本形を生成できるページです。
- ulタグ・olタグ生成ページ
- ulタグとolタグの基本形を生成できるページです。