The file input field is used to load a file from the local computer, that will be sent to the server.

<input type="file" />

You can use the accept attribute to specify the types of files accepted, and users will only be allowed (by their operating system) to load only those.

You can set this as MIME type or file extension:

# accept only PNG images 
<input type="file" accept="image/png" />

# accept all images
<input type="file" accept="image/*" />

# accept 
<input type="file" accept="image/*" />

You can load multiple files using the multiple attribute:

<input type="file" accept="image/*" multiple />

You can ask the browser to use the camera inputs:

# use user-facing camera
<input type="file" capture="user" />

# use main camera
<input type="file" capture="environment" />

You can also record an audio or video input directly in the browser using:

<input type="file" name="voice" accept="audio/*" capture />

<input type="file" name="video" accept="video/*" capture />

(those camera inputs work on mobile only at the moment)

Hidden input field

Sometimes very useful, a hidden field contains a name and a value but is never shown to the user:

<input type="hidden" />

<input type="hidden" name="test" value="hello" />

Lessons in this unit:

0:	Introduction
1:	Form submit field
2:	Specialized input fields
3:	Checkboxes
4:	Radio buttons
5:	▶︎ File input fields
6:	Textarea
7:	Select
8:	Autocompleting form fields