The Current State of HTML5 Forms

The file Type

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

Live Demo





Firefox
Safari
Safari Mobile
Chrome
Opera
IE
Android
Supported Supported Supported Supported Supported Supported Supported

Supported Browser Screenshots

IE
Chrome
Firefox
Safari
Android modal for accept=video
Android with accept="video/*;capture=camcorder"

The Low Down

The file input type is used to identify resource(s) in the file structure, upload a file, or create a resource to upload.

  • The¬†file input¬†element provides a GUI to select a file, and then represents a list of files that are selected with the option to change resource(s) until form submission.
  • The multiple attribute allows more than one resource to be selected. Some browsers will add an "s" to their no file is selected message if this attribute is present.
  • The accept attribute provides a hint of what file types the server is able to accept. Adding capture on some devices will allow the user to capture a video, audio or image files with the devices camcorder, microphone and/or camera.
  • Of the input types, the file input type varies the most between browser, and is not very stylable.
  • Messages vary: Firefox and IE both use "browse", while Safari, Chrome and Opera employ "Choose File", or "Choose Files" if the multiple attribute is present.
  • Firefox, Safari, Chrome and Opera indicate the name of the file next to the button if only one file was selected, with Safari including an icon indicating file type.
  • If more than one file was selected in the case of multiple, "X files" is listed, with X being the number of files selected.
  • IE shows the file name including the full path to that file. In case of multiple files, it presents all files in a scrollable text input.