Cloud Cloud Cloud Cloud

The file Type

The Current State of HTML5 Forms

Let Wufoo do the hard work. Sign up for a free account and start making forms the easy way.

Live Demo








Firefox

Safari

Safari

Chrome

Opera

IE

Android

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.
Cloud Cloud Cloud Cloud

Let Wufoo do the hard work.

Sign up for a free account and start making forms the easy way.

Our Cookie Policy and Privacy Policy outline how we use cookies to help optimize service, personalize content, tailor and measure our marketing, and improve your user experience. I agree to use of cookies for these purposes.