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

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:
jimishravat2802
HTML-Questions
HTML5
Picked
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
REST API (Introduction)
Design a Tribute Page using HTML & CSS
Build a Survey Form using HTML and CSS
Design a web page using HTML and CSS
Angular File Upload
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to fetch data from an API in ReactJS ?
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array