Атрибут accept тега <form> — типи файлів для вивантаження
accept
Атрибут accept вказує типи файлів, які приймає сервер; інакше вона ігнорується. Значення має бути списком унікальних специфікаторів типу вмісту, розділених комами.
Цей атрибут був видалений в HTML5 і його не слід більше використовувати. Натомість, використовуйте атрибут accept для окремих елементів <input> .
Загальний опис
автор: NagarD
Синтаксис
<form accept="...">
...
</form>Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | ≤12.1 | 12 | 6 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Угорі — форма з атрибутом accept, який не робить нічого: поле всередині лишається без жодного фільтра. Нижче — чотири поля з власними accept, у кожного своя стратегія: група, точний MIME-тип, розширення й змішаний список. Стилі підписують кожен рядок значенням із самого атрибута, а зелена рамка позначає форму, у якій усе, що потрібно для файлів, стоїть на своїх місцях.
HTML
<form class="bad" accept="image/png" method="post" action="#">
<p class="verdykt">accept на формі — вилучений атрибут, поле його не бачить</p>
<p class="ryadok"><input type="file"><span class="tag">без accept</span></p>
</form>
<form class="good" method="post" action="#" enctype="multipart/form-data">
<p class="verdykt">accept на полях, enctype="multipart/form-data" на формі</p>
<p class="ryadok"><input type="file" accept="image/*"><span class="tag">image/*</span></p>
<p class="ryadok"><input type="file" accept="image/png"><span class="tag">image/png</span></p>
<p class="ryadok"><input type="file" accept=".pdf"><span class="tag">.pdf</span></p>
<p class="ryadok"><input type="file" accept="image/jpeg,.png,.webp" multiple><span class="tag">змішаний список плюс multiple</span></p>
</form>
<p class="note">У рамці пісочниці діалог вибору файлу не відкривається, тож фільтр тут
не перевірити наживо — але видно головне: атрибут стоїть на полі, а не на формі.</p>CSS
form {
max-width: 560px;
margin-bottom: 14px;
padding: 10px 12px;
border-radius: 6px;
border: 2px solid #b9c6d8;
}
.verdykt {
margin: 0 0 8px;
font-weight: 600;
}
.ryadok {
display: flex;
align-items: center;
gap: 10px;
margin: 6px 0;
}
.tag {
padding: 2px 8px;
border-radius: 4px;
background: #ffffff;
border: 1px solid #b9c6d8;
font: 13px/1.7 ui-monospace, monospace;
color: #5a6472;
}
form::after {
display: block;
margin-top: 8px;
font: 13px/1.6 ui-monospace, monospace;
}
form[accept]::after {
content: "<form accept=\"" attr(accept) "\"> — цей рядок не робить нічого";
color: #c0392b;
}
form[enctype]::after {
content: "<form enctype=\"" attr(enctype) "\"> — а без цього рядка файл не доїде";
color: #1b5e20;
}
.bad {
border-color: #d64545;
background: #fff4f4;
}
.good {
border-color: #3a9a4f;
background: #f3fbf4;
}
.note {
max-width: 560px;
color: #5a6472;
font-size: .9em;
}Різниця між HTML 4.01 та HTML5
В HTML5 видалений і його не слід більше використовувати.
Коментарі
Коментарів ще немає — будьте першим!