HTML multiple Attribute

Introduction

The multiple attribute is a boolean HTML attribute that lets users pick more than one value from certain form controls. On <select>, it enables multi-select lists. On <input type="file">, it allows uploading several files in one action. On <input type="email">, it can accept multiple comma-separated addresses. Without multiple, those controls accept only a single choice or file. Add the attribute by writing multiple alone—no value is required.

What You’ll Learn

Purpose of multiple Attribute

The primary purpose of multiple is to collect several related choices in one form field. A skills picker might let users tag JavaScript, HTML, and CSS at once. A photo upload might accept five images without five separate inputs. The server receives multiple values under the same field name (or multiple files in one request).

On desktop browsers, multi-select lists typically require holding Ctrl (Windows/Linux) or Command (macOS) while clicking. Adding size="5" shows several visible rows, which makes multi-select more obvious than a collapsed dropdown.

📝 Syntax

Add the boolean multiple attribute to supported elements:

<label for="fruits">Favorite fruits:</label>

<select id="fruits" name="fruits" multiple size="5">

  <option value="apple">Apple</option>

  <option value="banana">Banana</option>

  <option value="orange">Orange</option>

</select>



<label for="photos">Upload photos:</label>

<input type="file" id="photos" name="photos" multiple accept="image/*">



<label for="recipients">Email to:</label>

<input type="email" id="recipients" name="recipients" multiple>

Syntax Rules

• Boolean attribute—write multiple alone; presence enables multi-value mode.
• Valid on <select>, <input type="file">, and <input type="email">.
• JavaScript IDL property: element.multiple = true (boolean).
• Pair multi-select with size for better UX (visible rows).
• Server must handle multiple submitted values or files for the same field name.
• Not valid on radio, checkbox groups use separate inputs instead.

💎 Values

The multiple attribute is a boolean—it has no meaningful string value:

• multiple — Attribute present; multiple selections or files allowed.
• multiple="" — Also valid in HTML5; same as bare multiple.
• Attribute absent — Single selection or single file only.
• JavaScript: selectEl.multiple = true or false.

document.getElementById("dynamicSelect").multiple = true;

document.getElementById("fileInput").multiple = false;

Applicable Elements

multiple on select vs file vs checkboxes

Examples Gallery

Multi-select fruit list, multiple file upload, and toggling select.multiple with JavaScript.

<label for="fruitSelection">Select fruits:</label>

<select id="fruitSelection" name="fruits" multiple size="5">

  <option value="apple">Apple</option>

  <option value="banana">Banana</option>

  <option value="orange">Orange</option>

  <option value="grape">Grape</option>

</select>

<label for="photos">Upload photos:</label>

<input type="file" id="photos" name="photos" multiple accept="image/*">

<select id="dynamicSelect" name="colors">

  <option value="red">Red</option>

  <option value="blue">Blue</option>

</select>



<script>

  document.getElementById("dynamicSelect").multiple = true;

</script>

♿ Accessibility

• Explain multi-select interaction — Tell users to hold Ctrl or Command, or use checkboxes for clearer multi-choice UX.
• Use size on multi-select — A visible list box is easier to discover than a collapsed dropdown with hidden multi-select behavior.
• Label file inputs clearly — e.g. “Upload one or more photos” when multiple is set.
• Announce selections — Custom multi-select widgets should manage focus and use ARIA patterns; native <select multiple> relies on OS behavior.
• Consider checkboxes — For small option sets, visible checkboxes are often more accessible than Ctrl/Cmd multi-select.

💡 Best Practices