Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to limit maximum items on multiple input ()?
The multiple attribute in HTML allows users to select multiple files or email addresses in input fields. However, HTML alone cannot limit the number of items selected. To restrict the maximum number of files or entries, you need to use JavaScript validation.
Syntax
Following is the syntax for the multiple attribute −
<input type="file" multiple> <input type="email" multiple>
The multiple attribute is a boolean attribute that enables selection of multiple values. It works with file and email input types.
Using Multiple Attribute with File Input
The multiple attribute allows users to select several files simultaneously from the file dialog. Without JavaScript validation, users can select unlimited files.
Example − Basic Multiple File Upload
<!DOCTYPE html>
<html>
<head>
<title>Multiple File Upload</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Select Multiple Files</h2>
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="files" multiple><br><br>
<input type="submit" value="Upload Files">
</form>
</body>
</html>
This basic form allows unlimited file selection. Users can select multiple files using Ctrl+click or Shift+click in the file dialog.
Limiting Maximum Files with JavaScript
To limit the number of files that can be uploaded, use JavaScript to validate the file count before form submission.
Example − Limit to 3 Files Maximum
<!DOCTYPE html>
<html>
<head>
<title>Limit Multiple File Upload</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Upload Files (Maximum 3)</h2>
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="files" multiple><br><br>
<p>Select up to 3 files and click Submit.</p>
<input type="submit" value="Upload Files">
</form>
<script>
$(function(){
$("input[type='submit']").click(function(e){
var fileUpload = $("input[type='file']");
var fileCount = fileUpload.get(0).files.length;
if (fileCount > 3){
e.preventDefault();
alert("You can only upload a maximum of 3 files");
return false;
}
});
});
</script>
</body>
</html>
This example prevents form submission if more than 3 files are selected and displays an alert message to the user.
Example − Vanilla JavaScript Validation
Following example shows file limit validation using pure JavaScript without jQuery −
<!DOCTYPE html>
<html>
<head>
<title>File Upload Limit - Vanilla JS</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Upload Files (Maximum 2)</h2>
<form id="uploadForm" action="/upload" method="post" enctype="multipart/form-data">
<input type="file" id="fileInput" name="files" multiple><br><br>
<p id="fileCount">No files selected</p>
<input type="submit" value="Upload Files">
</form>
<script>
const fileInput = document.getElementById('fileInput');
const fileCount = document.getElementById('fileCount');
const form = document.getElementById('uploadForm');
fileInput.addEventListener('change', function() {
const files = this.files;
fileCount.textContent = files.length + " file(s) selected";
if (files.length > 2) {
fileCount.textContent += " (Exceeds limit of 2)";
fileCount.style.color = "red";
} else {
fileCount.style.color = "green";
}
});
form.addEventListener('submit', function(e) {
const files = fileInput.files;
if (files.length > 2) {
e.preventDefault();
alert("Maximum 2 files allowed. Please select fewer files.");
}
});
</script>
</body>
</html>
This version provides real-time feedback showing the number of selected files and warns when the limit is exceeded.
Using Multiple Attribute with Email Input
The multiple attribute also works with email input types, allowing users to enter multiple email addresses separated by commas.
Example − Multiple Email Addresses
<!DOCTYPE html>
<html>
<head>
<title>Multiple Email Input</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Send Email to Multiple Recipients</h2>
<form action="/send-email" method="post">
<label for="emails">Enter email addresses (separate with commas):</label><br>
<input type="email" id="emails" name="recipients" multiple
placeholder="user1@example.com, user2@example.com"
style="width: 400px; padding: 8px;"><br><br>
<input type="submit" value="Send Email">
</form>
</body>
</html>
Users can enter multiple email addresses separated by commas. The browser validates each email address format automatically.
Best Practices
When implementing multiple file uploads with limits, consider these best practices −
Client-side validation − Use JavaScript for immediate user feedback, but always implement server-side validation for security.
File size limits − In addition to file count, consider limiting individual file sizes and total upload size.
File type restrictions − Use the
acceptattribute to limit file types:<input type="file" accept=".jpg,.png,.pdf" multiple>.Progress indication − For multiple file uploads, show upload progress for better user experience.
Browser Compatibility
The multiple attribute is well-supported across modern browsers. It works in Chrome, Firefox, Safari, Edge, and Internet Explorer 10+. However, the file selection interface may vary between browsers.
Conclusion
The HTML multiple attribute enables selection of multiple files or email addresses, but requires JavaScript to implement maximum limits. Combine client-side validation for user experience with server-side validation for security. This approach provides both immediate feedback and robust file upload control.
14K+ Views
