How to specify the type of files that server accepts in HTML5 ?
Last Updated :
30 Jul, 2024
In this article, we will learn how to specify the types of files that the server accepts in HTML5. The <input> accept attribute is used to specify the type of file that the server accepts. This attribute can be used with <input type="file"> element only. This attribute is not used for validation tools because file uploads should be validated on the Server.
We will add each specific file one by one.
- First, we will start by using an MS Office file. We will use the 'accept' attribute to specify types of files.
<input type="File" name="" accept=".doc, .docx">
- To specify the video file, we will use the following code.
<input type="File" name="" accept="video/*">
Note: The * is the wild card, and it means that it accepts all video formats.
- To specify the text or PDF files, we use the following code.
<input type="File" name="" accept=".pdf, .txt">
- To specify the Audio file, we will use the following code.
<input type="File" name="" accept="audio/*">
- To specify the Image file, we will use the following code.
<input type="File" name="" accept="image/*">
- To specify the specific png or jpeg file, we will use the following code.
<input type="File" name="" accept=".png, .jpg, .jpeg">
- We can combine multiple file types. If we want all the Audio and Video formats and png format for Images and Pdfs.
<input type="File" name="" accept="video/*, audio/*, .png, .pdf">
Example: This example shows how to specify the type of files that server accepts in HTML5.
HTML
<!DOCTYPE html>
<html>
<head>
<title>To specify the type of file</title>
</head>
<body>
<form>
<label>Select a MSWord file:</label>
<input type="File" name="" accept=".doc, .docx"><br><br>
<label>Select an Video file:</label>
<input type="File" name="" accept="video/*"><br><br>
<label>Select a Pdf or Text file:</label>
<input type="File" name="" accept=".pdf, .txt"><br><br>
<label>Select an Audio file:</label>
<input type="File" name="" accept="audio/*"><br><br>
<label>Select an Image file:</label>
<input type="File" name="" accept="image/*"><br><br>
<label>Select a Png or Jpeg file:</label>
<input type="File" name="" accept=".png, .jpg, .jpeg"><br><br>
<label>Select a Multiple file Types:</label>
<input type="File" name="" accept="video/*, audio/*, .png, .pdf">
<br><br>
<input type="Submit" name="">
</form>
</body>
</html>
Output:
Similar Reads
How to specify the type of the media resource in HTML5 ? Here, we will see how to set the media type of the media resource using HTML. To select the media type of media resource we use the <source> tag. This tag is used to attach multimedia files like audio, video, and pictures to a web page or website. The <audio>, <video>, and <pict
1 min read
How to specify the media type of the script in HTML5 ? The HTML <script> type attribute specifies the type of script that is being represented. The type attribute identifies the content that appears between the <script> and </script> tags. It specifies the script's MIME type and identifies the Tag's content. It has a single value, medi
1 min read
How to specify the URL of the media file in HTML5 ? Here we will see how to set the URL of a media file using HTML. To set the URL of media file we use <source> tag. This tag is used to attach multimedia files like audio, video and pictures. The <audio>, <video> and <picture> elements contain the <source> element. Syntax
1 min read
How to specify media type of the target URL in HTML5 ? You can easily specify the media type of the target URL in HTML5 using the media attribute of HTML. This attribute is used to specify that the target URL is designed for special devices (like iPhone, Android, etc), speech or print media, projectors, tv, and so on.Syntax:<a href="" media="screen"
2 min read
How to define the type of media resource in HTML5 ? We can define or specify the type of media file (audio, video, etc) in HTML by the <source> tag. It defines the multimedia resources and gives the browser multiple and alternative types of that media file from which the browser can choose according to its compatibility with that media type. No
2 min read