<input type="file">
| ブラウザ |
|
|---|---|
| 分類 | |
| 要素 |
input要素に type="file" を指定すると、ファイルをアップロードするための入力欄を作成することができます。
- SafariとChromeでは、入力欄の代わりにテキストが表示されます。
<input type="file" name="example" size="30">
| 属性 | 値 | 説明 |
|---|---|---|
type="" |
file |
ファイルの送信欄を作成 |
name="" |
文字列 | 部品の名前を指定 |
size="" |
文字数 | 入力欄の幅を文字数で指定 |
type="file" （ファイルの送信欄を作成）
type属性の値に file を指定すると、ファイルの送信欄を作成できます。
name="" （部品の名前を指定）
フォーム部品を識別するための名前を指定します。
この属性の値は、ファイルデータとセットで送信されることになります。
size="" （入力欄の幅を文字数で指定）
入力欄の横幅を文字数で指定します。
この属性を指定した場合でも、ブラウザにより見た目の幅は異なります。同じような幅で表示させたい場合は、スタイルシートで指定します。
- SafariとChromeでは、この指定内容は反映されません。（入力欄が表示されないため）
使用方法
type="file" を指定すると、自動的に参照...（またはファイルを選択）と書かれたボタンが表示されます。
参照ボタンをクリックすると、ファイルを選択するためのダイアログが表示され、選択を完了するとそのファイルへのパスが入力欄に挿入されます。（SafariとChromeの場合は多少異なります）
- ファイルを送信するフォームでは、enctype属性に
multipart/form-dataを指定しておく必要があります。 - 送信されたファイルをサーバー側で受信するには、その機能を持ったCGI等のプログラムが必要になります。
その他の属性
以下の属性で、部品の無効化を指定することができます。（主に、JavaScript等と組み合わせて使用することになります）
| 属性 | 値 | 説明 |
|---|---|---|
disabled |
値は不要 | 部品を無効化する |
disabled （部品を無効化する）
この属性が指定された部品は、選択や書き換えができなくなり、データも送信されなくなります。
使用例
<form method="post" action="example.cgi" enctype="multipart/form-data">
<p>デフォルト<br>
<input type="file" name="example1"></p>
<p>幅を指定<br>
<input type="file" name="example2" size="30"></p>
<p>部品を無効化する<br>
<input type="file" name="example3" size="30" disabled></p>
<p><input type="submit" value="送信する"></p>
</form>
- 表示例
-
デフォルト
幅を指定
部品を無効化する
- サンプルのため送信できません。