今回は【HTML】type属性fileの使い方、送信するファイルの選択欄を作成しよう!
の解説になります!
こんな方に読んでほしい
- HTMLを学び始めた方へ
-
HTML
について学びたい方へ - 今回はinput type=”file”について解説しております。
今回は、input type="file"
について詳しく解説していきます。
type=”file”では、「送信するファイル」の選択ができます。
input type="file"
で作成すると、送信するファイルの選択欄が作成されます。
左の図が、input type="text"
になり、通常の入力欄になります。
右の図が、input type="file"
になり、送信するファイルの選択欄になります。
Chrome | Safari | Firefox | IE | Edge |
---|
| | | | |
type=”file”について
input type="file"
を指定すると、送信するファイルになります。
accept=""
に、ファイル形式を制限することなど可能になります。
書き方は以下のようになります。
<form method="post" enctype="multipart/form-data">
<div>
<label><input type="file" name="image" accept="" /></label>
</div>
</form>
ポイント!
enctype=”multipart/form-data”を指定することで、
文字列以外の画像など様々な形式のデータを含めて送信する事が可能になります。
input type="file"
を指定する際には、必ず指定をしましょう。
accept属性(ファイルの制限)について
accept属性とは、選択できるファイルの種類が制限が可能になります。
accept=".png, .jpeg, .jpg"
とこのように、ファイルの拡張子や種類を指定できます。
複数指定を行う場合は、半角カンマ「,」で区切って指定します。
今回は、例として、accept=".png"
のみにした場合は、.png
以外のファイル形式は選択できなくなります。
<form method="post" enctype="multipart/form-data">
<div>
<label><input type="file" name="image" accept=".png" /></label>
</div>
</form>
<!--例01) テキストファイルのみ選択する場合-->
<input type="file" name="image" accept="text/plain">
<!--例02) jpg、png、pdfのみ選択する場合-->
<input type="file" name="image" accept=".jpg, .png, .pdf">
<!--例03) 全ての形式の画像ファイルを選択する場合-->
<input type="file" name="image" accept="image/*">
ポイント!
主に、指定できるファイル形式は、「.png、.jpg、.jpeg、.pdf、.doc」の5つなります。
特に制限を必要でない場合は、accept="image/*"
と指定すると、
全ての形式の画像ファイルを選択できるようになります。覚えておくと便利ですね。
multiple属性(複数ファイルを選択)について
multiple属性とは、複数のファイルが選択可能になります。
multipleのみ記述すれば問題ありません。
<form method="post" enctype="multipart/form-data">
<div>
<label><input type="file" name="image" multiple /></label>
</div>
</form>
required属性(必須項目)について
required属性とは、必須項目に設定します、エラー表示はブラウザによって違います。
requiredのみ記述すれば問題ありません。
<form method="post" enctype="multipart/form-data">
<div>
<label><input type="file" name="image" required /></label>
</div>
</form>
関連記事
まとめ
今回はこれで以上です。
次回も「フォーム」について解説していきます。
- POINT
-
input type="file"
は、 送信するファイルの選択欄を作成します。 -
enctype="multipart/form-data"
を指定することで、
文字列以外の画像など様々な形式のデータを含めて送信する事が可能になります。 - accept属性とは、選択できるファイルの種類が制限可能になります。
- 複数指定を行う場合は、半角カンマ「,」で区切って指定します。
- 主に、指定できるファイル形式は、「.png、.jpg、.jpeg、.pdf、.doc」の5つなります。
-
accept="image/*"
を指定することで、全ての形式の画像ファイルに対応になります。 - multiple属性とは、複数のファイルが選択可能になります。
- required属性とは、必須項目に設定します。
Chrome | Safari | Firefox | IE | Edge |
---|
| | | | |
スポンサーリンク
SHU
1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。
最新記事
関連記事