“input”要素~“accept”属性

“accept”属性について

“accept”属性は“type="file"”を指定した“input”要素で表されるファイルの送信欄がフォームで送信することができるファイルの種類を指定します。

“accept”属性の値には複数のファイル形式を指定することができます。

ブラウザによっては“accept”属性の値によって異なるファイルの選択手段をユーザーに提供する場合があります。例えば、モバイルブラウザでは“accept”属性で画像ファイルを受け入れるように指定している場合にフォトアルバムだけでなくカメラやその他のアプリを画像ファイルを選択する手段として提案する場合があります。

“accept”属性を指定しない場合やブラウザが非対応の場合にはすべてのファイル形式が送信できます。

指定できる値

値はコンマ(“,”)で区切ることで複数記述することができます。

HTMLの仕様書ではMIMEタイプだけでなく対応する拡張子も一緒に記述することが推奨されています。

サンプルコード

<form method="post" action="sampleform.php" enctype="multipart/form-data" target="_blank">

<fieldset>

<legend>猫の情報</legend>
<p><label>写真：<input type="file" name="name" accept=".png,.jpg,.jpeg,image/png,image/jpeg"></label></p>
<p><label>経歴：<input type="file" name="history" accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"></label></p>
<p><label>お声：<input type="file" name="meow" accept="audio/*"></label></p>

</fieldset>
<p><button type="submit">送信する</button></p>

</form>

猫の情報

写真：

経歴：

お声：

送信する

＊このフォームは送信できません。