HTML5時代の`input`要素の`accept`属性について

投稿: 2012年10月1日
最終更新: 2015年2月1日

3年前にform要素、input要素のaccept属性という記事を書いたのですが、ブラウザの対応状況がかなり変わってきたことと、以前の記事ではHTML5に言及していなかったので、改めてまとめ直してみます。

2017年8月31日追記記事公開から5年ほど経ち、また内容が古くなってきたので<input accept> の対応状況 2017を書きました。より新しい情報はそちらを参照ください。

form要素のaccept属性はHTML5で廃止
HTML5で指定できるaccept属性値
ブラウザの実装状況
まとめ

`form`要素の`accept`属性はHTML5で廃止

HTML4.0のDTDでは、accept属性はinput要素でのみ定義されており、form要素に対するaccept属性は仕様書本文で記述されるにとどまっていました。

17.3 The FORM element （HTML 4.0 Specification）

1999年12月のHTML4.01勧告で正式にDTDに組み込まれています。

HTML5のW3C仕様では、当初（2008年6月10日版まで）はフォーム関連はWeb Forms 2.0(www.whatwg.org) を参照せよとなっていましたが、2009年2月12日版より仕様書本体に記述されるようになりました。ところがform要素にはaccept属性に関する記述はなく、これは現在の最新の草案（2012年3月29日版）でも同様です。廃止されてしまったのですね。

4.10.3 The form element （HTML5）

詳しくは後述しますが、唯一対応していたOperaが対応を止めてしまったので、主要ブラウザで認識するものはありません。HTMLのバージョンに関わらずform要素への指定は避けた方がよいでしょう。

HTML5で指定できる`accept`属性値

input要素へのaccept属性に指定できる値は、Web Forms 2.0では2.15 Extensions to file upload controls(www.whatwg.org) で規定されているとおり、 */* あるいはsubtypeを限定しない type/* の形式も可能でした。

一方、HTML5へ統合された現在では、MIMEタイプのほかは audio/*, video/*, image/* の3種類のみが許容されています。

File Upload state (type=file) （HTML5）

WHATWGのHTML仕様では、W3Cで規定されたものに加えて FULL STOP （ピリオド）から始まる文字列により拡張子を指定することもできます。というより、MIMEタイプと併記することが推奨されています。

4.10.7.1.18 File Upload state (type=file) （HTML Standard）(www.whatwg.org)

2012年10月26日追記2012年10月25日付けのアップデートで拡張子の指定がW3Cの仕様にも取り込まれました。

ブラウザの実装状況

仕様の話はここまで。ブラウザの実装がどのようになっているか、input要素に下記の8パターンを指定してテストしました。

MIMEタイプを1つ指定（image/png）: <input type="file" accept="image/png"/>
MIMEタイプを複数指定（image/jpeg,image/png）: <input type="file" accept="image/jpeg,image/png"/>
HTML5で規定されている type/* 形式を1つ指定（image/*）: <input type="file" accept="image/*"/>
HTML5で規定されている type/* 形式を複数指定（audio/*,video/*）: <input type="file" accept="audio/*,video/*"/>
HTML5で規定されていない type/* 形式を指定（text/*）: <input type="file" accept="text/*"/>
拡張子を1つ指定（.jpg）: <input type="file" accept=".jpg"/>
拡張子を複数指定（.jpg,.jpeg）: <input type="file" accept=".jpg,.jpeg"/>
MIMEタイプと拡張子を併記（.jpg,.jpeg,image/jpeg）: <input type="file" accept=".jpg,.jpeg,image/jpeg"/>

結果は以下の通りです。

パターン	Firefox 15	Firefox 16	Chrome 22	IE 9	IE 10	Opera 12.0	Safari 5.1
`image/png`	未対応	対応	対応	未対応	対応	対応	未対応
`image/jpeg,image/png`	未対応	対応	対応	未対応	対応	対応	未対応
`image/*`	対応	対応	対応	未対応	対応	対応	未対応
`audio/,video/`	未対応	対応	対応	未対応	対応	対応	未対応
`text/*`	未対応	未対応	未対応	未対応	未対応	対応	未対応
`.jpg`	未対応	未対応	対応	未対応	対応	不正値扱い?	未対応
`.jpg,.jpeg`	未対応	未対応	対応	未対応	対応	不正値扱い?	未対応
`.jpg,.jpeg,image/jpeg`	未対応	拡張子は無視	対応	未対応	対応	不正値扱い?	未対応

すべてWindows版です。Firefox 16 はベータ版、IE 10 は Windows 8 RTM に含まれるバージョンで確認。また Safari 6 は手元に環境がないので未確認です。

FirefoxとOperaに関してはより詳しく見てみます。

Firefox

2011年リリースのバージョン4より限定的ながら対応しています。具体的には audio/*, video/*, image/* のいずれか一つを指定したときのみ制限が有効になり、以下に挙げるようなそれ以外のケースは認識せず何も指定しない場合と同じになります。

MIMEタイプの指定（image/png など）
type/* 形式を複数指定（audio/*,video/* など）
HTML5で規定されていない type/* 形式（text/* など）

なお、MDNのブラウザ毎の互換性表(developer.mozilla.org) に記載されていますが、次期バージョン16からMIMEタイプの指定もサポートされるようです。ベータ版で確認したところ、確かに対応しているのですが、type/* 形式とは異なりファイル選択ウィンドウでのデフォルトは「すべてのファイル」となっており、プルダウンで変更しないと制作者の意図通りには絞り込めません。

オリジナル画像 — 「image/jpeg,image/png」が指定された場合の Firefox 16β におけるファイル選択ウィンドウ

Opera

Operaは古くからform要素、input要素の指定ともに対応していたのですが、2010年リリースのバージョン10.50でform要素の対応が廃止され、今はinput要素への指定のみ効果があります。

HTML5の仕様で規定されていない text/* や application/* なども認識するのが特徴です。

またChromeやIE10と異なり、複数の値を指定したときのファイル選択ウィンドウでは、デフォルトでは1番目に記述した種類のファイルのみを表示し、2番目以降のファイルを選択するにはプルダウンで変更する必要があります。すなわち、image/jpeg,image/png という指定をすると、ユーザーはうっかり「JPEG形式しか選択できない」と誤認してしまうかもしれません。