Форма обратной связи _ Веб-разработка

Содержание

Слайд 3

...
Зачем нужна форма
на сайте?

... Зачем нужна форма на сайте?

Слайд 4

С помощью формы можно:
Залогиниться на сайте
Подписаться на рассылку новостей
Оформить и отправить заказ
Пройти

С помощью формы можно: Залогиниться на сайте Подписаться на рассылку новостей Оформить
опрос и тест
Что-нибудь еще, на что хватит фантазии...

Слайд 5

...
Форма нужна для получения данных от посетителей

... Форма нужна для получения данных от посетителей

Слайд 6

Как работают формы?

Пользователь заполняет поля формы и нажимает кнопку “Отправить”.

Сервер обрабатывает

Как работают формы? Пользователь заполняет поля формы и нажимает кнопку “Отправить”. Сервер
данные и отдает браузеру новую страницу.

Пользователь получает новую страницу в зависимости от введенных данных.

Слайд 7

Задача №1 | Найти формы на сайте

Заходим на сайт Института Программных Систем

Задача №1 | Найти формы на сайте Заходим на сайт Института Программных
и находим сколько форм спрятано на главной странице.
https://www.institutps.ru/

Слайд 8

...
Как добавить форму
на сайт?

... Как добавить форму на сайт?

Слайд 9

Из чего состоит веб-форма?

Внутри атрибута action указываем путь к обработчику формы.
Метод -

Из чего состоит веб-форма? Внутри атрибута action указываем путь к обработчику формы.
это способ передачи данных. Существует два метода: get и post. Пока пользуемся методом get.

Слайд 10

Из чего состоит веб-форма?

Формы состоят из полей ввода текста, переключателей, выпадающих списков.

Из чего состоит веб-форма? Формы состоят из полей ввода текста, переключателей, выпадающих
У них обязательно должен быть указан type и name.
Чтобы мы смогли отправить данные из формы, нужна кнопка. Ей указывается тип submit.

Слайд 11

Задача №2 | Добавить форму подписки

Очередное письмо во входящих. Посмотрим?
http://bit.ly/2P58lnd

Задача №2 | Добавить форму подписки Очередное письмо во входящих. Посмотрим? http://bit.ly/2P58lnd

Слайд 12

...
Что еще умеет
форма?

... Что еще умеет форма?

Слайд 13

Ввод пароля

Поле с типом password скрывает введенные символы.

Ввод пароля Поле с типом password скрывает введенные символы.

Слайд 14

Область ввода текста