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

公開日:

修正日:

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

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

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

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

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日版)でも同様です。廃止されてしまったのですね。

詳しくは後述しますが、唯一対応していた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種類のみが許容されています。

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

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

ブラウザの実装状況

仕様の話はここまで。ブラウザの実装がどのようになっているか、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 15Firefox 16Chrome 22IE 9IE 10Opera 12.0Safari 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/* 形式とは異なりファイル選択ウィンドウでのデフォルトは「すべてのファイル」となっており、プルダウンで変更しないと制作者の意図通りには絞り込めません。

オリジナル画像表示
図1:「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形式しか選択できない」と誤認してしまうかもしれません。

オリジナル画像表示
図2:「image/jpeg,image/png」が指定された場合のファイル選択ウィンドウ。2番目以降に指定した種類のファイルはプルダウンを変更しないと選択できない。
オリジナル画像表示
図3:比較参考までに IE10 の場合。デフォルトでJPEGとPNGが両方とも表示されている。

拡張子の指定には対応していませんが、未指定時と異なりファイル種類のプルダウンが非表示になります。これは空文字や規定外の文字列を記述した時と同じ挙動で、内部的には不正な値が指定されたと判断されているのかもしれません。

まとめ

3年前と比較して、たいぶブラウザの対応が進んでいますね。今後IE10が普及してゆけばaccept属性を使ったフォームが増えてゆくものと思いますが、一方でユーザーにとって分かりにくい挙動をするブラウザがあるなど制作上の注意が必要なケースも存在します。

今回書いた以外にも、たとえば type/* 形式が具体的にどの拡張子を認識するかもブラウザ(OSも?)によって違いがありますし、導入には慎重な検証が必要かと思います。