The accept Attribute

The Current State of HTML5 Forms

<input type="file" accept="image/*"> (images only)

Live Demo


 


Firefox
3.6+

Safari
7+

Safari
5+

Chrome
17

Opera
10.6

IE
10+

Android
2.3+

The Low Down

The accept attribute takes a comma-separated list of unique content types of files that are acceptable values for the file input type only. The comma separated values can inclue file extensions, MIME types without extensions, and, new in HTML5, audio/* for sound files video/* for video files and image/* for image files.

  • Attribute is only valid for <input type="file">
  • The attribute provides a hint of what file types the server is able to accept.
  • On mobile devices, including Mobile: Android 3+, Chrome 16+, Safari 6+, Firefox 10+, Blackberry 10+, while not part of the specifications, the camera and microphone can be accessed:
    <input type="file" accept="image/*;capture=camera">
    <input type="file" accept="video/*;capture=camcorder">
    <input type="file" accept="audio/*;capture=microphone">
  • The capture attribute can be included as a separate attribute in HTML5.
  • While the attribute helps in getting users to select the right file type, you must still validate server side.
  • Older versions of iOS did not support file input type, therefore this attribute was irrelevant until iOS enabled it in iOS7