<input type=”file”>|ファイルの送信欄を作成する

<input type="file">|ファイルの送信欄を作成する

<input>タグのtype属性に「file」を指定すると、ファイルをアップロードするための入力欄とボタンを作成できます。
 
 

使用例

 
 
ファイルをアップロードするフォームでは、form要素にmethod=”post”とenctype=”multipart/form-data”を指定する必要があります。
 
 

表示例

レポート:

 
 

スポンサーリンク

accept属性

サーバーが受け取ることができるファイル形式をMIMEタイプで指定します。
この属性を指定しておけば、ファイルを選択するダイアログボックスが開いたときに、特定の種類のファイルだけを表示させることができます。

以下の例では、JPEGファイルのみを指定しています。

 
 
複数のファイル形式を指定する場合は、以下のようにカンマで区切って記述します。

 
 
大まかな系統で指定したい場合は、以下の3つの値を使用することもできます。

  • audio/*
    音声ファイルを指定します。
  •  

  • video/*
    動画ファイルを指定します。
  •  

  • image/*
    画像ファイルを指定します。

 
 
以下の例では、音声ファイルを指定しています。

 
 

value属性

入力欄にあらかじめ表示されるテキストを指定します。
 
 

スポンサーリンク

multiple属性

複数のファイルが選択可能であることを指定します。
対応しているブラウザでは、ダイアログ内で複数のファイルを選択できるようになります。

 
 
この属性が指定されていない場合は、1つのファイルしか選択できません。
 
 

required属性

そのコントロールへの入力が必須であることを指定します。
こちらは、以下のいずれかの形式で指定します。

  • required
  • required=”required”
  • required=””

 
 
required属性がある場合、コントロールにデータが入力されない限り、送信できないようになります。
 
 

スポンサーリンク

autofocus属性

ページが表示されたら、そのコントロールへ自動的にフォーカスが当たるよう指定します。
autofocus属性は、1つの文書に1つだけ指定することができます。
こちらは、以下のいずれかの形式で指定します。

  • autofocus
  • autofocus=”autofocus”
  • autofocus=””

 
 

disabled属性

そのコントロールを無効にします。
disabled属性を指定すると、入力や選択、クリックなどができなくなり、データも送信されなくなります。
こちらは、以下のいずれかの形式で指定します。

  • disabled
  • disabled=”disabled”
  • disabled=””

 
 

スポンサーリンク

form属性

コントロールを指定のform要素と結び付けます。
結びつけたいform要素のid属性の値をこの属性の値に指定することで、コントロールがform要素の中になくても、そのフォームの部品として機能するようになります。

 
 

name属性

コントロールを識別するための名前を指定します。
フォームのデータが送信されるときには、この名前とデータがセットになって送られ、サーバー側でコントロールを特定するために使われます。

 
 
HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








<input type="file">|ファイルの送信欄を作成する