Веб-разработка требует от программиста определенных знаний и навыков для создания как простых, так и сложных проектов. Почти каждый современный онлайн-сервис оснащен так называемой формой обратной связи. В HTML тоже есть формы. Именно их предстоит изучить далее.
В статье представлена информация о формах обратной связи для сайтов. Предстоит выяснить, что это такое и для чего используется, познакомиться с основными тегами HTML для их создания, а также изучить наглядный пример разработки онлайн-формы.
Предложенная информация ориентирована на широкий круг лиц. Она подойдет для изучения как обычными пользователями, так и начинающими веб-разработчиками. Предложенные алгоритмы основываются на HTML и CSS – наиболее распространенных инструментах веб-программирования.
Определение и области применения
Форма обратной связи – то, что используется на онлайн-страницах, в мобильных приложениях, «умных» устройствах и на любых сервисах, получающих информацию от тех или иных пользователей. Это полезный элемент виртуального проекта.
Форма – веб-страница или ее часть, позволяющая клиенту (пользователю) отправить свои данные на сайт. Она имеет вид онлайн-анкеты. В форме поддерживаются вопросы с разнообразными вариантами ответов и полями для ввода тех или иных данных. Информация соответствующей анкеты будет отправлена на сервер для дальнейшей обработки или просмотра администрацией веб-сайта.
Обычно рассматриваемый элемент применяется для авторизации на сайтах и в различных приложениях. В них чаще всего требуется указать:
- логин;
- пароль;
- иные авторизационные данные, примером которых могут послужить номера телефонов или электронная почта.
Соответствующие сведения обрабатываются на серверной стороне клиент-серверной модели, после чего они проходят процедуру проверки. Если все верно, клиент (пользователь) получает разрешение входа на сайт/в приложение.
Также веб-формы используются для регистрации людей на различные мероприятия. С их помощью организаторы могут узнать количество потенциальных посетителей, а участники – получить уведомление о начале или изменениях.
Еще один распространенный вариант форм – форма обратной связи. С помощью такого элемента пользователи веб-сервисов и страниц смогут:
- оставлять отзывы;
- задавать вопросы администрации;
- предлагать улучшения проекта;
- предоставлять информацию для связи с представителями проекта.
Подобные элементы чаще всего встречаются в Интернет-магазинах, на сайтах различных организаций, предлагающих те или иные услуги. Далее предстоит разобраться с созданием именно такого компонента для сайта.
Разработка онлайн-формы
Любая форма создается при помощи HTML-верстки проекта. На соответствующем этапе предстоит задать общую структуру онлайн-анкеты, а также поля, доступные для заполнения пользователем. Каждая виртуальная анкета имеет свои ключевые особенности и нюансы. Далее предстоит рассмотреть шаблон создания оценки товара.
В ней будут следующие элементы:
- поле для имени клиента;
- поле для адреса электронной почты пользователя;
- кнопка выбора оценки;
- пространство для короткого отзыва.
Далее верстка будет рассмотрена поэтапно. В конечно итоге у пользователя будет готовый шаблон типичной формы обратной связи для сайта.
Тег form
HTML имеет множество полезных тегов, помогающих в разработке онлайн-проектов. Один из них – form. Он используется для создания онлайн-формы. Form является парным тегом. Все, что находится между открывающим и закрывающим тегом – это элементы управления онлайн-формой.
Form имеет два обязательных атрибута:
- Action. Это – ссылка на скрипт. Обычно action представлен PHP, который отвечает за обработку онлайн-формы. Он обрабатывает введенные в form сведения.
- Method. Так называется метод отправки данных на сервер. Он выражается GET или POST.
Form сообщает браузеру, что в следующем блоке пользователь сможет указывать информацию, которую нужно после этого отправить на сервер.
В качестве атрибута form обычно используется action со ссылкой на скрипт обработки информации. Ссылка может отсутствовать, но после отправки данных страница будет просто перезагружаться. Через атрибут method выбирается тип информационной отправки:
- POST. При выборе такого method для form информация отправляется на сервер в любом объеме. Этот вариант лучше всего подходит для больших онлайн-анкет или баз данных.
- GET. При использовании GET-method для form данные записываются в URL-адрес. Там могут размещаться до 3 000 символов. Этот делает GET неподходящим для больших form. Он является уязвимым, поэтому пароли, номера телефонов и прочую конфиденциальную информацию с его помощью отправлять нельзя. Это связано с тем, что другие пользователи без существенного труда смогут получить доступ к данным. Они пишутся в адресной строке.
Вот элементарный шаблон рассматриваемого элемента веб-сайта:
В form необходимо разместить поля для непосредственного пользовательского ввода. Для этого используются теги:
- Label. Он необходим для создания подписей к элементам.
- Input. Тег, используемый для формирования самого элемента в form.
Вот так будет выглядеть поле для ввода имени:
В label необходимо поместить текст, который пользователь будет видеть в электронной форме перед полем ввода. Само поле создается через тег input. Тип поля устанавливается посредством атрибута type.
Type имеет следующие значения:
- text – ввод одной строчки;
- number – число;
- url – поле для ввода URL-адреса;
- email – поле для ввода адреса электронной почты (с автопроверкой на корректность);
- tel – номер телефона;
- password – поле для ввода пароля, в котором символы автоматически заменяются звездочками.
Это – наиболее распространенные значения атрибута type у form. Представленные «аргументы» просто являются самыми часто встречающимися.
Остается создать второе поле, в котором необходимо запросить у пользователя адрес электронной почты. Здесь тоже используются теги label и input. В качестве значения type указывается email:
Выше – наглядный пример того, как будет выглядеть соответствующий шаблон в программном коде.
Создание поля комментария
Форма для онлайн-магазина готова. Теперь с ее помощью можно узнать пользовательское имя и адрес его электронной почты для формирования ответа. Далее остается добавить текстовое поле – в нем будет оставляться комментарий (отзыв).
Для комментариев HTML предлагает тег textarea. Он оборачивается в label с заголовком поля:
Форма обратной связи почти готова. Теперь нужно добавить кнопку, отвечающую за непосредственную отправку данных. Для этого используется тег button с атрибутом submit. Остается ввести текст, по которому пользователи смогут моментально понять назначение соответствующего элемента управления.
Выше – фрагмент кода, который наглядно демонстрирует внедрение кнопки отправки в форму.
Создание подсказок
Form для отзыва о товаре или услуге почти готова. Теперь в нее можно добавить подсказки – это хороший тон в разработке. Речь идет о подписях, подсказывающих пользователям, какие данные для ввода в form от него необходимы в том или ином случае.
В качестве примера можно привести ситуацию с полем «Имя». Там допустимо ввести не только имя, но и фамилию. В базе данных соответствующая информация не имеет существенного значения, поэтому она не вводится.
Подсказки в form внедряются при помощи атрибута placeholder. В нем пишется текст, который отобразится в поле ввода.
Выше – наглядный пример того, как подсказки будут выглядеть в HTML. На этом этапе форма почти готова. Осталось ее стилизовать.
Стилизация
HTML позволяет создать только «каркас» формы обратной связи. Он описывает элементы, которые будут использоваться на той или иной странице. Для придания онлайн-анкете более презентабельного вида необходимо использовать CSS-стили.
Для этого необходимо:
- В папке проекта сформировать новый документ – style.css.
- В теге head HTML-документа добавить строку: link rel = »stylesheet» href = »style.css».
- Сохранить изменения.
С помощью добавленной строчки браузер будет понимать, где именно описываются стили для той или иной страницы.
В документ style.css необходимо добавить следующий программный код:
Внесенные изменения нужно сохранить.
К формам допустимо применение любых CSS-свойств путем выбора в качестве селекторов HTML-теги. Стили дают возможность внедрения анимации и поведения элементов при наведении на них курсора мышки или указателя клавиатуры.
«Оживление» формы
Форма обратной связи уже готова. С ее помощью пользователь сможет оставить отзыв о товаре или услуги. Если попытаться на данном этапе заполнить ее и кликнуть по кнопке «Отправить», ничего не произойдет. Это связано с тем, что в проекте пока нет скрипта, который собирал бы информацию из полей и вносил бы их в базу данных/пересылал на электронную почту.
«Оживить» форму обратной связи в HTML можно почти на любом языке программирования. Обычно используется тот инструмент разработки, на котором реализован бэкенд веб-сервиса. Это позволит в процессе разработки избежать дополнительных интеграций.
Вот скрипт на PHP:
Скрипт загружается на сервер с установленным заранее PHP. Также разработчику нужно открыть доступ к чтению файлов. После – в верстке формы добавляется ссылка на скрипт и указывается метод обработки информации:
Теперь form будет работать исправно. Как только пользователь кликнет по кнопке «Отправить», введенные в онлайн-анкете данные будут отправлены администратору в виде электронного письма.
Это всего лишь один пример создания электронной формы для веб-страниц. Лучше изучить HTML, CSS и PHP, а также заниматься веб-разработкой, помогут дистанционные компьютерные курсы.
Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в Otus!
