Атрибут multiple тега <input>
Описание
Атрибут multiple позволяет пользователю выбрать несколько значений в элементе <input>. Применяется к типам: file и email, а также к элементу <select>.
<!-- Для загрузки нескольких файлов -->
<label for="file-upload">Выберите файлы:</label>
<input type="file" id="file-upload" name="files" multiple>
<!-- Для ввода нескольких email -->
<label for="emails">Email адреса (через запятую):</label>
<input type="email" id="emails" name="emails" multiple>
Поддерживаемые типы input:
| Тип | Поведение | Пример |
|---|---|---|
| file | Позволяет выбрать несколько файлов | <input type="file" multiple> |
| Позволяет ввести несколько email через запятую | <input type="email" multiple> |
Рекомендации:
- Для
type="file"укажитеacceptдля ограничения типов файлов - Для
type="email"добавьте JavaScript-валидацию каждого адреса - Ограничьте максимальное количество файлов (через JavaScript)
- Предусмотрите обработку на сервере для множественных значений
Ограничения:
- В IE9 и ниже не поддерживается для
type="file" - Мобильные браузеры могут по-разному реализовывать множественный выбор
- Для
type="email"требуется ручная проверка формата каждого адреса - Нет встроенного ограничения количества файлов
Пример с валидацией email:
<label for="invite-emails">Email для приглашения:</label>
<input type="email" id="invite-emails" name="invite-emails"
multiple placeholder="email1@example.com, email2@example.com">
<script>
document.getElementById('invite-emails').addEventListener('blur', function() {
const emails = this.value.split(',');
for(let email of emails) {
if(!email.trim().match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) {
alert(`Некорректный email: ${email.trim()}`);
this.focus();
return;
}
}
});
</script>
Примечание: Атрибут multiple значительно расширяет возможности форм, но требует дополнительной обработки как на клиенте, так и на сервере. Для файлов учитывайте ограничения размера и количества на стороне сервера.