HTML - multiple Attribute

Quiz

HTML multiple attribute is a Boolean attribute, that allows form controls to accept more than one value.

When used with inputs (type='file & email'), it allows users to select more than one file and compose more than one email at a time, and if it is used with the select element, it allows users to select more than one option at a time.

Syntax

<tag multiple></tag>

Applies On

Below listed elements allow using of the HTML multiple attribute

Element	Description
<input>	HTML <input> tag is used accept various types of input from user.
<select>	HTML <select> tag is used to create dropdown lists in online forms.

Examples of HTML multiple attribute

Below examples will illustrate the HTML minlength attribute, where and how we should use this attribute!

Select multiple values from dropdown list

In the following example, we are going to use the multiple attribute with the select tag to select multiple values inside a dropdown list.

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML 'multiple' attribute</title>
</head>

<body>
   <p>Select languages you knows (use Ctrl + click): </p>
   <select multiple>
      <option value="">Hindi</option>
      <option value="">English</option>
      <option value="">Malayalam</option>
      <option value="">Telugu</option>
   </select>
   <p>Select your mother tongue:</p>
   <select>
      <option value="">Hindi</option>
      <option value="">English</option>
      <option value="">Malayalam</option>
      <option value="">Telugu</option>
   </select>
</body>

</html>

Select multiple file in input

In this example where we are going to use the multiple attribute with <input type='file'> to accpect multiple files from user.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML 'multiple' attribute</title>
</head>
<body>
   <h3>
      Example of HTML 'multiple' attribute
   </h3>
   <form>
      <p>Select files: </p>
      <input type="file" multiple>
      <button onclick="return false;" >
         Submit
      </button>
   </form>
   <p> 
      You can select multiple files at a time, 
      Use Ctrl + click
   </p>

</body>
</html>

Allow Multiple emails entering

Let's look at the following example, where we are going to use the multiple attribute with the input type=email.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML 'multiple' attribute</title>
   <style>
      input:invalid {
         background-color: lightcoral;
      }
   </style>
</head>
<body>
   <h3>
      Example of the HTML 'multiple' attribute
   </h3>
   <form>
      <label>Multiple Emails: </label>
      <input type="email" name='email' multiple> 
      (with multiple attribute) 
      <br>
      <br>

      <label for="">Single Email: </label>
      <input type="email" name='email'> 
      (without multiple attribute) 
      <br>
      <br>
      <button onclick="return false;" >
         Submit
      </button>
   </form>
</body>
</html>

Supported Browsers

Attribute
multiple	Yes	Yes	Yes	Yes	Yes

html_attributes_reference.htm

Print Page