Выбор файла: постоянная подпись и понятное ограничение формата

Назначение

Поле выбора файла должно объяснять назначение загрузки до открытия системного диалога. Название поля и ограничения формата лучше показывать обычным текстом рядом.

Как это работает

Label связывается с input по id, а aria-describedby указывает на пояснение. Accept помогает фильтровать варианты в диалоге, но не подтверждает реальный формат и безопасность выбранного содержимого.

Пример

<label for="attachment">Учебная иллюстрация</label>
<input id="attachment" type="file" name="attachment" accept="image/png,image/jpeg" aria-describedby="attachment-help">
<p id="attachment-help">Для задания выберите PNG или JPEG. Этот пример не отправляет файл на сервер.</p>

Что должно получиться

Браузер открывает стандартный диалог и показывает выбранное имя. Пример не содержит обработчика загрузки или отправки. Реальные файлы для знакомства не нужны: используйте несекретный учебный образец.

Граница применения и частая ошибка

Accept не заменяет серверную проверку типа, размера и прав доступа. Расширение файла тоже нельзя считать доказательством формата. Не скрывайте нативный input без проверенной клавиатурной замены и доступного названия.

Самостоятельная проверка

Откройте диалог клавиатурой, отмените выбор и повторите его. Проверьте длинное имя файла при узком окне. Для будущей загрузки заранее определите лимиты и сообщение об ошибке, не обещая ограничения, которые обработчик ещё не проверяет.

HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.

Связанные материалы

• Клавиатура
• Подписи
• Адаптивность