Form fields: File input fields

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:

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
Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. Launching May 21, 2024. Join the waiting list!