HTML capture Attribute


The capture attribute in HTML

The capture attribute is used with the <input type="file"> element to control how users interact with the file selection dialog. It allows you to prompt the user to capture a new media file using their device's camera or microphone, rather than simply selecting a file from their storage.

Here's what it does:

  • When present, the capture attribute indicates the browser should prioritize capturing new media over selecting existing files.
  • The attribute takes a string value specifying the preferred camera to use for capturing media:
    • "user": This value prompts the user to use the front-facing camera, typically for capturing selfies or videos of themselves.
    • "environment": This value prompts the user to use the environment-facing camera, usually the back camera on mobile devices, for capturing pictures or videos of their surroundings.

Important considerations:

  • Browser support for specific capture attribute values might vary depending on the device and browser version.
  • It's recommended to use the capture attribute in conjunction with the accept attribute, which specifies the allowed media types (e.g., image/* for images, video/* for videos). This ensures the user can only capture media formats supported by the application.
  • To provide a better user experience, consider offering an option to choose between capturing a new file or selecting an existing one from storage. This gives users more control over the file selection process.


<input type="file" capture="value">


  • valuedefines which camera to use for capturing media (image or video) and can be one of the following:
    • "user": This indicates the user-facing camera (typically the front camera on mobile devices).
    • "environment": This indicates the environment-facing camera (typically the back camera on mobile devices).

Applies To

The capture attribute can be used on the following html elements.


<h3>Take a Selfie</h3>
<input type="file" name="selfie" capture="user" accept="image/*">
<button type="submit">Upload Selfie</button>

Browser Support

The following table will show you the current browser support for the HTML capture Attribute.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 25th March 2024