Загрузка файлов (input type='file')

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Опубликовано 04.04.2025
Просмотры 25
Автор
Рек. время прохождения 2 минуты
Упражнений 8
Комментарии 0
Тренажер HTML
На этой странице мы разберемся, как дать пользователям возможность загружать файлы на сайт. Для этого в HTML существует специальный элемент формы. В этих заданиях мы пройдем путь от создания самой простой кнопки выбора файла до более сложных конструкций: научимся разрешать загрузку нескольких файлов одновременно, фильтровать их по типу (например, разрешать только картинки) и даже создавать собственные, красиво оформленные кнопки загрузки вместо стандартных. Все задачи построены на практике: вам будет дан готовый CSS и часть HTML-кода, а вам останется только заполнить пропуски, чтобы всё заработало как надо. Это отличный способ закрепить знания и увидеть результат своих действий сразу же.
Список тем

Создание простого поля для загрузки

id: 37860_file-input-task-1

Давайте начнем с основ. Ваша задача — создать стандартное поле для загрузки файлов. В HTML для этого используется тег <input>, но с определенным значением атрибута type. Допишите недостающую часть кода, чтобы на экране появилась кнопка для выбора файла.

CSS
body {
  padding: 15px;
  font-family: sans-serif;
}

form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
HTML
<form>
  <label for="file-upload">Выберите файл:</label>
  <input type="input1" id="file-upload">
</form>
Чтобы создать поле для загрузки файлов, используется тег <input>. Его атрибуту `type` необходимо присвоить значение `file`. В итоге у вас должна получиться конструкция: <input type="file">.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Связь метки и поля ввода

id: 37860_file-input-task-2

Хорошей практикой является связывание текстовой метки (<label>) с полем ввода. Это улучшает доступность и позволяет пользователю нажимать на текст для активации поля. Свяжите метку с полем ввода, используя атрибуты `for` и `id`.

CSS
body {
  padding: 15px;
  font-family: sans-serif;
}

form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
HTML
<form>
  <label input1="avatar-upload">Загрузить аватар:</label>
  <input type="file" input2="avatar-upload">
</form>
Связь между <label> и <input> устанавливается с помощью атрибута `for` у метки и `id` у поля ввода. Значения этих двух атрибутов должны быть одинаковыми. Например: <label for="my-file">...</label> и <input id="my-file">.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Имя поля для отправки на сервер

id: 37860_file-input-task-3

Когда форма отправляется на сервер, каждое поле должно иметь уникальное имя, чтобы сервер мог понять, какие данные откуда пришли. Добавьте полю для загрузки файла атрибут `name` со значением `user_photo`.

CSS
body {
  padding: 15px;
  font-family: sans-serif;
}

form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
HTML
<form action="#" method="post">
  <label for="photo">Ваше фото:</label>
  <input type="file" id="photo" input1="user_photo">
</form>
Чтобы задать имя полю ввода, которое будет использоваться при отправке формы, используется атрибут `name`. Вам нужно добавить `name="user_photo"` к вашему тегу <input>.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Выбор нескольких файлов

id: 37860_file-input-task-4

По умолчанию поле для загрузки позволяет выбрать только один файл. Чтобы разрешить пользователю выбирать несколько файлов одновременно (например, зажав Ctrl или Shift), нужно добавить специальный атрибут. Добавьте его в код.

CSS
body {
  padding: 15px;
  font-family: sans-serif;
}

form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
HTML
<form>
  <label for="gallery">Загрузите фото для галереи:</label>
  <input type="file" id="gallery" name="images" input1>
</form>
Чтобы разрешить выбор нескольких файлов, к тегу `<input type="file">` необходимо добавить булевый атрибут `multiple`. Ему не нужно присваивать значение.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Ограничение типов файлов: только изображения

id: 37860_file-input-task-5

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

CSS
body {
  padding: 15px;
  font-family: sans-serif;
}

form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
HTML
<form>
  <label for="avatar">Аватар (только изображения):</label>
  <input type="file" id="avatar" name="avatar" accept="input1">
</form>
Для фильтрации файлов по типу используется атрибут `accept`. Чтобы разрешить любые изображения, ему нужно присвоить значение `image/*`. Звездочка означает любой подтип (png, jpg, gif и т.д.).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Ограничение по конкретным расширениям

id: 37860_file-input-task-6

Помимо общих типов, можно указывать и конкретные расширения файлов. Ваша задача — сделать так, чтобы поле для загрузки принимало только файлы форматов PDF и Microsoft Word (.docx).

CSS
body {
  padding: 15px;
  font-family: sans-serif;
}

form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
HTML
<form>
  <label for="document">Загрузите документ (PDF или DOCX):</label>
  <input type="file" id="document" name="doc" accept="input1, .docx">
</form>
В атрибуте `accept` можно перечислять нужные расширения файлов через запятую. Расширения должны начинаться с точки. Например: `.pdf, .docx`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Стилизация кнопки загрузки

id: 37860_file-input-task-7

Стандартный вид <input type="file"> сложно изменить. Распространенный прием — скрыть сам input и стилизовать связанный с ним <label> как кнопку. В CSS уже все готово. Ваша задача — правильно связать стилизованную метку со скрытым полем ввода.

CSS
body { padding: 15px; font-family: sans-serif; }
.hidden-input {
  display: none;
}
.custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
  background-color: #f0f0f0;
  border-radius: 4px;
}
.custom-file-upload:hover {
  background-color: #e0e0e0;
}
HTML
<form>
  <label input1="styled-upload" class="custom-file-upload">
    📂 Выбрать файл
  </label>
  <input class="hidden-input" id="styled-upload" type="input2" name="custom-file">
</form>
Чтобы эта техника сработала, нужно сделать две вещи: 1. Скрыть поле ввода, добавив ему атрибут `hidden` или соответствующий класс CSS (в нашем случае `hidden-input`). 2. Убедиться, что атрибут `for` у тега `<label>` совпадает с атрибутом `id` у тега `<input>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Обязательное поле для загрузки

id: 37860_file-input-task-8

Иногда загрузка файла является обязательным действием для отправки формы. Чтобы браузер не позволил отправить форму, пока файл не выбран, нужно добавить полю ввода специальный атрибут.

CSS
body { padding: 15px; font-family: sans-serif; }
form { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
button { padding: 8px 15px; }
HTML
<form>
  <label for="contract">Подписанный договор:</label>
  <input type="file" id="contract" name="contract" input1>
  <button type="submit">Отправить</button>
</form>
Чтобы сделать поле обязательным для заполнения, используется булевый атрибут `required`. Браузер автоматически проверит, выбран ли файл, перед отправкой формы.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру