The multiple attribute is applied to a form field element to indicate that more than one value can be selected at a time. The exact behavior of the multiple attribute depends on the context in which it is applied.

Syntax:

<input type="text" list="suggestions" multiple />

<input type="file" multiple />

<select multiple />

Elements:

When applied to a select element, the element is displayed as a container displaying multiple entries which can be toggled as selected or not selected.

When applied to a standard input element which is associated with a datalist element by way of a list attribute, additional items selected from the set of suggested values will be appended to the value of the text box, delimited with a comma.

When applied to an input type=”file” element, the multiple attribute allows multiple files to be selected within the file selection dialog.

Example

The attribute multiple example:

​x
 
<!DOCTYPE html>
<html>
​
<body>
    
<h4>The <i>multiple attribute</i> example:</h4>
​
<form action="#" method="post">
  <p>
    <label>Colors: <input name="colors" type="text" list="colors"
     multiple /></label>
    <datalist id="colors">
      <option value="red" label="Red">
      <option value="green" label="Green">
      <option value="blue" label="Blue">
      <option value="yellow" label="Yellow">
      <option value="magenta" label="Magenta">
    </datalist>
  </p>
  <p>
    <label for="filename">Select Files:</label>
    <input type="file" id="filename" name="filename" multiple />
  </p>
  <p>
    <label for="planets">Select Planets:</label>
    <select id="planets" name="planets" multiple>
      <option>Mercury</option>
      <option>Venus</option>
      <option>Earth</option>
      <option>Mars</option>
      <option>Jupiter</option>
      <option>Saturn</option>
      <option>Uranus</option>
      <option>Neptune</option>
      <option>Pluto</option>
    </select>
  </p>
  <p>
    <input type="submit" value="Submit" />
  </p>
</form>
​
<h5>p.s. submitting the form will not generate any action</h5>
​
</body>
</html>

 

›› go to examples ››