The multiple attribute is used to specify whether the user can enter more than one value in an input element. It is a Boolean attribute. When set to true, the input element can accept more than one value. The multiple properties can be used in the following ways.
- With the <input> tag only the Email and File type accepts the multiple attribute.
- With the <select> tag when the multiple attribute is used, most of the browsers display a scrolling list box instead of the simple one line dropdown list. This allows the user to select multiple options.
Example 1: This example shows how multiple emails can be entered in the input area. Each email is separated by a comma. Any trailing and leading whitespaces are removed from each address in the list.
HTML
<html>
<body>
<form action=" ">
<p>
<label>
Write down the E-Mails of the
peoples you want to send the mail
</label>
<br>
<sub>
(You can enter multiple E-Mail with
each separated by comma)
</sub>
<input type="email" name="email" id="email" multiple size="50">
</p>
<p>
<input type="submit" value="Submit">
</p>
</form>
</body>
</html>
|
Output:
Before entering the email addresses
After entering the email addresses
Example 2: This example shows how multiple files can be selected using the <input> tag. Normally only one file is allowed, however using the multiple, the user can select more than one file.
HTML
<html>
<body>
<form action=" ">
<p>
<label for="file">
Upload the image files :
</label>
<input type="file" name="upload" id="upload" multiple accept=".jpeg,.jpg,.png">
<br><br>
<label for="file">
Upload the Text files :
</label>
<input type="file" name="upload" id="upload" multiple accept=".txt">
</p>
<p>
<input type="submit" value="Submit">
</p>
</form>
</body>
</html>
|
Output:
Before adding the files:
After adding the files:
Example 3: This example shows how multiple options can be selected in a <select> input. The user can select zero or more options from the list of options by using the CTRL button or use a solution given by the developer.
HTML
<html>
<body>
<form action=" ">
<p>
With multiple attribute:
<label for="course">
Select the course you like:
</label>
<select multiple name="course" id="course">
<option>HTML</option>
<option>CSS</option>
<option>JavaScript</option>
<option>Java</option>
<option>C++</option>
<option>C</option>
<option>Python</option>
</select>
</p>
<p>
Without multiple attribute:
<label for="course">
Select the course you like:
</label>
<select name="course" id="course">
<option>HTML</option>
<option>CSS</option>
<option>JavaScript</option>
<option>Java</option>
<option>C++</option>
<option>C</option>
<option>Python</option>
</select>
</p>
<p>
<input type="submit" value="Submit">
</p>
</form>
</body>
</html>
|
Output:
