Skip to content
Related Articles

Related Articles

Improve Article

How to specify that a user can enter more than one value in an input element in HTML5?

  • Last Updated : 12 Apr, 2021

The multiple attribute is used to specify whether the user can enter more than one value in an input element. It is a Boolean attribute. When set to true, the input element can accept more than one value. The multiple properties can be used in the following ways.

  • With the <input> tag only the Email and File type accepts the multiple attribute.
  • With the <select> tag when the multiple attribute is used, most of the browsers display a scrolling list box instead of the simple one line dropdown list. This allows the user to select multiple options.

Example 1: This example shows how multiple emails can be entered in the input area. Each email is separated by a comma. Any trailing and leading whitespaces are removed from each address in the list.

HTML




<html>
<body>
    <form action=" ">
       
       
<p>
        <label>
            Write down the E-Mails of the
              peoples you want to send the mail
        </label>
        <br>
        <sub>
            (You can enter multiple E-Mail with
            each seperated by comma)
        </sub>
        <input type="email" name="email"
               id="email" multiple size="50">
      </p>
 
       
<p>
         <input type="submit" value="Submit">
      </p>
 
 
    </form>
</body>
</html>

Output:

Before entering the email addresses

  •  



After entering the email addresses

  •  

Example 2: This example shows how multiple files can be selected using the <input> tag. Normally only one file is allowed, however using the multiple, the user can select more than one file. 

HTML




<html>
<body>
    <form action=" ">
       
       
<p>
        <label for="file">
            Upload the image files :
        </label>
        <input type="file" name="upload"
               id="upload" multiple
               accept=".jpeg,.jpg,.png">
        <br><br>
        <label for="file">
            Upload the Text files :
        </label>
        <input type="file" name="upload"
               id="upload" multiple
               accept=".txt">
      </p>
 
       
<p>
          <input type="submit" value="Submit">
      </p>
 
 
    </form>
</body>
</html>

Output:

Before adding the files:

  •  

After adding the files:

  •  

Example 3: This example shows how multiple options can be selected in a <select> input. The user can select zero or more options from the list of options by using the CTRL button or use a solution given by the developer.

HTML




<html>
<body>
  <form action=" ">
     
<p>
      With multiple attribute:   
      <label for="course">
        Select the course you like:
      </label>
      <select multiple name="course"
              id="course">
        <option>HTML</option>
        <option>CSS</option>
        <option>JavaScript</option>
        <option>Java</option>
        <option>C++</option>
        <option>C</option>
        <option>Python</option>
      </select>
    </p>
 
 
     
     
<p>
      Without multiple attribute:
      <label for="course">
        Select the course you like:
      </label>
      <select name="course" id="course">
        <option>HTML</option>
        <option>CSS</option>
        <option>JavaScript</option>
        <option>Java</option>
        <option>C++</option>
        <option>C</option>
        <option>Python</option>
      </select>
    </p>
 
 
     
     
<p>
      <input type="submit" value="Submit">
    </p>
 
 
  </form>
</body>
</html>

Output:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :