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">
<p>デフォルト<br>
<input type="file" name="example1"></p>
<p>幅を指定<br>
<input type="file" name="example2" size="50"></p>
<p>部品を無効化する<br>
<input type="file" name="example3" size="50" disabled></p>
<p><input type="submit" value="送信する"></p>
</form>
表示例
デフォルト
幅を指定
部品を無効化する
※サンプルのため送信できません。
- サイト内検索
