HTML5をマスターする

プレースホルダーの表示

入力欄にプレースホルダーを表示するには、placeholder属性を指定します。
プレースホルダーとは、フォーカスが当たっていない時に表示される簡単な入力例やヘルプのようなものです。

名前：

名前：<input type="text" name="name" placeholder="名前を入力します。">

複数ローカルファイルの選択

入力で複数選択させるには、multiple属性を付けます。
本項執筆時点では、multiple属性はFirefoxのバージョン３．５以降、Safariの４以降、Chromeの３以降、Operaの１１以降でないと正常に動作しないようです。

参加者：

参加者：<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>

ローカルファイルの選択

ファイル名を入力するには、input要素のtype属性にfileを指定します。

ファイル名：

ファイル名：<input type="file" name="file">

入力候補の指定

テキストボックスなどで入力候補を指定するには、list属性とdatalist要素を使います。
datalist要素で予め一覧表示させる項目を指定しておき、list属性で利用する候補一覧のidを指定します。
本項執筆時点では、list属性及びdatalist要素はＯｐｅｒａのバージョン９以降でないと正常に動作しないようです。

美味しかった料理：

美味しかった料理：<input type="text" name="dish" list="popular">
<datalist id="popular">
    <option value="冷やし中華">
    <option value="餃子定食">
    <option value="野菜炒め">
    <option value="チャーハン">
</datalist>

オートフォーカス

input要素の属性にautofocusを指定すると、ページが表示される時に自動的にフォーカスが当たるようになります。

メールアドレス：

メールアドレス：<input type="email" name="email" autofocus>

オートコンプリートの有効／無効化

input要素の属性にautocompleteを指定すると、オートコンプリートを有効・無効化できます。オートコンプリートとは、過去の入力値を自動的に表示してくれる機能です。
下の例では、電話番号入力欄に過去に値を入力したことがあれば自動表示されるようになります。off指定でオートコンプリート無効化です。
本項執筆時点では、autocomplete属性はＯｐｅｒａのバージョン９以降でないと正常に動作しないようです。

電話番号：

電話番号：<input name="tel" type="tel" autocomplete="on">

画面サイズ

画面サイズをスマートフォン等の機種毎の画面大きさに合わせるには、meta要素でviewportを指定します。

<meta name=”viewport” content=”width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=3.0” />

プロパティ	内容	範囲	デフォルト値
width	幅	200-10000px	980px
height	高さ	223-10000px	980px
minimum-scale	拡大率の下限	0〜10	0.25
maximum-scale	拡大率の上限	0〜10	10
initial-scale	初回アクセス時の拡大率	minimum-scale〜maximum-scale	1
user-scalable	ユーザーに拡大縮小操作を許可	yes / no	yes

2011/07/25