The HTML multiple attribute is used to specify whether a form control is capable of accepting more than one value.
Definition and Usage
➔ The multiple attribute is used in the following contexts:
- <input type="file" multiple>: Allows users to select multiple files.
- <input type="email" multiple>: Allows users to enter multiple comma-separated email addresses in a single input field.
- <select multiple>: Allows users to select multiple options from a dropdown list (by holding down the Ctrl key)
Syntax
//In HTML
<form action="#" method="post" enctype="multipart/form-data">
<label for="files">Select multiple files:</label>
<input type="file" id="files" name="files" multiple>
<br><br>
<label for="emails">Enter email addresses(comma-separated):</label>
<input type="email" id="emails" name="emails" multiple>
<br><br>
<label for="fruits">Choose fruits:</label><br>
<select id="fruits" name="fruits" multiple size="4">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="berry">Berry</option>
<option value="cherry">Cherry</option>
<option value="orange">Orange</option>
</select>
<br><br>
<input type="submit" value="Submit" onclick="myFunction()">
</form>
//In JavaScript
<script>
const element = document.getElementById('id');
element.multiple = true;
element.setAttribute('multiple', 'multiple');
</script>
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML multiple attribute example</title>
<style>
.mydiv {
border: 2px solid black;
padding: 30px;
background: rgb(100, 100, 100, 0.1);
}
input[type='email'] {
padding: 3px;
}
input[type='submit'] {
margin: 10px 0px;
padding: 10px 20px;
border-radius: 5px;
background-color: #f6f6f6;
color: #000;
}
input[type='submit']:hover {
background-color: #000;
color: white;
}
select {
width: 120px;
}
</style>
</head>
<body>
<div id="sample" class="mydiv">
<h3>HTML multiple attribute example</h3>
<p>The multiple attribute is used to specify whether a form control can accept more than one value.</p>
<form action="#" method="post" enctype="multipart/form-data">
<label for="files">Select multiple files:</label>
<input type="file" id="files" name="files" multiple>
<br><br>
<label for="emails">Enter email addresses(comma-separated):</label>
<input type="email" id="emails" name="emails" multiple>
<br><br>
<label for="fruits">Choose fruits:</label><br>
<select id="fruits" name="fruits" multiple size="4">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="berry">Berry</option>
<option value="cherry">Cherry</option>
<option value="orange">Orange</option>
</select>
<br><br>
<input type="submit" value="Submit" onclick="myFunction()">
</form>
</div>
</body>
<script>
function myFunction() {
event.preventDefault();
alert("Submitted");
}
</script>
</html>
Click on the "Try it Now" button to see how it works.