入力で複数選択させるには、multiple属性を付けます。
本項執筆時点では、multiple属性はFirefoxのバージョン3.5以降、Safariの4以降、Chromeの3以降、Operaの11以降でないと正常に動作しないようです。
参加者:
参加者:<input type="text" name="text" list="names" multiple>
<datalist id="names">
<option value="ウルトラマン">
<option value="スーパーマン">
<option value="すっぱマン">
<option value="タロウ">
</datalist>
以下は入力属性のtypeでfileを指定した場合の例です。multiple属性を付けるとファイル選択一覧画面からShiftキーを押しながら複数ファイルを選択できるようになります。
HTML5ではjavascriptから選択されたファイルへのアクセスも簡単に行えます。
下の例は、ファイルを複数選択後にボタンを押すと選択したファイル名がjavascriptにより一覧表示されます。
<input type="file" name="files[]" id="file" multiple onchange="getFiles()"><br>
<span id="disp"></span>
<script type="text/javascript">
function getFiles() {
var files = document.getElementById("file").files;
var disp = document.getElementById("disp");
disp.innerHTML = "";
for(var i=0 ; i < files.length; i++) {
var file = files[i];
disp.innerHTML += file.name + " : " + file.size/1000 + " KB<br>";
}
}
</script>
0 件のコメント:
コメントを投稿