[52] 入力候補のリストを作ろう<datalist>

最終更新日:-0001年11月30日  (初回投稿日:2013年09月25日)

<datalist>要素は、<input>要素のテキスト入力部品(ただしtype="password"以外)の、
入力候補をリストで出す ための要素。
単独で使う事は無く、必ず<input>のテキスト入力部品(type="password"以外)とセットです。
HTML5から新しく加わった要素です。

<datalist>のほうに id属性で名前を付けておいて、<input>でそのidを list属性で呼び出します。
リスト項目には<option>要素を使用。(<datalist>は<option>要素と一緒に使うってこと)

具体的にはこんなかんじ。コレ ↓ は単なるテキストフィールドですが、Crome と Firefoxではダブルクリック、Operaはクリックで、リストが出ます。

<input type="text" name="name" placeholder="ダブルクリックしてください" list="exlist">
<datalist id="exlist">
<option value="サンプル1">
<option value="サンプル2">
<option value="サンプル3">
</datalist>
使用する要素 <datalist> 〜 </datalist>
<option> (</option>をつけてもOK)
datalistの属性 id属性、その他のグローバル属性
optionの属性 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"> (色)

<datalist>で入力候補のリストを出そう(基本形)

●サンプル1
冒頭でも紹介している基本形です。

<datalist>〜<datalist>の中に、必ず<option>要素の value属性を使ってリスト項目を指定。
リストを出したい<input>要素とは id名で関連づけます。
id名は<input>要素では list属性で呼び出します。

<input type="text" name="name" placeholder="ダブルクリックしてください" list="sample1">
<datalist id="sample1">
<option value="リスト項目1">
<option value="リスト項目2">
<option value="リスト項目3">
</datalist>

<option>要素は、上の例のように終了タグ</option>無しでもOKですし、
下のようにつけてもOK。
ただし、選択肢のテキストは必ず value属性で指定します。
<datalist>要素に未対応のブラウザで、選択肢が最初っから表示されてしまうのを防ぐためです。

<input type="text" name="name" placeholder="ダブルクリックしてください" list="sample1">
<datalist id="sample1">
<option value="リスト項目1"><!--この間にテキストを入れちゃダメ--></option>
<option value="リスト項目2"></option>
<option value="リスト項目3"></option>
</datalist>

前回の<select>要素と同じように <option>要素を使うのですが、
こっちは<option>〜</option>の間にテキストは入ちゃダメって、ややこしいですね。
<datalist>のときは、終了タグ(</option>)は使わないことにしたほうがイイかも。

未対応ブラウザへの対策_2件

●サンプル2
<datalist>〜</datalist>の中に<select>要素を入れることで、未対応のブラウザでも選択してもらうことができます。
<datalist>に対応したブラウザでは<select>要素が表示されず、未対応ブラウザでは<select>要素で選択できるようになります。

リストの表示は<select>内の<option>〜</option>間のテキストですが、実際に選択されるのは<option>のvalue属性の値です。
HTMLソースを見るとよくわかります ↓

<input type="text" name="name" placeholder="ダブルクリックしてください" list="sample2">
<datalist id="sample2">
<select name="name">
  <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>

●サンプル3
同じく未対応のブラウザ対策で、<datalist>〜</datalist>の中に、テキストなどの代替コンテンツを入れる事もできます。
<datalist>に対応したブラウザではこの内容が表示されず、未対応ブラウザでは表示されます。

★次の3つから選んでください。
http://www.google.co.jp/
http://www.yahoo.co.jp/
http://www.rakuten.co.jp/

HTMLソースはこちら ↓ 青バックの部分が代替コンテンツです。

<input type="text" name="name" placeholder="ダブルクリックしてください" list="sample2" size="30">
<datalist id="sample2-2">
  <option value="http://www.google.co.jp/"></option>
  <option value="http://www.yahoo.co.jp/"></option>
  <option value="http://www.rakuten.co.jp/"></option>
★次の3つから選んでください。<br>
http://www.google.co.jp/<br>
http://www.yahoo.co.jp/<br>
http://www.rakuten.co.jp/<br>
</datalist>

これ、<form>の中に置かなくてもOK

<datalist>要素は、<form>要素の中に入っていなくても良いんですって。
<input>の list属性で<datalist>要素の id名を呼び出すから。
同じ理由で、1つの<datalist>を複数の<input>で利用することも可能です。

●サンプル4
このサンプルでは、2つの<input>要素(type="search" と type="text" )で同じ<datalist>を共有しています。<input>要素が2つ以上でも、type が同じでも同じじゃなくてもOK。
また、このサンプルでは <datalist>を<form>の外に出しています。

支店を検索する :

ご利用中の支店 :

HTMLソースはこちら ↓

<form>
<p>支店を検索する :
<input type="search" name="Serch" placeholder="ダブルクリックしてください" list="sample3">
 <input type="submit" value="検索">
</p>
<p>ご利用中の支店 :
<input type="text" name="mybranch" placeholder="ダブルクリックしてください" list="sample3">
<input type="submit" value="送信">
</p>
</form>
<!-- ↓ 出てる -->
<datalist id="sample3">
<option value="新宿支店"></option>
<option value="渋谷支店"></option>
<option value="恵比寿支店"></option>
<option value="品川支店"></option>
</datalist>

label属性を使ってみた例

<option>要素に label属性を使うこともできます。
label属性の値が表示用に、入力フィールドへの挿入には value属性の値が使われる、はずですが、
ブラウザによってはどっちも表示されるようです。(Opera, Chrome)
いずれにしても、入力フィールドに入るのは value属性の値です。

●サンプル5

ご利用中の支店 :

HTMLソースはこちら ↓

<p>ご利用中の支店 :
<input type="text" name="mybranch" placeholder="ダブルクリックしてください" list="sample4">
<input type="submit" value="送信">
</p>
<datalist id="sample4">
<option value="新宿支店" label="新宿">
<option value="渋谷支店" label="渋谷">
<option value="恵比寿支店" label="恵比寿">
<option value="品川支店" label="品川">
</datalist>

次回予告

次回は「複数行のテキストフィールド」を作る<textarea>要素です。
<input>要素では1行用のテキストフィールドを作りましたが、
<textarea>要素は、「文章」を入力するため、高さ(行数)があるテキストフィールドになります。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.