このページについて
このページではHTMLで使う事ができるacceptの機能と使い方について解説しています。
accept属性
accepetはinputタグで使う事ができる属性になります。この属性はさらに限定的で、type属性がfileの時のみ使う事ができます。
というのもこのacceptは「ファイルのアップロード時にサーバーが受け付けるファイルの種類を指定する」という機能を持っています。この属性は検証ツールとして使うことはできませんが、アップロードするファイルの種類を指定することでユーザーとしてもアップロードするファイルに困りませんし、受け入れる側のサーバーの処理も受け入れるファイルがある程度わかっているので処理を書きやすいと思います。
accept属性の書き方
acceptはファイルの色々な条件を設定する事ができる反面、書ける事が多い属性でもあります。基本的には「受け入れる拡張子」か、「受け入れるファイルの種類」を指定します。どちらか1つでもOKですし、両方とも指定してもOKです。
<input type="file" accept="条件">条件のところに使えるものが以下になります。
拡張子
拡張子ごとに受け付けるファイルを限定することができます。アップロードしてほしいファイルの拡張子を書くだけでOKです。複数ある場合は、カンマで区切ります。
<input type="file" accept=".png, .ogg" />かなり見辛いと思うのでスペースキーで間隔を空けましたが、実際には無くてもOKです。
音声ファイル
音声ファイルならなんでもOKという場合、拡張子指定では無くaudio/*を使います。
<input type="file" accept="audio/*" />こうすることでmp3でもoggでもwavでも扱えるようになります。
動画ファイル
動画ファイルならなんでもOKという場合、拡張子指定では無く、video/*を使います。
<input type="file" accept="video/*" />mp4でもその他でも扱えるようになります。
画像ファイル
画像ファイルならなんでもOKという場合、拡張子指定では無く、image/*を使います。
<input type="file" acept="image/*" />pngでもjpgでも扱えるようになります。
まとめ
acceptはファイルアップロード時に受け付けることのできるファイルの種類を限定することができます。その指定方法には色々ありますが、拡張子で指定するのかファイルの種類で指定するのか、用途によって使い分けましょう。
- HTMLの基礎
- HTMLってどんな言語？書き方やHTMLファイルの作成方法などを解説。
- HTMLタグで押さえておきたいポイント3選
- HTMLタグを使う上で必ず押さえておいてほしいポイント3つの解説です。
- HTMLタグと属性一覧
- HTMLタグと属性の一覧です。
- tableタグ生成ページ
- tableタグの基本形を生成できるページです。
- ulタグ・olタグ生成ページ
- ulタグとolタグの基本形を生成できるページです。