HTML Input multiple attribute


How does the multiple attribute on input fields in HTML work?

30 Jan, 2021 · 3 min read

Did you know there is a multiple attribute for HTML input fields?

If you have ever worked with a file upload, you might know why you want this, but it even works on email fields!

Today I will show you how it works and why you can benefit from it.

Try out the multiple attribute in this Codepen.

See the Pen HTML Input multiple attribute by Chris Bongers (@rebelchris) on CodePen.

The syntax for the multiple attribute is straightforward. It’s enough to add the word to an input:

<input type="{file/email}" multiple />

Making an HTML file input accept multiple files

The most common use case for the multiple attribute is to use if on a <input type="file">, adding the multiple attributes to this will ensure that the user can select multiple files in one go.

The syntax will look like this:

<input type="file" name="files" multiple />

This will allow us actually to select multiple files in the file picker.

HTML Input file multiple

However, if you want to receive them on a backend, you must adjust the name to reflect an array.

<input type="file" name="files[]" multiple />

This will ensure our backend will receive them in an array rather than just the first selected file.

In PHP, for instance, we would get the following.

['files'] = [
     "name" => [
     "type" => [
     "tmp_name" => [
     "size" => [

This will, of course, differ for each backend language you use. At least you know it will arrive as an array of values.

Making an HTML email input accept multiple email addresses

Another great use case for the multiple attribute is the email type.

By default, this type can check for emails on a form, but did you know we can enable it to accept multiple emails?

<input type="email" multiple />

The input expects email addresses with comma-separated values as:

// [email protected], [email protected]

I will be showing you how the default Chrome browser validation parses this.

First of all, let’s try an input without this multiple attribute.

Email non mulitple

As you can see, the validation will state that the comma is not correct if we don’t enable the multiple attribute.

Now let’s try adding the multiple attribute, but type the email wrong.

Email second address wrong

As you can see above, it now accepts the second email but states it’s wrong.

We can even make a mistake in the first email, which will pick up on.

HTML Multiple email missing @

Note: Seeing this all works, we can leverage the JavaScript validation engine similarly!

Browser Support

The HTML Multiple attribute has outstanding support. It won’t work in some mobile browsers and IE9.

HTML Multiple attribute browser support

Thank you for reading, and let’s connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next 📖

Submit button outside the form

4 Dec, 2022 · 1 min read

Submit button outside the form

Trying out native dialog modals

8 Aug, 2022 · 3 min read

Trying out native dialog modals

Join 2099 devs and subscribe to my newsletter