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

Last Updated : 24 Apr, 2023

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 separated 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>