0:00
[БЕЗ_ЗВУКА] Итак,
сейчас мы с вами попробуем создать простую форму.
Я позволил себе вольность и добавил в наш
шаблон форму HTML болванку HTML-файла.
Теперь мы можем попробовать что-то в нее написать и проверить,
работает это или нет.
Для начала давайте добавим какой-нибудь текст, чтобы проверить,
что наш шаблон корректно отдается.
Напишем заголовок, в нем напишем Форма отзыва.
Запустим наш сервер
и проверим, что наша страница корректно отдается.
Теперь давайте создадим, собственно, саму форму.
Форма создается через тег form.
Создадим тег form и сразу же его закроем.
Если мы сейчас отрендерим наш HTML-файл,
то ничего не увидим, потому что у нас нет внутри
формы никаких инпутов, то есть элементов,
благодаря которым мы можем получить данные от пользователя.
Но перед тем как создать инпуты, давайте разберемся до конца с формой.
В форме мне нужно указать несколько параметров.
В частности, это метод.
Указываем, каким методом мы будем отправлять наши данные из формы.
Также нужно указать, куда мы будем отправлять наши данные.
В данном случае мы будем отправлять
их по тому же ресурсу form.
А так как мы отправляем их по тому же ресурсу, этот параметр можно и опустить.
Теперь мы создадим инпуты.
Давайте создадим input для ввода нашего отзыва.
Будет называться text.
id элементу мы присвоим feedback-text.
Также мы укажем name — это параметр,
который указывает, под каким именем поле будет отправлено на сервер.
Назовем его просто text.
И укажем параметр type, который определяет тип инпута.
В качестве типа инпута может выступать текст,
может выступать число, может выступать дата, цвет,
дата и время, и так далее и тому подобное.
Чтобы узнать, какие типы инпутов существуют,
вы можете пройти по ссылке внизу под этим видео,
но мы сейчас будем использовать только инпуты типа text, number и file.
И еще один, но о нем я расскажу чуть позже.
Итак, мы создали input feedback-text.
Если мы отрендерим форму, можно увидеть, что у нас есть input, но не написано,
что конкретно это такое.
Для того чтобы подписать его, существует тег label.
label нужно указать в параметре for
id инпута, для которого он существует.
Пишем название Отзыв,
сохраняем, проверяем, видим, что наше поле теперь подписано,
и мы с чистой совестью можем продолжать дальше создавать input.
Итак, помимо того, что мы хотим получать отзыв от пользователя,
мы хотим еще получать оценку в виде количества звезд.
Для этого мы создадим input с типом number,
назовем его feedback-grade.
[БЕЗ_ЗВУКА] Подпишем
поле как Оценка.
Проверим, что всё у
нас создалось, что мы можем заполнять его числами.
Буквами пока тоже, но это не страшно.
Создадим еще input для загрузки файлов.
Мы хотим загружать к нашим отзывам еще и фотографии.
Назовем его feedback-image.
[БЕЗ_ЗВУКА] Type у
такого input должен быть file.
Соответствующая подпись.
И соответствующий name.
Еще раз проверяем, что всё работает.
Вот у нас есть кнопка для открытия диалогового окна для выбора файла.
Но чего-то нашей форме не хватает.
Мы можем заполнить данными всю нашу форму, но непонятно, как ее отправить.
Для того чтобы отправить форму, есть специальный input, он называется submit.
Сейчас мы с вами его создадим.
feedback-submit.
Тайпом выступает, как нетрудно догадаться, submit.
И name ему не обязательно.
Проверяем.
Для того чтобы отправлять файлы из этой формы,
нужно сделать еще одну небольшую хитрость, нужно указать параметр enctype.
Enctype — это указание на формат
кодирования информации отправляемой формы.
Для того чтобы отправить файл вместе с
другим данными, в нашем случае это строка и число,
нам нужно использовать enctype="multipart/form-data".
[БЕЗ_ЗВУКА] Всё,
мы готовы к тому, чтобы отправлять нашу форму.
Давайте проверим, что форма действительно отправляется,
и что данные внутри нее действительно отправляются.
Для этого создадим небольшой текстовый файлик,
который у нас будет выполнять роль фотографии, напишем там Hello world.
Сохраним этот текстовый
файлик где-нибудь
отдельно.
Итак, теперь заполняем нашу форму.
[БЕЗ_ЗВУКА] Выбираем наш файлик,
открываем Def Panel, чтобы увидеть, что наш запрос отправлен.
Проверяем и видим, что есть 403-я ошибка от Django.
Это ошибка CSRF verification failed.
Для того чтобы обойти эту ошибку, нам нужно сделать следующее.
Почему эта ошибка возникает и что это такое, мы разберем чуть позже.
Пока мы сделаем просто вот так.
csfr_token.
Указываем тег csfr_token,
и теперь всё у нас должно работать правильно.
Проверяем еще раз, видим, сервер не перезагрузился,
вернее мы не перезагрузили форму.
Заполняем нашу форму, заполняем нашу оценку,
выбираем наш файл и отправляем запрос.
Как видим, запрос был успешно отправлен.
Смотрим внутрь запроса, видим, что отправляются
данные из формы текст и число,
а также отправляется текстовый файл с текстом Hello world.
На данный момент это все, Мы попробовали с вами и, собственно, успешно создали форму.
Заполнили ее инпутами, даже отправили данные.
Но данные на сервере не были приняты, потому что мы пока не реализовали
эту функциональность, что мы сделаем в одном из следующих видео.
А непосредственно в следующем видео мы с вами добавим параметр
валидации к той форме, что у нас уже есть.
[ЗВУК] [БЕЗ_ЗВУКА]
Абрамов Тимур
Пестров Никита
Опрышко Александр
Партилов Алексей
