シュウ

今回は【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>

関連記事

まとめ

今回はこれで以上です。
次回も「フォーム」について解説していきます。

Chrome	Safari	Firefox	IE	Edge

< 前の記事

【HTML】type属性radioの使い方、ラジオボタンを作成しよう!

次の記事 >

【HTML】type属性submitの使い方、フォームの送信ボタンを作成しよう!