0
0
HtmlConceptBeginner · 3 min read

What is Multiple Attribute in HTML: Explanation and Example

The 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.

html
<!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>
Output
A form with a list box showing five fruits where multiple can be selected by clicking while holding Ctrl/Command, and a file input that allows selecting multiple files at once.
🎯

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 multiple enables 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.

Key Takeaways

The multiple attribute lets users select or upload more than one item in forms.
It is a simple boolean attribute added to , users hold Ctrl/Command to pick multiple options.
No value is needed; just include the attribute to enable multiple selection.