input type="file"タグ
input(type="file")タグは、ファイル送信コントロールを作成するタグです。
解説
ファイル送信コントロールでファイルを選択することが可能です。
指定したファイルはフォーム送信(formのsubmit)でサーバへ送ることができます。
コンテンツ・モデル
カテゴリー (自カテゴリ) | フロー・コンテンツ フレージング・コンテンツ インタラクティブ・コンテンツ |
コンテキスト (親カテゴリ) | フレージング・コンテンツを許可する場所 |
コンテンツ・モデル (子カテゴリ) | なし |
属性
input(type="file")タグには以下の属性が指定できます。
属性 | 説明 |
---|---|
name | 名前を指定する(submit時にこの名前で送信される) (例)name="file01" |
accept | 送信できるMIMEタイプ(ファイルタイプ)を指定する (例)accept="text/plain" ※複数指定したい場合は、カンマ区切りで指定可です。 ※MIMEタイプ値は、MIMEタイプ一覧ページをご覧ください。 |
multiple | ファイルの複数選択可否を指定する (例)multiple |
required | 必須入力であることを指定する (例)required |
属性 | 説明 |
---|---|
class | クラスを指定する (例)class="hoge" |
id | IDを指定する (例)id="foo" |
style | スタイルを指定する (例)style="color:red;" |
その他のグローバル属性値については、グローバル属性をご覧ください。
サンプル
ファイル送信コントロールを作成する
<input type="file" name="file01">
ファイル送信コントロールを作成する(複数選択可)
<input type="file" name="file01" multiple>
ファイル送信コントロールを作成する(png, jpeg, gifのみ選択可能)
<input type="file" accept="image/png,image/jpeg,image/gif">
ファイル送信コントロールを作成する(画像のみ選択可能)
<input type="file" accept="image/*">
備考
- input type="file"タグを使用する時のformタグには、method="post" と enctype="multipart/form-data" を指定する必要があります。
関連項目
- form:送信フォームを作成する
- input type="text":テキスト入力欄を作成する
- input type="checkbox":チェックボックス欄を作成する
- input type="date":日付入力欄を作成する
- input type="time":時刻入力欄を作成する
- input type="month":月の入力欄を作成する
- input type="week":週の入力欄を作成する
- input type="radio":ラジオボタンを作成する
- input type="password":パスワード入力欄を作成する
- input type="hidden":隠しパラメータを作成する
- input type="file":ファイル送信コントロールを作成する
- input type="button":汎用ボタンを作成する
- input type="image":画像ボタンを作成する
- input type="number":数値入力欄を作成する
- input type="submit":送信ボタンを作成する
- input type="reset":リセットボタンを作成する
- input type="color":色の入力欄を作成する
- input type="email":e-mailの入力欄を作成する
- input type="url":URLの入力欄を作成する
- input type="tel":電話番号の入力欄を作成する
- input type="range":スライダー入力欄を作成する