Embedded Files
The multiple attribute is used with email and file input types. It's a Boolean attribute, so here are the different syntax possibilities:
<input type="email|file" multiple>
<input type="email|file" multiple="multiple">
<input type="email|file" multiple="">
With <input type="email">
With <input type="email">
With the <input type="email">, this attribute enables the user to enter a set of addresses, separated by a comma instead of a single address. Entering several addresses will keep the input field valid.
Complete source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Jsbin</title>
<style>
input:invalid {
background-color: lightPink;
}
input:valid {
background-color: lightGreen;
}
fieldset {
border:1px solid;
padding:20px;
}
</style>
</head>
<body>
<p>This form uses: <code><input type="email" name="myemail" <b>multiple</b>></code></p>
<form>
<fieldset>
<legend>With the multiple attribute </legend>
<label>Enter several email addresses: </label>
<input type="email" name="myemail" title="you can enter multiple emails addresses, separated by a comma" multiple/>
<button>Submit</button>
</fieldset>
</form>
<p>
<p>This form does not use the multiple attribute:</p>
<form>
<fieldset>
<legend>Without the multiple attribute </legend>
<label>Enter several email addresses: </label>
<input type="email" name="myemail" title="only one address please!"/>
<button>Submit</button>
</fieldset>
</form>
<p>
Type in a list of email addresses separated by a comma. Look at the input field background color (pink = invalid, green = valid), try to submit. </p>
</body>
</html>
With <input type="file">
With <input type="file">
With this type of input field, multiple files can be chosen (whereas before HTML5, only a single file could be chosen).
Typical use: <input type=file multiple>
Try these in your browser.
Use the standard key modifiers (shift, control, command) for selecting multiple files when the file chooser dialog popup.
Page updated
Google Sites
Report abuse