YouTip

# HTML multiple Attribute The `multiple` attribute is a boolean attribute that specifies whether a user is allowed to enter or select more than one value in an `` element. --- ## Introduction The `multiple` attribute is a powerful HTML5 feature that simplifies user input when dealing with multiple files or email addresses. When present, it changes the behavior of the input field to accept a comma-separated list of values (for emails) or allows users to select multiple files simultaneously from their local file explorer (for file uploads). --- ## Syntax ```html ``` ### XHTML Difference In XHTML, attribute minimization is forbidden. The `multiple` attribute must be defined in its full form: ```html ``` --- ## Supported Input Types The `multiple` attribute is not applicable to all input types. It is strictly supported by the following two types: | Input Type | Description | Behavior with `multiple` | | :--- | :--- | :--- | | `file` | File upload field | Allows the user to select more than one file (e.g., using `Ctrl` or `Shift` keys during selection). | | `email` | Email address field | Allows the user to enter a list of comma-separated email addresses. | --- ## Code Examples ### 1. Multiple File Upload This example demonstrates how to allow users to select and upload multiple image files at once. ```html

Select images to upload:

``` *Note: When uploading multiple files, it is common practice to use array notation in the `name` attribute (e.g., `name="gallery[]"`) so backend languages like PHP can process them as an array.* ### 2. Multiple Email Addresses This example allows users to input multiple email addresses separated by commas. ```html

Enter recipient email addresses (separated by commas):

``` --- ## Browser Support The `multiple` attribute is widely supported across all modern web browsers: * **Google Chrome**: Supported * **Mozilla Firefox**: Supported * **Microsoft Edge**: Supported * **Safari**: Supported * **Opera**: Supported * **Internet Explorer**: Supported starting from IE 10 (IE 9 and earlier versions do not support this attribute). --- ## Key Considerations & Best Practices 1. **Form Validation**: When using `type="email"` with the `multiple` attribute, the browser will automatically validate the input. It ensures that the value is either a single valid email address or a list of comma-separated, valid email addresses. Any trailing commas or whitespace around the commas are automatically handled or flagged as invalid. 2. **File Selection UX**: When using `type="file"` with `multiple`, you can combine it with the `accept` attribute (e.g., `accept="image/*"`) to restrict the file picker to specific file types, making the user experience much cleaner. 3. **Backend Handling**: Ensure your backend server-side script is configured to receive and parse multiple files or a comma-separated string of emails. For file uploads, check your server's maximum upload size limits (`upload_max_filesize` and `post_max_size` in PHP, for example) to prevent errors when users upload many files at once.