HTML - file input

3 points
Created by:

In this article, we would like to show you how to use the file input element in HTML.

Quick solution:

<input type="file" />


<input type="file" accept=".pdf,.doc,.docx" />


<input type="file" accept="image/png, image/jpeg" />


Practical example

In this example, we create file input using type="file" attribute.

Using accept attribute, file input opens dialog that displays only expected file types.

// ONLINE-RUNNER:browser;

<!doctype html>
    <span>Choose file:</span>
    <input type="file" id="file" />
  <br />
    <span>Choose document:</span>
    <input type="file" id="document" accept=".pdf,.doc,.docx" />
  <br />
    <span>Choose picture:</span>
    <input type="file" id="picture" accept="image/png, image/jpeg" />


You can specify any image type in accept attribute using:

  • image/*

The same solution works for audio and video:

  • audio/* - any audio file,
  • video/* - any video file.



  1. <input type="file"> - HTML | MDN

Alternative titles

  1. HTML - input type file
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.

HTML - input element types

Native Advertising
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂