YouTip

# HTML multiple Attribute The `multiple` attribute is a boolean attribute used with the HTML `` element. It allows users to select more than one option from a drop-down list or scrollable selection box. --- ## Quick Example The following example demonstrates a basic drop-down list that allows multiple selections: ```html Volvo Saab Opel Audi ``` --- ## Browser Support | Attribute | Chrome | Edge/IE | Firefox | Safari | Opera | | :--- | :--- | :--- | :--- | :--- | :--- | | `multiple` | Yes (All versions) | Yes (All versions) | Yes (All versions) | Yes (All versions) | Yes (All versions) | The `multiple` attribute is fully supported by all modern web browsers. --- ## Definition and Usage * The `multiple` attribute is a **boolean attribute**. When present, it specifies that the user can select multiple options in the list. * When the `multiple` attribute is used, most browsers will display a scrollable list box instead of a single-line drop-down menu. * The size of the list box can be adjusted using the `size` attribute (e.g., ``). ### How Users Select Multiple Options: * **Windows:** Hold down the `Ctrl` key while clicking the options you want to select. * **macOS:** Hold down the `Command` (`⌘`) key while clicking the options you want to select. * **Mobile Devices:** Most mobile browsers present a native multi-select interface (such as checkboxes or a scroll wheel with checkmarks) when this attribute is detected. --- ## Syntax In standard HTML5, you can write the attribute in its minimized form: ```html ``` ### HTML vs. XHTML Differences In XHTML, attribute minimization is forbidden. The `multiple` attribute must be defined with its value explicitly declared: ```xml ``` --- ## Complete Code Examples ### 1. Basic Multi-Select Form Submission This example shows how to implement a multi-select element within a form. > **Note:** When submitting multiple values to a server-side script (like PHP), you should append square brackets `[]` to the `name` attribute so the server receives the data as an array. ```html

Select Your Favorite Car Brands

Hold down the Ctrl (Windows) or Command (Mac) button to select multiple options.

Choose cars:

Volvo Saab Opel Audi

``` ### 2. Getting Selected Values with JavaScript You can easily retrieve the selected values using JavaScript: ```html Choose Frameworks:
React Vue Angular Svelte

Show Selected

``` --- ## User Experience (UX) Considerations While the `multiple` attribute is highly functional, it has some notable usability drawbacks: 1. **Hidden Controls:** Users might not know they can select multiple options unless explicit instructions are provided. 2. **Complex Interaction:** Requiring users to hold down `Ctrl` or `Command` is not intuitive for non-technical users and is prone to accidental clicks that can clear previous selections. 3. **Mobile Limitations:** While mobile browsers handle this natively, the experience varies significantly across different operating systems. ### Alternative Solution For a more user-friendly interface, consider using a list of **checkboxes** (``) instead of a multi-select dropdown, or use a modern JavaScript library (such as Select2, Choices.js, or Tom Select) to style the multi-select element into a searchable tag-based input.