Tweet

Pocket

フォームの入力を補助する機能を2回にまとめてご紹介します。
今日は、その2です！

◆ multiple属性
multiple属性を指定した入力欄には複数の入力を行うことができます。
書式は「multiple」「multiple=”multiple”」「multiple=””」のいずれかで指定します。

【使用例】

<input type="text" name="sports" list="sports" multiple>
<datalist id="sports">
　　<option value="野球">
　　<option value="サッカー">
　　<option value="バスケ">
</datalist>

最初のテキストを入力or入力候補から選択した後、カンマを入れると次の入力候補が選択できます。
ファイル選択の入力欄では以下のように使用します。

【使用例】

<input type="file" name="files[]" id="file" multiple>

ファイル選択でmultipleを使用する場合は、ファイル選択時にShiftキーを押しながら複数のファイルを選択します。

HTML5より「files」プロパティが導入され、JavaScriptからも選択されたファイルにアクセスできるようになりました。
multiple属性で複数のファイルを選択する際の簡単なデバッグの例は以下になります。

【使用例】

<input type="file" name="files[]" id="file" multiple onchange="checkFiles()">

<script type="text/javascript">
　　function checkFiles(){
　　　　// 選択されたファイルにアクセス
　　　　var fs = document.getElementById("file").files;
　　　　var disp = document.getElementById("disp");
　　　　disp.innerHTML = "";
　　　　for(var i=0; i<fs.length; i++){
　　　　　　var f = fs[i];
　　　　　　// ファイル名とサイズを表示
　　　　　　disp.innerHTML += f.name + " : " + f.size/1000 + " KB<br>";
　　　　}
　　}
</script>

<span id="disp"></span>

上記の使用例で選択されたファイル名、サイズを表示します

【対応ブラウザ】
FireFox3.5以降、Safari4以降、Chrome3以降

◆ placeholder属性
placeholder属性は、入力欄の中に簡単な説明文や入力例を表示させる属性です。type属性が「email」「password」「search」「tel」「text」「url」の場合に使用できます。

【使用例】

<input type="tel" name="tel" pattern="\d{2,4}-\d{2,4}-\d{4}" required placeholder="045-123-4567">

上記の例では入力欄に電話番号の入力例として「045-123-4567」が表示されます。入力欄に文字を入力するとplaceholder属性で指定した文字列の表示は消えます。

【対応ブラウザ】
Safari3以降、Mobile Safari3以降、Chrome3以降