Languages
[Edit]
EN

HTML - file input

3 points
Created by:
Marley-Marks
622

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

Quick solution:

<input type="file" />

or: 

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

or:

<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>
<html>
<body>
  <label>
    <span>Choose file:</span>
    <input type="file" id="file" />
  </label>
  <br />
  <label>
    <span>Choose document:</span>
    <input type="file" id="document" accept=".pdf,.doc,.docx" />
  </label>
  <br />
  <label>
    <span>Choose picture:</span>
    <input type="file" id="picture" accept="image/png, image/jpeg" />
  </label>
</body>
</html>

Note:

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.

 

References

  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.

❤️💻 🙂

Join