HTML input Tag accept Attribute Tutorial

In this section, we will learn what the accept attribute is and how to use it.

What is accept Attribute in HTML <input> Tag?

First of all, the accept attribute is used with input fields of type file!

We use this attribute when we want to limit the number of types that users can select to add to a form.

For example, let’s say you want users able to add files of type “PDF” only. For this to happen, you can set the value of the `accept` attribute to “.pdf” and that means only pdf files can be selected using this input field.

HTML accept Attribute in <input> Tag Syntax:

<input type = “file” accept = “file_extension |audio/*|video/*|image/*|media_type”>

<input> Tag accept Attribute Values

Here’re the list of values that we can use for the accept attribute:

Name

Description

file_extension

We can specifically declare what type of files we want the target input field be able to add to the form.

For example: “.pdf”, “.gif”, etc.

audio/*

This value is used when we want to allow all types of audio files.

video/*

This value is used when we want to allow all types of video files.

image/*

This value is used when we want to allow all types of image files.

media_type

A valid media type, with no parameters. Check the IANA Media Types for the complete list of standard media types.

Note: to specify more than one value, use comma `,` to separate them.

For example: “image/* , video/*, audio/*”

Example: using accept attribute in HTML <input> tag

See the Pen using accept attribute in HTML <input> tag by Omid Dehghan (@odehghan) on CodePen.

Leave a Reply