What is Multiple Attribute in HTML: Explanation and Example
multiple attribute in HTML allows users to select more than one option in form elements like <select> or upload multiple files with <input type='file'>. It is a boolean attribute that, when present, enables multiple selections instead of just one.How It Works
The multiple attribute works like giving permission to pick more than one choice at a time. Imagine you are at a buffet and can only pick one dish—that's like a normal dropdown menu without multiple. But if you can pick several dishes, that's what multiple lets you do in a form.
When you add multiple to a <select> element, the browser changes the dropdown into a list box where you can select many options by holding Ctrl (or Command on Mac) and clicking. For file inputs, it lets you pick several files at once instead of just one.
Example
This example shows a list where you can select multiple fruits and an input to upload multiple files.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Multiple Attribute Example</title> </head> <body> <form> <label for="fruits">Choose your favorite fruits:</label><br> <select id="fruits" name="fruits" multiple size="5"> <option value="apple">Apple</option> <option value="banana">Banana</option> <option value="cherry">Cherry</option> <option value="date">Date</option> <option value="elderberry">Elderberry</option> </select><br><br> <label for="files">Upload files:</label><br> <input type="file" id="files" name="files" multiple><br><br> <button type="submit">Submit</button> </form> </body> </html>
When to Use
Use the multiple attribute when you want users to pick more than one option from a list or upload several files at once. For example, if you have a survey asking about hobbies, users might want to select all that apply, not just one.
It is also useful in file upload forms where users need to send multiple documents or images without repeating the upload step multiple times.
Key Points
- Boolean attribute: Just adding
multipleenables the feature; no value needed. - Works with: Mainly
<select>and<input type='file'>. - User interaction: For
<select>, users hold Ctrl/Command to select multiple options. - Improves usability: Makes forms flexible and user-friendly when multiple choices are needed.