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 as files, and users will only be allowed (by their operating system) to only load 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 user 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: