HTML - multiple Attribute

The HTML multiple attribute is a Boolean attribute, that allows form controls to accept more than one value. It is valid for the email and file input types and the <select> tag.

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

Following is the syntax of the HTML multiple attribute −

<tag multiple></tag>

Example

In the following example, we are going to use the multiple attribute with the select tag.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML 'multiple' attribute</title>
</head>
<body>
   <!--HTML 'multiple' attribute-->
   <p>Select languages you knows(used multiple attribute): </p>
   <select multiple>
      <option value="">Hindi</option>
      <option value="">English</option>
      <option value="">Telugu</option>
   </select>
   <p>Select language(without multiple attribute):</p>
   <select>
      <option value="">Hindi</option>
      <option value="">English</option>
      <option value="">Telugu</option>
   </select>
</body>
</html>

When we run the above code, it will generate an output consisting of the dropdown menu displayed on the webapage mentioned with multiple attribute allowing the user to choose one or more options.

Example

Considering the another scenario, where we are going to use the multiple attribute.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML 'multiple' attribute</title>
</head>
<body>
   <!--HTML 'multiple' attribute-->
   <p>Example of the HTML 'multiple' attribute</p>
   <form>
      <p>Select files: </p>
      <input type="file" multiple>
      <button>Submit</button>
   </form>
</body>
</html>

On running the above code, the output window will pop up displaying the click button along with a upload for the user on the webpage.

Example

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

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML 'multiple' attribute</title>
   <style>
      input {
         width: 240px;
         padding: 7px;
      }

      button {
         padding: 7px;
      }

      input:invalid {
         background-color: lightcoral;
      }
   </style>
</head>
<body>
   <!--HTML 'multiple' attribute-->
   <p>Example of the HTML 'multiple' attribute</p>
   <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>Submit</button>
   </form>
</body>
</html>

When we run the above code, it will generate an output consisting of the input field along with a click button on the webpage.

html_attributes_reference.htm
Advertisements