column

ITコラム

To Do List Time Management Reminder Prioritize Concept

プログラミングノウハウ

2017.02.24

HTML【フォーム】9~入力候補(datalist)

今回は、フォームで使われる部品の中で、リストで入力候補を表示するdatalist要素についてまとめたいと思います。

フォームについては、こちらのページもご参照下さい。

HTML 【フォーム】1 ~ フォームの概要とform要素の属性一覧
HTML 【フォーム】2 ~ form要素の使い方
HTML 【フォーム】3 ~ form要素で使う主な属性の使い方
HTML 【フォーム】4 ~ fieldset要素とlegend要素
HTML 【フォーム】5 ~ input要素(1)フォーム部品一覧
HTML 【フォーム】5 ~ input要素(2)テキスト入力部品
HTML 【フォーム】5 ~ input要素(3)ラジオボタンとチェックボックス
HTML 【フォーム】5 ~ input要素(4)日時の入力部品
HTML 【フォーム】5 ~ input要素(5)数値の入力部品
HTML 【フォーム】5 ~ input要素(6)レンジ(range)の入力部品
HTML 【フォーム】5 ~ input要素(7)色(color)の入力部品
HTML 【フォーム】5 ~ input要素(8)ファイル送信のための部品
HTML 【フォーム】5 ~ input要素(9)隠し情報(hidden)
HTML 【フォーム】5 ~ input要素(10)ボタン(submit、reset、button)
HTML 【フォーム】5 ~ input要素(11)画像ボタン(image)
HTML 【フォーム】6 ~ button要素で作るボタン
HTML 【フォーム】7 ~ ボタンの作り方比較とJavaScriptでアラート表示
HTML 【フォーム】8 ~ セレクトリスト
HTML 【フォーム】9 ~ 入力候補(datalist)( 本ページ )
HTML 【フォーム】10 ~ テキストエリア(textarea)
HTML 【フォーム】11 ~ ラベル(label)
HTML 【フォーム】12 ~ 出力欄(output)
HTML 【フォーム】13 ~ 数量や割合のゲージ(meter)
HTML 【フォーム】14 ~ 進捗状況を示すプログレスバー(progress)
HTML 【フォーム】15 ~ キーを発行して暗号化(keygen)
HTML 【フォーム】16 ~ CSSでフォームを整える

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1.datalist要素

datalist要素は、HTML5から新しく加わった要素です。
input要素のテキスト入力部品(type=”password”以外)で、ユーザが入力する際に入力候補をリスト表示するための要素です。
そのような性質上、必ずinput要素のテキスト入力部品(type=”password”以外)に対して使用します。

datalist要素は、datalist要素にid属性で名前を指定して、input要素のlist属性でそのidを呼び出して使用します。
リスト項目にはoption要素を使用するので、datalist要素はoption要素と一緒に使います。



上の表示に対するhtmlコードは、以下の通りです。

<input type="text" name="test" placeholder="ダブルクリックしてください" list="t_list">
<datalist id="t_list">
<option value="サンプル1">
<option value="サンプル2">
<option value="サンプル3">
</datalist>

datalist要素にt_listというid名を付けて、input要素のlist属性でt_listを指定しています。

使用する要素
 ●<datalist> ~ </datalist>
 ●<option>(</option>をつけてもOK)
datalist要素の属性 name id属性、その他のグローバル属性
option要素の属性 name value属性、label属性、グローバル属性

 

datalist要素が使える
フォーム部品
<input type=”text”> (1行のテキストフィールド)
<input type=”search”> (検索キーワードの入力フィールド)
<input type=”tel”>(電話番号)
<input type=”url”>(URL)
<input type=”email”>(メールアドレス)
<input type=”datetime”>(日時(タイムゾーン有))
<input type=”datetime-local”>(日時(タイムゾーン無))
<input type=”date”> (日)
<input type=”month”>(月)
<input type=”week”> (週)
<input type=”time”> (時間(タイムゾーン無))
<input type=”number”>(数値)
<input type=”range”> (数値(割合))
<input type=”color”> (色)

▲目次へ戻る

2.入力候補リスト

●<datalist>で作る入力候補リストの基本形は、次のような表示になります。


上の表示に対するhtmlコードは、以下の通りです。

<input type="text" name="test" placeholder="ダブルクリックしてください" list="t_list">
<datalist id="t_list">
<option value="サンプル1">
<option value="サンプル2">
<option value="サンプル3">
</datalist>

冒頭で紹介したものと同じです。

<datalist>~</datalist>内に、必ずoption要素のvalue属性を使ってリスト項目を指定します。
option要素は、上の例のように終了タグ無しでもOKですし、終了タグを付けてもOKです。
option要素で設定する選択肢のテキストは、必ずvalue属性で指定します。そうすると、datalist要素に未対応のブラウザで、選択肢が意図しない場所に表示されるのを防ぐことができます。

入力候補リストを表示させたいinput要素と、id名で関連付けを行います。
datalist要素にid属性で名前を付けて、input要素のlist属性でそのid名を指定します。

●datalist要素の中にselect要素を入れることで、未対応のブラウザでも選択してもらうことができます。




htmlコードは、以下の通りです。

<input type="text" name="test" placeholder="ダブルクリックしてください" list="t_list2">
<datalist id="t_list2">
<select name="s_test">
  <option value="choice1">選択肢1</option>
  <option value="choice2">選択肢2</option>
  <option value="choice3">選択肢3</option>
  <option value="choice4">選択肢4</option>
  <option value="choice5">選択肢5</option>
</select>
</datalist>

datalist要素に対応したブラウザではselect要素が表示されず、未対応ブラウザではselect要素で選択できるようになります。

●datalist要素の中に、テキストなどの代替コンテンツを入れる事でも、未対応のブラウザ対策になります。

※次の中から選んでください。
選択肢1
選択肢2
選択肢3

htmlコードは、以下の通りです。

<input type="text" name="test" placeholder="ダブルクリックしてください" list="t_list3">
<datalist id="t_list3">
  <option value="選択肢1"></option>
  <option value="選択肢2"></option>
  <option value="選択肢3"></option>
※次の中から選んでください。<br>
選択肢1<br>
選択肢2<br>
選択肢3<br>
</datalist>

※印以下が代替コンテンツです。
datalist要素に対応したブラウザでは、この代替コンテンツは表示されず、未対応ブラウザでは表示されます。

●option要素に、label属性を指定することもできます。


htmlコードは、以下の通りです。

<input type="text" name="test" placeholder="ダブルクリックしてください" list="t_list4">
<datalist id="t_list4">
<option value="選択肢1" label="ラベル1">
<option value="選択肢2" label="ラベル2">
<option value="選択肢3" label="ラベル3">
</datalist>

label属性の値が表示用に、入力フィールドへの挿入にはvalue属性の値が使われるはずですが、ブラウザによってはどちらも表示されるようです。
いずれにしても、入力フィールドに入るのは value属性の値です。

▲目次へ戻る

無料説明会

SHARE

最新記事

無料説明会に参加してみる

INTERNOUS,inc. All rights reserved.

無料オンライン説明会へ