Rivalry2

Форма обратной связи на HTML и CSS: что нужно знать о ее создании OTUS

2026-03-10 17:49 Diff

https://otus.ru/journal/forma-obratnoj-svyazi-na-html-i-css-chto-nuzhno-znat-o-ee-sozdanii/oj-1080x720-2024-07-14t134945-505/

Определение и области применения
Разработка онлайн-формы
Стилизация
«Оживление» формы

Веб-разработка требует от программиста определенных знаний и навыков для создания как простых, так и сложных проектов. Почти каждый современный онлайн-сервис оснащен так называемой формой обратной связи. В 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!


<!DOCTYPE html>
<html dir="ltr" lang="ru-RU">

<head>

	<meta charset="UTF-8" />
	<meta http-equiv="x-ua-compatible" content="ie=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<link rel="profile" href="http://gmpg.org/xfn/11" />
	
	<title>Форма обратной связи на HTML и CSS: что нужно знать о ее создании OTUS</title>

		<!-- All in One SEO 4.5.2.1 - aioseo.com -->
		<meta name="description" content="Веб-разработка требует от программиста определенных знаний и навыков для создания как простых, так и сложных проектов. Почти каждый современный онлайн-сервис оснащен так называемой формой обратной связи. В HTML тоже есть формы. Именно их предстоит изучить далее. В статье представлена информация о формах обратной связи для сайтов. Предстоит выяснить, что это такое и для чего используется," />
		<meta name="robots" content="max-image-preview:large" />
		<link rel="canonical" href="https://otus.ru/journal/forma-obratnoj-svyazi-na-html-i-css-chto-nuzhno-znat-o-ee-sozdanii/" />
		<meta name="generator" content="All in One SEO (AIOSEO) 4.5.2.1" />
		<script type="application/ld+json" class="aioseo-schema">
			{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/otus.ru\/journal\/forma-obratnoj-svyazi-na-html-i-css-chto-nuzhno-znat-o-ee-sozdanii\/#article","name":"\u0424\u043e\u0440\u043c\u0430 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0441\u0432\u044f\u0437\u0438 \u043d\u0430 HTML \u0438 CSS: \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0437\u043d\u0430\u0442\u044c \u043e \u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 OTUS","headline":"\u0424\u043e\u0440\u043c\u0430 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0441\u0432\u044f\u0437\u0438 \u043d\u0430 HTML \u0438 CSS: \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0437\u043d\u0430\u0442\u044c \u043e \u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438","author":{"@id":"https:\/\/otus.ru\/journal\/author\/a-pavlenko\/#author"},"publisher":{"@id":"https:\/\/otus.ru\/journal\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/otus.ru\/journal\/wp-content\/uploads\/2024\/07\/oj-1080x720-2024-07-14T134945.505.jpg","width":2245,"height":1587},"datePublished":"2024-07-14T10:50:08+00:00","dateModified":"2024-07-14T10:50:11+00:00","inLanguage":"ru-RU","mainEntityOfPage":{"@id":"https:\/\/otus.ru\/journal\/forma-obratnoj-svyazi-na-html-i-css-chto-nuzhno-znat-o-ee-sozdanii\/#webpage"},"isPartOf":{"@id":"https:\/\/otus.ru\/journal\/forma-obratnoj-svyazi-na-html-i-css-chto-nuzhno-znat-o-ee-sozdanii\/#webpage"},"articleSection":"\u041f\u043e\u043b\u0435\u0437\u043d\u043e\u0435, \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435"},{"@type":"BreadcrumbList","@id":"https:\/\/otus.ru\/journal\/forma-obratnoj-svyazi-na-html-i-css-chto-nuzhno-znat-o-ee-sozdanii\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/otus.ru\/journal\/#listItem","position":1,"name":"\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430","item":"https:\/\/otus.ru\/journal\/","nextItem":"https:\/\/otus.ru\/journal\/forma-obratnoj-svyazi-na-html-i-css-chto-nuzhno-znat-o-ee-sozdanii\/#listItem"},{"@type":"ListItem","@id":"https:\/\/otus.ru\/journal\/forma-obratnoj-svyazi-na-html-i-css-chto-nuzhno-znat-o-ee-sozdanii\/#listItem","position":2,"name":"\u0424\u043e\u0440\u043c\u0430 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0441\u0432\u044f\u0437\u0438 \u043d\u0430 HTML \u0438 CSS: \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0437\u043d\u0430\u0442\u044c \u043e \u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438","previousItem":"https:\/\/otus.ru\/journal\/#listItem"}]},{"@type":"Organization","@id":"https:\/\/otus.ru\/journal\/#organization","name":"\u041e\u0442\u0443\u0441 \u043e\u043d\u043b\u0430\u0439\u043d-\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435","url":"https:\/\/otus.ru\/journal\/","sameAs":["https:\/\/www.youtube.com\/channel\/UCetgtvy93o3i3CvyGXKFU3g"],"contactPoint":{"@type":"ContactPoint","telephone":"+74999389202","contactType":"Customer Support"}},{"@type":"Person","@id":"https:\/\/otus.ru\/journal\/author\/a-pavlenko\/#author","url":"https:\/\/otus.ru\/journal\/author\/a-pavlenko\/","name":"A. Pavlenko","image":{"@type":"ImageObject","@id":"https:\/\/otus.ru\/journal\/forma-obratnoj-svyazi-na-html-i-css-chto-nuzhno-znat-o-ee-sozdanii\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/d4c499a104d7c2522fa41f89e6819499?s=96&d=mm&r=g","width":96,"height":96,"caption":"A. Pavlenko"}},{"@type":"WebPage","@id":"https:\/\/otus.ru\/journal\/forma-obratnoj-svyazi-na-html-i-css-chto-nuzhno-znat-o-ee-sozdanii\/#webpage","url":"https:\/\/otus.ru\/journal\/forma-obratnoj-svyazi-na-html-i-css-chto-nuzhno-znat-o-ee-sozdanii\/","name":"\u0424\u043e\u0440\u043c\u0430 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0441\u0432\u044f\u0437\u0438 \u043d\u0430 HTML \u0438 CSS: \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0437\u043d\u0430\u0442\u044c \u043e \u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 OTUS","description":"\u0412\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043e\u0442 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u0437\u043d\u0430\u043d\u0438\u0439 \u0438 \u043d\u0430\u0432\u044b\u043a\u043e\u0432 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u0430\u043a \u043f\u0440\u043e\u0441\u0442\u044b\u0445, \u0442\u0430\u043a \u0438 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432. \u041f\u043e\u0447\u0442\u0438 \u043a\u0430\u0436\u0434\u044b\u0439 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 \u043e\u043d\u043b\u0430\u0439\u043d-\u0441\u0435\u0440\u0432\u0438\u0441 \u043e\u0441\u043d\u0430\u0449\u0435\u043d \u0442\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u043e\u0439 \u0444\u043e\u0440\u043c\u043e\u0439 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0441\u0432\u044f\u0437\u0438. \u0412 HTML \u0442\u043e\u0436\u0435 \u0435\u0441\u0442\u044c \u0444\u043e\u0440\u043c\u044b. \u0418\u043c\u0435\u043d\u043d\u043e \u0438\u0445 \u043f\u0440\u0435\u0434\u0441\u0442\u043e\u0438\u0442 \u0438\u0437\u0443\u0447\u0438\u0442\u044c \u0434\u0430\u043b\u0435\u0435. \u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0430 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u0444\u043e\u0440\u043c\u0430\u0445 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0441\u0432\u044f\u0437\u0438 \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u043e\u0432. \u041f\u0440\u0435\u0434\u0441\u0442\u043e\u0438\u0442 \u0432\u044b\u044f\u0441\u043d\u0438\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0438 \u0434\u043b\u044f \u0447\u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f,","inLanguage":"ru-RU","isPartOf":{"@id":"https:\/\/otus.ru\/journal\/#website"},"breadcrumb":{"@id":"https:\/\/otus.ru\/journal\/forma-obratnoj-svyazi-na-html-i-css-chto-nuzhno-znat-o-ee-sozdanii\/#breadcrumblist"},"author":{"@id":"https:\/\/otus.ru\/journal\/author\/a-pavlenko\/#author"},"creator":{"@id":"https:\/\/otus.ru\/journal\/author\/a-pavlenko\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/otus.ru\/journal\/wp-content\/uploads\/2024\/07\/oj-1080x720-2024-07-14T134945.505.jpg","@id":"https:\/\/otus.ru\/journal\/forma-obratnoj-svyazi-na-html-i-css-chto-nuzhno-znat-o-ee-sozdanii\/#mainImage","width":2245,"height":1587},"primaryImageOfPage":{"@id":"https:\/\/otus.ru\/journal\/forma-obratnoj-svyazi-na-html-i-css-chto-nuzhno-znat-o-ee-sozdanii\/#mainImage"},"datePublished":"2024-07-14T10:50:08+00:00","dateModified":"2024-07-14T10:50:11+00:00"},{"@type":"WebSite","@id":"https:\/\/otus.ru\/journal\/#website","url":"https:\/\/otus.ru\/journal\/","name":"OTUS JOURNAL","description":"Blog about IT","inLanguage":"ru-RU","publisher":{"@id":"https:\/\/otus.ru\/journal\/#organization"}}]}
		</script>
		<!-- All in One SEO -->

<link rel='dns-prefetch' href='//otus.ru' />
<link rel='dns-prefetch' href='//fonts.googleapis.com' />
<link rel='stylesheet' id='wp-block-library-css' href='https://otus.ru/journal/wp-includes/css/dist/block-library/style.min.css?ver=6.4.7' type='text/css' media='all' />
<style id='classic-theme-styles-inline-css' type='text/css'>
/*! This file is auto-generated */
.wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none}
</style>
<style id='global-styles-inline-css' type='text/css'>
body{--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}
.wp-block-navigation a:where(:not(.wp-element-button)){color: inherit;}
:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}
:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}
.wp-block-pullquote{font-size: 1.5em;line-height: 1.6;}
</style>
<link rel='stylesheet' id='wbcr-comments-plus-url-span-css' href='https://otus.ru/journal/wp-content/plugins/clearfy/components/comments-plus/assets/css/url-span.css?ver=2.2.0' type='text/css' media='all' />
<link rel='stylesheet' id='wpel-style-css' href='https://otus.ru/journal/wp-content/plugins/wp-external-links/public/css/wpel.css?ver=2.59' type='text/css' media='all' />
<link rel='stylesheet' id='ez-toc-css' href='https://otus.ru/journal/wp-content/plugins/easy-table-of-contents/assets/css/screen.min.css?ver=2.0.61' type='text/css' media='all' />
<style id='ez-toc-inline-css' type='text/css'>
div#ez-toc-container .ez-toc-title {font-size: 120%;}div#ez-toc-container .ez-toc-title {font-weight: 500;}div#ez-toc-container ul li {font-size: 95%;}div#ez-toc-container nav ul ul li {font-size: 90%;}
.ez-toc-container-direction {direction: ltr;}.ez-toc-counter ul{counter-reset: item ;}.ez-toc-counter nav ul li a::before {content: counters(item, ".", decimal) ". ";display: inline-block;counter-increment: item;flex-grow: 0;flex-shrink: 0;margin-right: .2em; float: left; }.ez-toc-widget-direction {direction: ltr;}.ez-toc-widget-container ul{counter-reset: item ;}.ez-toc-widget-container nav ul li a::before {content: counters(item, ".", decimal) ". ";display: inline-block;counter-increment: item;flex-grow: 0;flex-shrink: 0;margin-right: .2em; float: left; }
</style>
<link rel='stylesheet' id='contentberg-fonts-css' href='https://fonts.googleapis.com/css?family=Roboto%3A400%2C500%2C700%7CPT+Serif%3A400%2C400i%2C600%7CIBM+Plex+Serif%3A500' type='text/css' media='all' />
<link rel='stylesheet' id='contentberg-core-css' href='https://otus.ru/journal/wp-content/themes/contentberg/style.css?ver=1.8.3' type='text/css' media='all' />
<link rel='stylesheet' id='contentberg-lightbox-css' href='https://otus.ru/journal/wp-content/themes/contentberg/css/lightbox.css?ver=1.8.3' type='text/css' media='all' />
<link rel='stylesheet' id='font-awesome-css' href='https://otus.ru/journal/wp-content/themes/contentberg/css/fontawesome/css/font-awesome.min.css?ver=1.8.3' type='text/css' media='all' />
<script type="text/javascript" id="breeze-prefetch-js-extra">
/* <![CDATA[ */
var breeze_prefetch = {"local_url":"https:\/\/otus.ru\/journal","ignore_remote_prefetch":"1","ignore_list":["\/wp-admin\/"]};
/* ]]> */
</script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/plugins/breeze/assets/js/js-front-end/breeze-prefetch-links.min.js" id="breeze-prefetch-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-includes/js/jquery/jquery.min.js" id="jquery-core-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-includes/js/jquery/jquery-migrate.min.js" id="jquery-migrate-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/lazysizes.js" id="lazysizes-js"></script>
<link rel="https://api.w.org/" href="https://otus.ru/journal/wp-json/" /><link rel="alternate" type="application/json" href="https://otus.ru/journal/wp-json/wp/v2/posts/10297" /><link rel='shortlink' href='https://otus.ru/journal/?p=10297' />
<link rel="alternate" type="application/json+oembed" href="https://otus.ru/journal/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fotus.ru%2Fjournal%2Fforma-obratnoj-svyazi-na-html-i-css-chto-nuzhno-znat-o-ee-sozdanii%2F" />
<link rel="alternate" type="text/xml+oembed" href="https://otus.ru/journal/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fotus.ru%2Fjournal%2Fforma-obratnoj-svyazi-na-html-i-css-chto-nuzhno-znat-o-ee-sozdanii%2F&#038;format=xml" />
<script>var Sphere_Plugin = {"ajaxurl":"https:\/\/otus.ru\/journal\/wp-admin\/admin-ajax.php"};</script><link rel="icon" href="https://otus.ru/journal/wp-content/uploads/2020/11/cropped-OTUS_logo_OTUS-COMP-LOGO-WHITE-1-32x32.png" sizes="32x32" />
<link rel="icon" href="https://otus.ru/journal/wp-content/uploads/2020/11/cropped-OTUS_logo_OTUS-COMP-LOGO-WHITE-1-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" href="https://otus.ru/journal/wp-content/uploads/2020/11/cropped-OTUS_logo_OTUS-COMP-LOGO-WHITE-1-180x180.png" />
<meta name="msapplication-TileImage" content="https://otus.ru/journal/wp-content/uploads/2020/11/cropped-OTUS_logo_OTUS-COMP-LOGO-WHITE-1-270x270.png" />
		<style type="text/css" id="wp-custom-css">
			#menu-item-10406 .wpel-icon {
    display: none;	
}

#menu-item-10407 .wpel-icon {
    display: none;	
}


.otus-login-site a  .wpel-icon {
	    display: none;	
}

.menu-menju-navykov-container a  .wpel-icon {
	    display: none;	
}

.otus-login-site a 
{
    background: #ffd709;
    border-radius: 12px;
    color: #0f0f10;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    display: block;
    text-align: center;
    padding: 8px 25px;
}

.main-footer.dark {  
    background: linear-gradient(90deg, #a64fc5, #4f54e6);
    border-color: transparent;
}


.main-footer.bold .copyright {
	    color: #fff;
}

.main-footer.bold .to-top i {
    color: #fff;
}

.main-footer.bold .back-to-top {
	    color: #fff;
}

.nav__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;	
}


.scrollable-menu .menu {
    display: flex;


}


.nav__scroll 
{
	    background: linear-gradient(90deg, #a64fc5, #4f54e6);
}


.scrollable-menu .menu .menu-item {
    flex: 0 0 auto;
    padding: 15px 15px;
}

.scrollable-menu .menu .menu-item  a {
    color: #fff;
}

.nav__scroll::-webkit-scrollbar{background-color:#fff;height:5px;}

.nav__scroll::-webkit-scrollbar-thumb{background-color:#dcdcdc;}

.nav__scroll::-webkit-scrollbar-track{-webkit-border-radius:0;border-radius:0;background-color:#fff;}/

body {
    min-width: 320px;	
}

.banner-click img {
	    margin: 0 auto;
    display: block;
}

.banner-click {
	    cursor: pointer;
}

.banner-footer-area {
	    margin-bottom: 20px;
}

.banner-left-area {
	margin-top: 40px;
}		</style>
		
<!--Start VDZ Yandex Metrika Plugin-->
<!-- Yandex.Metrika counter --><script type="text/javascript" >(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");ym(34531570, "init", {clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true, trackHash:true, ecommerce:"dataLayer"});</script>
<noscript><div><img src="https://mc.yandex.ru/watch/34531570" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter --><!--START ADD EVENTS FROM CF7--><script type='text/javascript'>document.addEventListener( 'wpcf7submit', function( event ) {
					  //event.detail.contactFormId;
					  if(ym){
				          //console.log(event.detail);
						  ym(34531570, 'reachGoal', 'VDZ_SEND_CONTACT_FORM_7');
						  ym(34531570, 'params', {
						      page_url: window.location.href, 
						      status: event.detail.status, 
						      locale: event.detail.contactFormLocale, 
						      form_id: event.detail.contactFormId, 
						  });
					  }
					}, false );
				</script><!--END ADD EVENTS FROM CF7-->
<!--End VDZ Yandex Metrika Plugin-->

</head>

<body class="post-template-default single single-post postid-10297 single-format-standard right-sidebar  lazy-normal has-lb">


<div class="main-wrap">

	
		
		
<header id="main-head" class="main-head head-nav-below has-search-modal simple simple-boxed">

	<div class="inner inner-head" data-sticky-bar="0">

		<div class="wrap cf wrap-head">

			<div class="left-contain">
				<span class="mobile-nav"><i class="fa fa-bars"></i></span>

					<div class="title">
		
		<a href="https://otus.ru/journal/" title="OTUS JOURNAL" rel="home" data-wpel-link="internal">
		
					
						<span class="text-logo"><img src="/journal/wp-content/themes/contentberg/img/logo_site.svg" alt="OTUS JOURNAL"></span>
			
				
		</a>
	
	</div>
			</div>


			<div class="navigation-wrap inline">
				
					<nav class="navigation inline simple light" data-sticky-bar="0">
						<div class="menu-rubriki-container"><ul id="menu-rubriki" class="menu"><li id="menu-item-109" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-cat-1 menu-item-109"><a href="https://otus.ru/journal/category/pro-it/" data-wpel-link="internal"><span>Про IT</span></a></li>
<li id="menu-item-113" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-cat-4 menu-item-113"><a href="https://otus.ru/journal/category/polza/" data-wpel-link="internal"><span>Полезное</span></a></li>
<li id="menu-item-114" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-cat-3 menu-item-114"><a href="https://otus.ru/journal/category/lifestyle/" data-wpel-link="internal"><span>Лайфстайл</span></a></li>
<li id="menu-item-10406" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10406"><a href="https://otus.ru/catalog/courses" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right"><span>Обучение</span><span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10407" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10407"><a href="https://otus.ru/about" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right"><span>Информация</span><span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
</ul></div>					</nav>

							</div>

			<div class="actions">
				<div class="otus-login-site">
					<a href="https://otus.ru/login/" target="_blank" data-wpel-link="external" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Войти<span class="wpel-icon wpel-image wpel-icon-6"></span></a>
				</div>

				
				
				
					<a href="#" title="Search" class="search-link"><i class="fa fa-search"></i></a>

				
				
			</div>

		</div>
	</div>

</header> <!-- .main-head -->

<div class="nav nav_disable nav_colored nav_transparent course-categories__nav nav__scroll ">
	<div class="container wrap">
		
			<div class="links inline simple light scrollable-menu">
				<div class="menu-menju-navykov-container"><ul id="menu-menju-navykov" class="menu"><li id="menu-item-10413" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10413"><a href="https://otus.ru/categories/programming/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Программирование<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10414" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10414"><a href="https://otus.ru/categories/architecture/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Архитектура<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10415" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10415"><a href="https://otus.ru/categories/operations/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Инфраструктура<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10416" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10416"><a href="https://otus.ru/categories/information-security-courses/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Безопасность<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10417" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10417"><a href="https://otus.ru/categories/data-science/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Data Science<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10418" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10418"><a href="https://otus.ru/categories/gamedev/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">GameDev<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10419" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10419"><a href="https://otus.ru/categories/marketing-business/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Управление<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10420" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10420"><a href="https://otus.ru/categories/analytics/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Аналитика и анализ<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li id="menu-item-10421" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10421"><a href="https://otus.ru/categories/testing/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Тестирование<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
</ul></div>			</div>

			</div>
</div>

	
		
	
<div class="main wrap">

	<div class="ts-row cf">
		<div class="col-8 main-content cf">
		
			
				
<article id="post-10297" class="the-post post-10297 post type-post status-publish format-standard has-post-thumbnail category-polza tag-programmirovanie">
	
	<header class="post-header the-post-header cf">
			
			<div class="post-meta the-post-meta">
		
				
			<span class="post-cat">	
									
		<a href="https://otus.ru/journal/category/polza/" class="category" data-wpel-link="internal">Полезное</a>

					</span>
			
				
		
		<h1 class="post-title">
			Форма обратной связи на HTML и CSS: что нужно знать о ее создании			
		</h1>
		
			
					<a href="https://otus.ru/journal/forma-obratnoj-svyazi-na-html-i-css-chto-nuzhno-znat-o-ee-sozdanii/" class="date-link" data-wpel-link="internal"><time class="post-date">14 июля, 2024</time></a>
				
	</div>

			
	<div class="featured">
	
				
					
			<a href="https://otus.ru/journal/wp-content/uploads/2024/07/oj-1080x720-2024-07-14T134945.505.jpg" class="image-link" data-wpel-link="internal"><img width="770" height="515" src="data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%20770%20515%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3C%2Fsvg%3E" class="attachment-contentberg-main size-contentberg-main lazyload wp-post-image" alt="Форма обратной связи на HTML и CSS: что нужно знать о ее создании" title="Форма обратной связи на HTML и CSS: что нужно знать о ее создании" decoding="async" fetchpriority="high" data-srcset="https://otus.ru/journal/wp-content/uploads/2024/07/oj-1080x720-2024-07-14T134945.505-770x515.jpg 770w, https://otus.ru/journal/wp-content/uploads/2024/07/oj-1080x720-2024-07-14T134945.505-270x180.jpg 270w" data-src="https://otus.ru/journal/wp-content/uploads/2024/07/oj-1080x720-2024-07-14T134945.505-770x515.jpg" data-sizes="(max-width: 770px) 100vw, 770px" />			</a>
			
				
	</div>
		
	</header><!-- .post-header -->

				
		
		<div class="post-content description cf entry-content content-normal">


			<div id="ez-toc-container" class="ez-toc-v2_0_61 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction">
<div class="ez-toc-title-container">
<p class="ez-toc-title " >Содержание</p>
<span class="ez-toc-title-toggle"><a href="#" class="ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle" aria-label="Toggle Table of Content"><span class="ez-toc-js-icon-con"><span class=""><span class="eztoc-hide" style="display:none;">Toggle</span><span class="ez-toc-icon-toggle-span"><svg style="fill: #999;color:#999" xmlns="http://www.w3.org/2000/svg" class="list-377408" width="20px" height="20px" viewBox="0 0 24 24" fill="none"><path d="M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z" fill="currentColor"></path></svg><svg style="fill: #999;color:#999" class="arrow-unsorted-368013" xmlns="http://www.w3.org/2000/svg" width="10px" height="10px" viewBox="0 0 24 24" version="1.2" baseProfile="tiny"><path d="M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z"/></svg></span></span></span></a></span></div>
<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-1" href="#%D0%9E%D0%BF%D1%80%D0%B5%D0%B4%D0%B5%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B8_%D0%BE%D0%B1%D0%BB%D0%B0%D1%81%D1%82%D0%B8_%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D1%8F" title="Определение и области применения">Определение и области применения</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-2" href="#%D0%A0%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B0_%D0%BE%D0%BD%D0%BB%D0%B0%D0%B9%D0%BD-%D1%84%D0%BE%D1%80%D0%BC%D1%8B" title="Разработка онлайн-формы">Разработка онлайн-формы</a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-3" href="#%D0%A2%D0%B5%D0%B3_form" title="Тег form">Тег form</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-4" href="#%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BF%D0%BE%D0%BB%D1%8F_%D0%BA%D0%BE%D0%BC%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%80%D0%B8%D1%8F" title="Создание поля комментария">Создание поля комментария</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-5" href="#%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BF%D0%BE%D0%B4%D1%81%D0%BA%D0%B0%D0%B7%D0%BE%D0%BA" title="Создание подсказок">Создание подсказок</a></li></ul></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-6" href="#%D0%A1%D1%82%D0%B8%D0%BB%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F" title="Стилизация">Стилизация</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-7" href="#%C2%AB%D0%9E%D0%B6%D0%B8%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5%C2%BB_%D1%84%D0%BE%D1%80%D0%BC%D1%8B" title="«Оживление» формы">«Оживление» формы</a></li></ul></nav></div>

<p>Веб-разработка требует от программиста определенных знаний и навыков для создания как простых, так и сложных проектов. Почти каждый современный онлайн-сервис оснащен так называемой формой обратной связи. В HTML тоже есть формы. Именно их предстоит изучить далее.</p>



<p>В статье представлена информация о формах обратной связи для сайтов. Предстоит выяснить, что это такое и для чего используется, познакомиться с основными тегами HTML для их создания, а также изучить наглядный пример разработки онлайн-формы.</p>



<p>Предложенная информация ориентирована на широкий круг лиц. Она подойдет для изучения как обычными пользователями, так и начинающими веб-разработчиками. Предложенные алгоритмы основываются на HTML и CSS – наиболее распространенных инструментах веб-программирования.</p>



<h2 class="wp-block-heading"><span class="ez-toc-section" id="%D0%9E%D0%BF%D1%80%D0%B5%D0%B4%D0%B5%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B8_%D0%BE%D0%B1%D0%BB%D0%B0%D1%81%D1%82%D0%B8_%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D1%8F"></span>Определение и области применения<span class="ez-toc-section-end"></span></h2>



<p>Форма обратной связи – то, что используется на онлайн-страницах, в мобильных приложениях, «умных» устройствах и на любых сервисах, получающих информацию от тех или иных пользователей. Это полезный элемент виртуального проекта.</p>



<p>Форма – веб-страница или ее часть, позволяющая клиенту (пользователю) отправить свои данные на сайт. Она имеет вид онлайн-анкеты. В форме поддерживаются вопросы с разнообразными вариантами ответов и полями для ввода тех или иных данных. Информация соответствующей анкеты будет отправлена на сервер для дальнейшей обработки или просмотра администрацией веб-сайта.</p>



<p>Обычно рассматриваемый элемент применяется для авторизации на сайтах и в различных приложениях. В них чаще всего требуется указать:</p>



<ul>
<li>логин;</li>



<li>пароль;</li>



<li>иные авторизационные данные, примером которых могут послужить номера телефонов или электронная почта.</li>
</ul>



<p>Соответствующие сведения обрабатываются на серверной стороне клиент-серверной модели, после чего они проходят процедуру проверки. Если все верно, клиент (пользователь) получает разрешение входа на сайт/в приложение.</p>



<p>Также веб-формы используются для регистрации людей на различные мероприятия. С их помощью организаторы могут узнать количество потенциальных посетителей, а участники – получить уведомление о начале или изменениях.</p>



<p>Еще один распространенный вариант форм – форма обратной связи. С помощью такого элемента пользователи веб-сервисов и страниц смогут:</p>



<ul>
<li>оставлять отзывы;</li>



<li>задавать вопросы администрации;</li>



<li>предлагать улучшения проекта;</li>



<li>предоставлять информацию для связи с представителями проекта.</li>
</ul>



<p>Подобные элементы чаще всего встречаются в Интернет-магазинах, на сайтах различных организаций, предлагающих те или иные услуги. Далее предстоит разобраться с созданием именно такого компонента для сайта.</p>



<h2 class="wp-block-heading"><span class="ez-toc-section" id="%D0%A0%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B0_%D0%BE%D0%BD%D0%BB%D0%B0%D0%B9%D0%BD-%D1%84%D0%BE%D1%80%D0%BC%D1%8B"></span>Разработка онлайн-формы<span class="ez-toc-section-end"></span></h2>



<p>Любая форма создается при помощи HTML-верстки проекта. На соответствующем этапе предстоит задать общую структуру онлайн-анкеты, а также поля, доступные для заполнения пользователем. Каждая виртуальная анкета имеет свои ключевые особенности и нюансы. Далее предстоит рассмотреть шаблон создания оценки товара.</p>



<p>В ней будут следующие элементы:</p>



<ul>
<li>поле для имени клиента;</li>



<li>поле для адреса электронной почты пользователя;</li>



<li>кнопка выбора оценки;</li>



<li>пространство для короткого отзыва.</li>
</ul>



<p>Далее верстка будет рассмотрена поэтапно. В конечно итоге у пользователя будет готовый шаблон типичной формы обратной связи для сайта.</p>



<h3 class="wp-block-heading"><span class="ez-toc-section" id="%D0%A2%D0%B5%D0%B3_form"></span>Тег form<span class="ez-toc-section-end"></span></h3>



<p>HTML имеет множество полезных тегов, помогающих в разработке онлайн-проектов. Один из них – form. Он используется для создания онлайн-формы. Form является парным тегом. Все, что находится между открывающим и закрывающим тегом – это элементы управления онлайн-формой.</p>



<p>Form имеет два обязательных атрибута:</p>



<ol>
<li>Action. Это – ссылка на скрипт. Обычно action представлен PHP, который отвечает за обработку онлайн-формы. Он обрабатывает введенные в form сведения.</li>



<li>Method. Так называется метод отправки данных на сервер. Он выражается GET или POST.</li>
</ol>



<p>Form сообщает браузеру, что в следующем блоке пользователь сможет указывать информацию, которую нужно после этого отправить на сервер.</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/docsz/AD_4nXd2n-vdWxNVnpdPHq2h3RqzhqBkX3A8qEucGMDH8LACO4G4k_CPP1W4zs4AWCtIn4ZX6QclJJe2kp076Tt39NgJQlK7EY3HtQoBJhnQCL2WQ2H-veUOR2S4G9yHNbNf4ySnnd52oN0vcRoNgjyV_yqmVCcGsJPISbx80khz0TralETBnoNGIQ?key=ZYcGCyRWKPuStL78M-mJQQ" alt="Форма обратной связи на HTML и CSS: что нужно знать о ее создании"/></figure>



<p>В качестве атрибута form обычно используется action со ссылкой на скрипт обработки информации. Ссылка может отсутствовать, но после отправки данных страница будет просто перезагружаться. Через атрибут method выбирается тип информационной отправки:</p>



<ol>
<li>POST. При выборе такого method для form информация отправляется на сервер в любом объеме. Этот вариант лучше всего подходит для больших онлайн-анкет или баз данных.</li>



<li>GET. При использовании GET-method для form данные записываются в URL-адрес. Там могут размещаться до 3&nbsp;000 символов. Этот делает GET неподходящим для больших form. Он является уязвимым, поэтому пароли, номера телефонов и прочую конфиденциальную информацию с его помощью отправлять нельзя. Это связано с тем, что другие пользователи без существенного труда смогут получить доступ к данным. Они пишутся в адресной строке.</li>
</ol>



<p>Вот элементарный шаблон рассматриваемого элемента веб-сайта:</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/docsz/AD_4nXc8nFAq5ExRtOZ1-dzgXO5xuqMvMkEoxQnf2t1d4t664hcIJ7g_wWg29LrtbeJ7nErQGwIqehMkYuklzUMmGzRMHq1BK9azHNAYYzNskAtroQb6R-Hu4SJBxbH_8iKqaMY3-eIfk34NEOl2h3qVjtcW-TaajJVkFJ330dbVSsqb9WV0teJ8RA?key=ZYcGCyRWKPuStL78M-mJQQ" alt="Форма обратной связи на HTML и CSS: что нужно знать о ее создании"/></figure>



<p>В form необходимо разместить поля для непосредственного пользовательского ввода. Для этого используются теги:</p>



<ol>
<li>Label. Он необходим для создания подписей к элементам.</li>



<li>Input. Тег, используемый для формирования самого элемента в form.</li>
</ol>



<p>Вот так будет выглядеть поле для ввода имени:</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/docsz/AD_4nXejs00FLejEHOZLOyrc_rNbizxVg48hZ3FdiesJW-dIn-5Zc2htP4vsUQ2ZhxK9P6R4_kUUaNTbvIDxZsP-8JD9wssrKm_udEVLg-orrRxjiustS-S-6BzJOXI4-DKT9mwgl0f99bTNGol6tFlxFJfWVOcJiOhNXEAk22edyJqxBtzxFau1HCs?key=ZYcGCyRWKPuStL78M-mJQQ" alt="Форма обратной связи на HTML и CSS: что нужно знать о ее создании"/></figure>



<p>В label необходимо поместить текст, который пользователь будет видеть в электронной форме перед полем ввода. Само поле создается через тег input. Тип поля устанавливается посредством атрибута type.</p>



<p>Type имеет следующие значения:</p>



<ul>
<li>text – ввод одной строчки;</li>



<li>number – число;</li>



<li>url – поле для ввода URL-адреса;</li>



<li>email – поле для ввода адреса электронной почты (с автопроверкой на корректность);</li>



<li>tel – номер телефона;</li>



<li>password – поле для ввода пароля, в котором символы автоматически заменяются звездочками.</li>
</ul>



<p>Это – наиболее распространенные значения атрибута type у form. Представленные «аргументы» просто являются самыми часто встречающимися.</p>



<p>Остается создать второе поле, в котором необходимо запросить у пользователя адрес электронной почты. Здесь тоже используются теги label и input. В качестве значения type указывается email:</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/docsz/AD_4nXe7e5bgYjypO0ZEkYdeW1P5Vd0wX0kaFxLWwR8R3idZeIiMUtGR02jDptFtzg51DKY9D2i6Q5rVwKfElEIoLCyNBNHN6o9B1GT-ptBZru2Ye9wU9Wv3vS-gmS5Gd9aEjDV3qGNIYFOMo1TUkxOl6tzVqAPNOvjJS6pYBqaqZDjvfhFktB-37A?key=ZYcGCyRWKPuStL78M-mJQQ" alt="Форма обратной связи на HTML и CSS: что нужно знать о ее создании"/></figure>



<p>Выше – наглядный пример того, как будет выглядеть соответствующий шаблон в программном коде.</p>



<h3 class="wp-block-heading"><span class="ez-toc-section" id="%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BF%D0%BE%D0%BB%D1%8F_%D0%BA%D0%BE%D0%BC%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%80%D0%B8%D1%8F"></span>Создание поля комментария<span class="ez-toc-section-end"></span></h3>



<p>Форма для онлайн-магазина готова. Теперь с ее помощью можно узнать пользовательское имя и адрес его электронной почты для формирования ответа. Далее остается добавить текстовое поле – в нем будет оставляться комментарий (отзыв).</p>



<p>Для комментариев HTML предлагает тег textarea. Он оборачивается в label с заголовком поля:</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/docsz/AD_4nXefqCZSinqafEO-LzqOi5MsPIxyNYkCpcQ46nw1_EqL1l1H7tNkHDdPdQJvb-xyaOu-mg8ohnSjuN7mRJ4Hzd4OSDr0vxZA08VL0xiAQ5T3sjkWhSSd4OS3hiFET_1xn0YZKY5ZKXH3Tp22k6M41YtJxj_sDVheqr1gU5Z94GmVzhOWaGpj17o?key=ZYcGCyRWKPuStL78M-mJQQ" alt="Форма обратной связи на HTML и CSS: что нужно знать о ее создании"/></figure>



<p>Форма обратной связи почти готова. Теперь нужно добавить кнопку, отвечающую за непосредственную отправку данных. Для этого используется тег button с атрибутом submit. Остается ввести текст, по которому пользователи смогут моментально понять назначение соответствующего элемента управления.</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/docsz/AD_4nXdmjYQsqyUwLVUI-5KaxFCuyY0_Vhdpc_Kw_bbbcH9BAWhCOAWGfF-wpJjO6yBYmeU6K9ivb-pbwv9NbGGJGcx0fm3s08dt9EfO5XB0VhrC9uHt-dPu_KBJ84pzquZDb5MSicduo0L_SRnefcOIJFSkhmvNU01WSPQGH34k04ChJZXf2AJ5I6g?key=ZYcGCyRWKPuStL78M-mJQQ" alt="Форма обратной связи на HTML и CSS: что нужно знать о ее создании"/></figure>



<p>Выше – фрагмент кода, который наглядно демонстрирует внедрение кнопки отправки в форму.</p>



<h3 class="wp-block-heading"><span class="ez-toc-section" id="%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BF%D0%BE%D0%B4%D1%81%D0%BA%D0%B0%D0%B7%D0%BE%D0%BA"></span>Создание подсказок<span class="ez-toc-section-end"></span></h3>



<p>Form для отзыва о товаре или услуге почти готова. Теперь в нее можно добавить подсказки – это хороший тон в разработке. Речь идет о подписях, подсказывающих пользователям, какие данные для ввода в form от него необходимы в том или ином случае.</p>



<p>В качестве примера можно привести ситуацию с полем «Имя». Там допустимо ввести не только имя, но и фамилию. В базе данных соответствующая информация не имеет существенного значения, поэтому она не вводится.</p>



<p>Подсказки в form внедряются при помощи атрибута placeholder. В нем пишется текст, который отобразится в поле ввода.</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/docsz/AD_4nXeYHJzMVEVYGdaqFVncyzJgmz5mmufyyE6RuM74zii7bCCBNwf_S5fwadJmf3oGh0YUmHAEtOHjHZFhDTyHocqjvzdK_6K7EHdYw0a_AC4grP1B-UxxE_5TyVRuu378XI7C4gRv7A1wX7Y-JhRdIVSScdUzO9qWXm6wxONE17woOcVGBSXdwIM?key=ZYcGCyRWKPuStL78M-mJQQ" alt="Форма обратной связи на HTML и CSS: что нужно знать о ее создании"/></figure>



<p>Выше – наглядный пример того, как подсказки будут выглядеть в HTML. На этом этапе форма почти готова. Осталось ее стилизовать.</p>



<h2 class="wp-block-heading"><span class="ez-toc-section" id="%D0%A1%D1%82%D0%B8%D0%BB%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F"></span>Стилизация<span class="ez-toc-section-end"></span></h2>



<p>HTML позволяет создать только «каркас» формы обратной связи. Он описывает элементы, которые будут использоваться на той или иной странице. Для придания онлайн-анкете более презентабельного вида необходимо использовать CSS-стили.</p>



<p>Для этого необходимо:</p>



<ol>
<li>В папке проекта сформировать новый документ – style.css.</li>



<li>В теге head HTML-документа добавить строку: link rel = »stylesheet» href = »style.css».</li>



<li>Сохранить изменения.</li>
</ol>



<p>С помощью добавленной строчки браузер будет понимать, где именно описываются стили для той или иной страницы.</p>



<p>В документ style.css необходимо добавить следующий программный код:</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/docsz/AD_4nXd3b0STtVAPNBh3de3f-quqh94IVRlDDJ2mw79W5juR_mFqQzVYF-r09EZCqzFQ4tvM65h3UHdnv54EpCIKljw9uRCjjsXl8uBFcEZQie2684V-ZRh7R0dXXCqIFdi5UDj_dyYwaL_RhVfh4O1_-3JFePtq7xQtwT5Dm7FHSCgr5a849RpU-dA?key=ZYcGCyRWKPuStL78M-mJQQ" alt="Форма обратной связи на HTML и CSS: что нужно знать о ее создании"/></figure>



<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/docsz/AD_4nXer1VjlHZQYY5-AIg20ZifahW-LIsBXB0S1Ao8zkz7hz0hpqeaz5O5719HYWt1pRCWJ024aDby7XxcS6bS_krcgw8UnCTxoGXHAnIbU3j-rnbmL6KEgjnEQ9M4OmilPGkPZQfS-WOr-Z4bcwgwMrdomcJaqaXCoTc8u6JB62XoKZt7r3AP7MOI?key=ZYcGCyRWKPuStL78M-mJQQ" alt="Форма обратной связи на HTML и CSS: что нужно знать о ее создании"/></figure>



<p>Внесенные изменения нужно сохранить.</p>



<p>К формам допустимо применение любых CSS-свойств путем выбора в качестве селекторов HTML-теги. Стили дают возможность внедрения анимации и поведения элементов при наведении на них курсора мышки или указателя клавиатуры.</p>



<h2 class="wp-block-heading"><span class="ez-toc-section" id="%C2%AB%D0%9E%D0%B6%D0%B8%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5%C2%BB_%D1%84%D0%BE%D1%80%D0%BC%D1%8B"></span>«Оживление» формы<span class="ez-toc-section-end"></span></h2>



<p>Форма обратной связи уже готова. С ее помощью пользователь сможет оставить отзыв о товаре или услуги. Если попытаться на данном этапе заполнить ее и кликнуть по кнопке «Отправить», ничего не произойдет. Это связано с тем, что в проекте пока нет скрипта, который собирал бы информацию из полей и вносил бы их в базу данных/пересылал на электронную почту.</p>



<p>«Оживить» форму обратной связи в HTML можно почти на любом языке программирования. Обычно используется тот инструмент разработки, на котором реализован бэкенд веб-сервиса. Это позволит в процессе разработки избежать дополнительных интеграций.</p>



<p>Вот скрипт на PHP:</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/docsz/AD_4nXeocmqOoWNV2wB1SV4JZ7k9C0rEkQMa7xeNpaRqgFfEIb2WKgOrfjb0cHf2ReA6SuCbGZsUW_f7IzaHnLQGV8TJAfOa-pPUHJY8gdDaMqnPy1pB6blj6SVn9FFasu4CP_xS_8OB8W8RORjiSNKKf2-C4mqZc7sKuiIl2jDnwhegY-P0aFAk2g?key=ZYcGCyRWKPuStL78M-mJQQ" alt="Форма обратной связи на HTML и CSS: что нужно знать о ее создании"/></figure>



<p>Скрипт загружается на сервер с установленным заранее PHP. Также разработчику нужно открыть доступ к чтению файлов. После – в верстке формы добавляется ссылка на скрипт и указывается метод обработки информации:</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh7-us.googleusercontent.com/docsz/AD_4nXdcKG0mqTemsr-FxNbHkYQpS_I9w34fpAWQ0vKzEdoAT7cktqdoOzYc6GdgAlL-aCgEbt7AQZZg8v2R-8g9budU5z_85C4iIYDq92vtTjRV4AqkSlRZ-iJChfyGAo6sHujr42T3bNHJ9k9jQ_rbyN1pvd7Ixq-PsB7pStLSz75QzzSA_h4YAmk?key=ZYcGCyRWKPuStL78M-mJQQ" alt="Форма обратной связи на HTML и CSS: что нужно знать о ее создании"/></figure>



<p>Теперь form будет работать исправно. Как только пользователь кликнет по кнопке «Отправить», введенные в онлайн-анкете данные будут отправлены администратору в виде электронного письма.</p>



<p>Это всего лишь один пример создания электронной формы для веб-страниц. Лучше изучить HTML, CSS и PHP, а также заниматься веб-разработкой, помогут дистанционные компьютерные курсы.</p>



<p><em>Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в&nbsp;<a href="https://otus.ru/?utm_source=oj" target="_blank" rel="noreferrer noopener nofollow external" data-wpel-link="external" class="wpel-icon-right">Otus<span class="wpel-icon wpel-image wpel-icon-6"></span></a>!</em>&nbsp;</p>
				
		</div><!-- .post-content -->
		
		<div class="the-post-foot cf">
		
						
			<div class="tag-share cf">
				
									<div class="post-tags"><a href="https://otus.ru/journal/tag/programmirovanie/" rel="tag" data-wpel-link="internal">программирование</a></div>				
											<div class="post-share">
					
						
			<div class="post-share-icons cf">
			
				<span class="counters">

										
				</span>

								
					<a href="https://www.facebook.com/sharer.php?u=https%3A%2F%2Fotus.ru%2Fjournal%2Fforma-obratnoj-svyazi-na-html-i-css-chto-nuzhno-znat-o-ee-sozdanii%2F" class="link facebook wpel-icon-right" target="_blank" title="Share on Facebook" data-wpel-link="external" rel="nofollow external noopener noreferrer"><i class="fa fa-facebook"></i><span class="wpel-icon wpel-image wpel-icon-6"></span></a>
						
								
					<a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fotus.ru%2Fjournal%2Fforma-obratnoj-svyazi-na-html-i-css-chto-nuzhno-znat-o-ee-sozdanii%2F&#038;text=%D0%A4%D0%BE%D1%80%D0%BC%D0%B0%20%D0%BE%D0%B1%D1%80%D0%B0%D1%82%D0%BD%D0%BE%D0%B9%20%D1%81%D0%B2%D1%8F%D0%B7%D0%B8%20%D0%BD%D0%B0%20HTML%20%D0%B8%20CSS%3A%20%D1%87%D1%82%D0%BE%20%D0%BD%D1%83%D0%B6%D0%BD%D0%BE%20%D0%B7%D0%BD%D0%B0%D1%82%D1%8C%20%D0%BE%20%D0%B5%D0%B5%20%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B8" class="link twitter wpel-icon-right" target="_blank" title="Share on Twitter" data-wpel-link="external" rel="nofollow external noopener noreferrer"><i class="fa fa-twitter"></i><span class="wpel-icon wpel-image wpel-icon-6"></span></a>
						
								
					<a href="https://www.linkedin.com/shareArticle?mini=true&#038;url=https%3A%2F%2Fotus.ru%2Fjournal%2Fforma-obratnoj-svyazi-na-html-i-css-chto-nuzhno-znat-o-ee-sozdanii%2F" class="link linkedin wpel-icon-right" target="_blank" title="LinkedIn" data-wpel-link="external" rel="nofollow external noopener noreferrer"><i class="fa fa-linkedin"></i><span class="wpel-icon wpel-image wpel-icon-6"></span></a>
						
								
					<a href="https://pinterest.com/pin/create/button/?url=https%3A%2F%2Fotus.ru%2Fjournal%2Fforma-obratnoj-svyazi-na-html-i-css-chto-nuzhno-znat-o-ee-sozdanii%2F&#038;media=https%3A%2F%2Fotus.ru%2Fjournal%2Fwp-content%2Fuploads%2F2024%2F07%2Foj-1080x720-2024-07-14T134945.505.jpg&#038;description=%D0%A4%D0%BE%D1%80%D0%BC%D0%B0%20%D0%BE%D0%B1%D1%80%D0%B0%D1%82%D0%BD%D0%BE%D0%B9%20%D1%81%D0%B2%D1%8F%D0%B7%D0%B8%20%D0%BD%D0%B0%20HTML%20%D0%B8%20CSS%3A%20%D1%87%D1%82%D0%BE%20%D0%BD%D1%83%D0%B6%D0%BD%D0%BE%20%D0%B7%D0%BD%D0%B0%D1%82%D1%8C%20%D0%BE%20%D0%B5%D0%B5%20%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B8" class="link pinterest wpel-icon-right" target="_blank" title="Pinterest" data-wpel-link="external" rel="nofollow external noopener noreferrer"><i class="fa fa-pinterest-p"></i><span class="wpel-icon wpel-image wpel-icon-6"></span></a>
						
									
								
			</div>
			
						
		</div>									
			</div>

			
		</div>
		
				
		
		
<div class="post-nav">


	<div class="post previous cf">
		<a href="https://otus.ru/journal/java-dlya-novichkov-chto-nuzhno-znat-o-class-i-object/" title="Prev Post" class="nav-icon" data-wpel-link="internal">
			<i class="fa fa-angle-left"></i>
		</a>
		
		<span class="content">
			
			<a href="https://otus.ru/journal/java-dlya-novichkov-chto-nuzhno-znat-o-class-i-object/" class="image-link" rel="previous" data-wpel-link="internal">
				<img width="150" height="106" src="data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%20150%20106%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3C%2Fsvg%3E" class="attachment-thumbnail size-thumbnail lazyload wp-post-image" alt="Java для новичков: что нужно знать о class и object" decoding="async" data-srcset="https://otus.ru/journal/wp-content/uploads/2024/07/oj-1080x720-2024-07-14T133433.585-150x106.jpg 150w, https://otus.ru/journal/wp-content/uploads/2024/07/oj-1080x720-2024-07-14T133433.585-300x212.jpg 300w, https://otus.ru/journal/wp-content/uploads/2024/07/oj-1080x720-2024-07-14T133433.585-1024x724.jpg 1024w, https://otus.ru/journal/wp-content/uploads/2024/07/oj-1080x720-2024-07-14T133433.585-768x543.jpg 768w, https://otus.ru/journal/wp-content/uploads/2024/07/oj-1080x720-2024-07-14T133433.585-1536x1086.jpg 1536w" data-src="https://otus.ru/journal/wp-content/uploads/2024/07/oj-1080x720-2024-07-14T133433.585-150x106.jpg" data-sizes="(max-width: 150px) 100vw, 150px" title="Java для новичков: что нужно знать о class и object" />			</a>
			
			<div class="post-meta">
				<span class="label">Prev Post</span>
			
					<div class="post-meta post-meta-b">
		
			
		
					
			
			<h2 class="post-title">
							
					<a href="https://otus.ru/journal/java-dlya-novichkov-chto-nuzhno-znat-o-class-i-object/" data-wpel-link="internal">Java для новичков: что нужно знать о class и object</a>
					
							</h2>
			
				
		<div class="below">
		
							<a href="https://otus.ru/journal/java-dlya-novichkov-chto-nuzhno-znat-o-class-i-object/" class="meta-item date-link" data-wpel-link="internal"><time class="post-date" datetime="2024-07-14T10:34:53+00:00">14 июля, 2024</time></a>

				<span class="meta-sep"></span>
						
			
							<span class="meta-item read-time">8 Mins Read</span>
					
		</div>
		
	</div>			</div>
		</span>
	</div>
		
	


	<div class="post next cf">
		<a href="https://otus.ru/journal/ftp-protokol-opisanie-ispolzovanie-osobennosti/" title="Next Post" class="nav-icon" data-wpel-link="internal">
			<i class="fa fa-angle-right"></i>
		</a>
		
		<span class="content">
			
			<a href="https://otus.ru/journal/ftp-protokol-opisanie-ispolzovanie-osobennosti/" class="image-link" rel="next" data-wpel-link="internal">
				<img width="150" height="106" src="data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%20150%20106%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3C%2Fsvg%3E" class="attachment-thumbnail size-thumbnail lazyload wp-post-image" alt="FTP-протокол: описание, использование, особенности" decoding="async" data-srcset="https://otus.ru/journal/wp-content/uploads/2024/07/oj-1080x720-2024-07-14T141006.781-150x106.jpg 150w, https://otus.ru/journal/wp-content/uploads/2024/07/oj-1080x720-2024-07-14T141006.781-300x212.jpg 300w, https://otus.ru/journal/wp-content/uploads/2024/07/oj-1080x720-2024-07-14T141006.781-1024x724.jpg 1024w, https://otus.ru/journal/wp-content/uploads/2024/07/oj-1080x720-2024-07-14T141006.781-768x543.jpg 768w, https://otus.ru/journal/wp-content/uploads/2024/07/oj-1080x720-2024-07-14T141006.781-1536x1086.jpg 1536w" data-src="https://otus.ru/journal/wp-content/uploads/2024/07/oj-1080x720-2024-07-14T141006.781-150x106.jpg" data-sizes="(max-width: 150px) 100vw, 150px" title="FTP-протокол: описание, использование, особенности" />			</a>
			
			<div class="post-meta">
				<span class="label">Next Post</span>
				
					<div class="post-meta post-meta-b">
		
			
		
					
			
			<h2 class="post-title">
							
					<a href="https://otus.ru/journal/ftp-protokol-opisanie-ispolzovanie-osobennosti/" data-wpel-link="internal">FTP-протокол: описание, использование, особенности</a>
					
							</h2>
			
				
		<div class="below">
		
							<a href="https://otus.ru/journal/ftp-protokol-opisanie-ispolzovanie-osobennosti/" class="meta-item date-link" data-wpel-link="internal"><time class="post-date" datetime="2024-07-14T11:10:23+00:00">14 июля, 2024</time></a>

				<span class="meta-sep"></span>
						
			
							<span class="meta-item read-time">7 Mins Read</span>
					
		</div>
		
	</div>			</div>
		</span>
	</div>
		
	
</div>		
		

<section class="related-posts grid-3">

	<h4 class="section-head"><span class="title">Читать ещё</span></h4> 
	
	<div class="ts-row posts cf">
	
			<article class="post col-4">
					
			<a href="https://otus.ru/journal/uroven-gotovnosti-cto-k-2026/" title="Уровень готовности CTO к 2026" class="image-link" data-wpel-link="internal">
				<img width="270" height="180" src="data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%20270%20180%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3C%2Fsvg%3E" class="image lazyload wp-post-image" alt="Уровень готовности CTO к 2026" title="Уровень готовности CTO к 2026" decoding="async" loading="lazy" data-srcset="https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-3-270x180.jpg 270w, https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-3-770x515.jpg 770w, https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-3-370x245.jpg 370w" data-src="https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-3-270x180.jpg" data-sizes="(max-width: 270px) 100vw, 270px" />			</a>
			
			<div class="content">
				
				<h3 class="post-title"><a href="https://otus.ru/journal/uroven-gotovnosti-cto-k-2026/" class="post-link" data-wpel-link="internal">Уровень готовности CTO к 2026</a></h3>

				<div class="post-meta">
					<time class="post-date" datetime="2025-11-16T19:50:59+00:00">16 ноября, 2025</time>
				</div>
			
			</div>

		</article >
		
			<article class="post col-4">
					
			<a href="https://otus.ru/journal/novye-uroki-noyabrya-tolko-top-temy-po-programmirovaniju/" title="Новые уроки ноября: только топ-темы по программированию" class="image-link" data-wpel-link="internal">
				<img width="270" height="180" src="data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%20270%20180%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3C%2Fsvg%3E" class="image lazyload wp-post-image" alt="Новые уроки ноября: только топ-темы по программированию" title="Новые уроки ноября: только топ-темы по программированию" decoding="async" loading="lazy" data-srcset="https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-2-270x180.jpg 270w, https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-2-770x515.jpg 770w, https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-2-370x245.jpg 370w" data-src="https://otus.ru/journal/wp-content/uploads/2025/11/oj-1080x720-kopiya-2-270x180.jpg" data-sizes="(max-width: 270px) 100vw, 270px" />			</a>
			
			<div class="content">
				
				<h3 class="post-title"><a href="https://otus.ru/journal/novye-uroki-noyabrya-tolko-top-temy-po-programmirovaniju/" class="post-link" data-wpel-link="internal">Новые уроки ноября: только топ-темы по программированию</a></h3>

				<div class="post-meta">
					<time class="post-date" datetime="2025-11-09T23:24:11+00:00">9 ноября, 2025</time>
				</div>
			
			</div>

		</article >
		
			<article class="post col-4">
					
			<a href="https://otus.ru/journal/schjot-idjot-na-chasy/" title="Счёт идёт на часы" class="image-link" data-wpel-link="internal">
				<img width="270" height="180" src="data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%20270%20180%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3C%2Fsvg%3E" class="image lazyload wp-post-image" alt="Счёт идёт на часы" title="Счёт идёт на часы" decoding="async" loading="lazy" data-srcset="https://otus.ru/journal/wp-content/uploads/2025/10/oj-1080x720-kopiya-7-270x180.png 270w, https://otus.ru/journal/wp-content/uploads/2025/10/oj-1080x720-kopiya-7-770x515.png 770w, https://otus.ru/journal/wp-content/uploads/2025/10/oj-1080x720-kopiya-7-370x245.png 370w" data-src="https://otus.ru/journal/wp-content/uploads/2025/10/oj-1080x720-kopiya-7-270x180.png" data-sizes="(max-width: 270px) 100vw, 270px" />			</a>
			
			<div class="content">
				
				<h3 class="post-title"><a href="https://otus.ru/journal/schjot-idjot-na-chasy/" class="post-link" data-wpel-link="internal">Счёт идёт на часы</a></h3>

				<div class="post-meta">
					<time class="post-date" datetime="2025-10-30T15:04:59+00:00">30 октября, 2025</time>
				</div>
			
			</div>

		</article >
		
		
	</div>
	
</section>

		
				
</article> <!-- .the-post -->	
			
		</div>
		
		<aside class="col-4 sidebar">

	<div class="inner">

					<ul>
				<li id="search-2" class="widget widget_search"><h5 class="widget-title"><span>Поиск по блогу</span></h5>
	
	<form method="get" class="search-form" action="https://otus.ru/journal/">
		<label>
			<span class="screen-reader-text">Search for:</span>
			<input type="search" class="search-field" placeholder="Введите запрос и нажмите Enter" value="" name="s" title="Search for:" />
		</label>
		<button type="submit" class="search-submit"><i class="fa fa-search"></i></button>
	</form>

</li>
<li id="tag_cloud-5" class="widget widget_tag_cloud"><h5 class="widget-title"><span>Метки</span></h5><div class="tagcloud"><a href="https://otus.ru/journal/tag/android-2/" class="tag-cloud-link tag-link-74 tag-link-position-1" style="font-size: 12.472222222222pt;" aria-label="Android (34 элемента)" data-wpel-link="internal">Android</a>
<a href="https://otus.ru/journal/tag/c-3/" class="tag-cloud-link tag-link-91 tag-link-position-2" style="font-size: 10.916666666667pt;" aria-label="C (23 элемента)" data-wpel-link="internal">C</a>
<a href="https://otus.ru/journal/tag/c-2/" class="tag-cloud-link tag-link-81 tag-link-position-3" style="font-size: 12.666666666667pt;" aria-label="C# (35 элементов)" data-wpel-link="internal">C#</a>
<a href="https://otus.ru/journal/tag/c/" class="tag-cloud-link tag-link-20 tag-link-position-4" style="font-size: 12.472222222222pt;" aria-label="c++ (34 элемента)" data-wpel-link="internal">c++</a>
<a href="https://otus.ru/journal/tag/computer-science/" class="tag-cloud-link tag-link-209 tag-link-position-5" style="font-size: 15.972222222222pt;" aria-label="computer science (78 элементов)" data-wpel-link="internal">computer science</a>
<a href="https://otus.ru/journal/tag/css/" class="tag-cloud-link tag-link-288 tag-link-position-6" style="font-size: 8.6805555555556pt;" aria-label="CSS (13 элементов)" data-wpel-link="internal">CSS</a>
<a href="https://otus.ru/journal/tag/data-science/" class="tag-cloud-link tag-link-151 tag-link-position-7" style="font-size: 8pt;" aria-label="Data Science (11 элементов)" data-wpel-link="internal">Data Science</a>
<a href="https://otus.ru/journal/tag/devops/" class="tag-cloud-link tag-link-98 tag-link-position-8" style="font-size: 10.138888888889pt;" aria-label="devops (19 элементов)" data-wpel-link="internal">devops</a>
<a href="https://otus.ru/journal/tag/docker/" class="tag-cloud-link tag-link-143 tag-link-position-9" style="font-size: 8.2916666666667pt;" aria-label="Docker (12 элементов)" data-wpel-link="internal">Docker</a>
<a href="https://otus.ru/journal/tag/gamedev/" class="tag-cloud-link tag-link-25 tag-link-position-10" style="font-size: 11.694444444444pt;" aria-label="gamedev (28 элементов)" data-wpel-link="internal">gamedev</a>
<a href="https://otus.ru/journal/tag/hr/" class="tag-cloud-link tag-link-103 tag-link-position-11" style="font-size: 8pt;" aria-label="hr (11 элементов)" data-wpel-link="internal">hr</a>
<a href="https://otus.ru/journal/tag/html/" class="tag-cloud-link tag-link-217 tag-link-position-12" style="font-size: 11.208333333333pt;" aria-label="HTML (25 элементов)" data-wpel-link="internal">HTML</a>
<a href="https://otus.ru/journal/tag/ios/" class="tag-cloud-link tag-link-101 tag-link-position-13" style="font-size: 8.9722222222222pt;" aria-label="iOS (14 элементов)" data-wpel-link="internal">iOS</a>
<a href="https://otus.ru/journal/tag/it/" class="tag-cloud-link tag-link-50 tag-link-position-14" style="font-size: 10.527777777778pt;" aria-label="IT (21 элемент)" data-wpel-link="internal">IT</a>
<a href="https://otus.ru/journal/tag/java/" class="tag-cloud-link tag-link-75 tag-link-position-15" style="font-size: 15.680555555556pt;" aria-label="Java (73 элемента)" data-wpel-link="internal">Java</a>
<a href="https://otus.ru/journal/tag/javascript/" class="tag-cloud-link tag-link-83 tag-link-position-16" style="font-size: 14.319444444444pt;" aria-label="JavaScript (53 элемента)" data-wpel-link="internal">JavaScript</a>
<a href="https://otus.ru/journal/tag/linux/" class="tag-cloud-link tag-link-141 tag-link-position-17" style="font-size: 11.888888888889pt;" aria-label="Linux (29 элементов)" data-wpel-link="internal">Linux</a>
<a href="https://otus.ru/journal/tag/machine-learning/" class="tag-cloud-link tag-link-167 tag-link-position-18" style="font-size: 8.6805555555556pt;" aria-label="Machine Learning (13 элементов)" data-wpel-link="internal">Machine Learning</a>
<a href="https://otus.ru/journal/tag/otus-book/" class="tag-cloud-link tag-link-261 tag-link-position-19" style="font-size: 9.9444444444444pt;" aria-label="otus book (18 элементов)" data-wpel-link="internal">otus book</a>
<a href="https://otus.ru/journal/tag/php/" class="tag-cloud-link tag-link-45 tag-link-position-20" style="font-size: 10.527777777778pt;" aria-label="PHP (21 элемент)" data-wpel-link="internal">PHP</a>
<a href="https://otus.ru/journal/tag/python/" class="tag-cloud-link tag-link-27 tag-link-position-21" style="font-size: 16.944444444444pt;" aria-label="Python (99 элементов)" data-wpel-link="internal">Python</a>
<a href="https://otus.ru/journal/tag/qa/" class="tag-cloud-link tag-link-155 tag-link-position-22" style="font-size: 11.402777777778pt;" aria-label="qa (26 элементов)" data-wpel-link="internal">qa</a>
<a href="https://otus.ru/journal/tag/sql/" class="tag-cloud-link tag-link-38 tag-link-position-23" style="font-size: 12.861111111111pt;" aria-label="SQL (37 элементов)" data-wpel-link="internal">SQL</a>
<a href="https://otus.ru/journal/tag/team-lead/" class="tag-cloud-link tag-link-364 tag-link-position-24" style="font-size: 9.9444444444444pt;" aria-label="team lead (18 элементов)" data-wpel-link="internal">team lead</a>
<a href="https://otus.ru/journal/tag/unity/" class="tag-cloud-link tag-link-24 tag-link-position-25" style="font-size: 8pt;" aria-label="unity (11 элементов)" data-wpel-link="internal">unity</a>
<a href="https://otus.ru/journal/tag/algoritmy/" class="tag-cloud-link tag-link-30 tag-link-position-26" style="font-size: 9.9444444444444pt;" aria-label="Алгоритмы (18 элементов)" data-wpel-link="internal">Алгоритмы</a>
<a href="https://otus.ru/journal/tag/bazy-dannyh/" class="tag-cloud-link tag-link-40 tag-link-position-27" style="font-size: 10.138888888889pt;" aria-label="Базы данных (19 элементов)" data-wpel-link="internal">Базы данных</a>
<a href="https://otus.ru/journal/tag/matematika/" class="tag-cloud-link tag-link-44 tag-link-position-28" style="font-size: 10.916666666667pt;" aria-label="Математика (23 элемента)" data-wpel-link="internal">Математика</a>
<a href="https://otus.ru/journal/tag/arhitektura-po/" class="tag-cloud-link tag-link-10 tag-link-position-29" style="font-size: 9.4583333333333pt;" aria-label="архитектура ПО (16 элементов)" data-wpel-link="internal">архитектура ПО</a>
<a href="https://otus.ru/journal/tag/bazy-dannyh-2/" class="tag-cloud-link tag-link-251 tag-link-position-30" style="font-size: 10.138888888889pt;" aria-label="базы данных (19 элементов)" data-wpel-link="internal">базы данных</a>
<a href="https://otus.ru/journal/tag/vebinar/" class="tag-cloud-link tag-link-201 tag-link-position-31" style="font-size: 13.930555555556pt;" aria-label="вебинар (48 элементов)" data-wpel-link="internal">вебинар</a>
<a href="https://otus.ru/journal/tag/dajdzhest/" class="tag-cloud-link tag-link-308 tag-link-position-32" style="font-size: 10.722222222222pt;" aria-label="дайджест (22 элемента)" data-wpel-link="internal">дайджест</a>
<a href="https://otus.ru/journal/tag/zapis-vebinara/" class="tag-cloud-link tag-link-226 tag-link-position-33" style="font-size: 14.902777777778pt;" aria-label="запись вебинара (61 элемент)" data-wpel-link="internal">запись вебинара</a>
<a href="https://otus.ru/journal/tag/zapis-uroka/" class="tag-cloud-link tag-link-272 tag-link-position-34" style="font-size: 16.069444444444pt;" aria-label="запись урока (80 элементов)" data-wpel-link="internal">запись урока</a>
<a href="https://otus.ru/journal/tag/informacionnaya-bezopasnost/" class="tag-cloud-link tag-link-232 tag-link-position-35" style="font-size: 10.138888888889pt;" aria-label="информационная безопасность (19 элементов)" data-wpel-link="internal">информационная безопасность</a>
<a href="https://otus.ru/journal/tag/karera-v-it/" class="tag-cloud-link tag-link-292 tag-link-position-36" style="font-size: 9.9444444444444pt;" aria-label="карьера в IT (18 элементов)" data-wpel-link="internal">карьера в IT</a>
<a href="https://otus.ru/journal/tag/podborka/" class="tag-cloud-link tag-link-7 tag-link-position-37" style="font-size: 12.666666666667pt;" aria-label="подборка (35 элементов)" data-wpel-link="internal">подборка</a>
<a href="https://otus.ru/journal/tag/podborka-statej/" class="tag-cloud-link tag-link-219 tag-link-position-38" style="font-size: 15.777777777778pt;" aria-label="подборка статей (75 элементов)" data-wpel-link="internal">подборка статей</a>
<a href="https://otus.ru/journal/tag/programmirovanie/" class="tag-cloud-link tag-link-65 tag-link-position-39" style="font-size: 22pt;" aria-label="программирование (332 элемента)" data-wpel-link="internal">программирование</a>
<a href="https://otus.ru/journal/tag/proekt/" class="tag-cloud-link tag-link-321 tag-link-position-40" style="font-size: 11.888888888889pt;" aria-label="проект (29 элементов)" data-wpel-link="internal">проект</a>
<a href="https://otus.ru/journal/tag/proektnaya-rabota/" class="tag-cloud-link tag-link-310 tag-link-position-41" style="font-size: 11.597222222222pt;" aria-label="проектная работа (27 элементов)" data-wpel-link="internal">проектная работа</a>
<a href="https://otus.ru/journal/tag/seti/" class="tag-cloud-link tag-link-181 tag-link-position-42" style="font-size: 12.958333333333pt;" aria-label="сети (38 элементов)" data-wpel-link="internal">сети</a>
<a href="https://otus.ru/journal/tag/testirovanie/" class="tag-cloud-link tag-link-69 tag-link-position-43" style="font-size: 13.930555555556pt;" aria-label="тестирование (48 элементов)" data-wpel-link="internal">тестирование</a>
<a href="https://otus.ru/journal/tag/upravlenie-komandoj/" class="tag-cloud-link tag-link-63 tag-link-position-44" style="font-size: 11.694444444444pt;" aria-label="управление командой (28 элементов)" data-wpel-link="internal">управление командой</a>
<a href="https://otus.ru/journal/tag/habr-2/" class="tag-cloud-link tag-link-203 tag-link-position-45" style="font-size: 13.930555555556pt;" aria-label="хабр (48 элементов)" data-wpel-link="internal">хабр</a></div>
</li>
			</ul>
		
	</div>

	</aside>		
	</div> <!-- .ts-row -->
</div> <!-- .main -->





<footer class="main-footer dark bold">

	

	


	
		<section class="lower-footer cf">
			<div class="wrap">

				
				
					<div class="links">
						<div class="menu-menju-navykov-container"><ul id="menu-menju-navykov-1" class="menu"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10413"><a href="https://otus.ru/categories/programming/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Программирование<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10414"><a href="https://otus.ru/categories/architecture/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Архитектура<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10415"><a href="https://otus.ru/categories/operations/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Инфраструктура<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10416"><a href="https://otus.ru/categories/information-security-courses/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Безопасность<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10417"><a href="https://otus.ru/categories/data-science/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Data Science<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10418"><a href="https://otus.ru/categories/gamedev/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">GameDev<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10419"><a href="https://otus.ru/categories/marketing-business/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Управление<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10420"><a href="https://otus.ru/categories/analytics/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Аналитика и анализ<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10421"><a href="https://otus.ru/categories/testing/" data-wpel-link="external" target="_blank" rel="nofollow external noopener noreferrer" class="wpel-icon-right">Тестирование<span class="wpel-icon wpel-image wpel-icon-6"></span></a></li>
</ul></div>					</div>

				

				<p class="copyright"> © 2015-2026 OTUS				</p>



									<div class="to-top">
						<a href="#" class="back-to-top"><i class="fa fa-angle-up"></i> Top</a>
					</div>
				
			</div>
		</section>

	

</footer>

</div> <!-- .main-wrap -->



<div class="mobile-menu-container off-canvas" id="mobile-menu">

	<a href="#" class="close"><i class="fa fa-times"></i></a>

	<div class="logo">
			</div>

	
		<ul class="mobile-menu"></ul>

	</div>



	<div class="search-modal-wrap">

		<div class="search-modal-box" role="dialog" aria-modal="true">
			

	<form method="get" class="search-form" action="https://otus.ru/journal/">
		<input type="search" class="search-field" name="s" placeholder="Search..." value="" required />

		<button type="submit" class="search-submit visuallyhidden">Submit</button>

		<p class="message">
			Type above and press <em>Enter</em> to search. Press <em>Esc</em> to cancel.		</p>
				
	</form>

		</div>
	</div>


<script type="text/javascript" src="https://otus.ru/journal/wp-content/plugins/clearfy/components/comments-plus/assets/js/url-span.js" id="wbcr-comments-plus-url-span-js"></script>
<script type="text/javascript" id="ez-toc-scroll-scriptjs-js-extra">
/* <![CDATA[ */
var eztoc_smooth_local = {"scroll_offset":"30"};
/* ]]> */
</script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/plugins/easy-table-of-contents/assets/js/smooth_scroll.min.js" id="ez-toc-scroll-scriptjs-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js" id="ez-toc-js-cookie-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js" id="ez-toc-jquery-sticky-kit-js"></script>
<script type="text/javascript" id="ez-toc-js-js-extra">
/* <![CDATA[ */
var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"","scroll_offset":"30","fallbackIcon":"<span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span>"};
/* ]]> */
</script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js" id="ez-toc-js-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/custom-script.js" id="custom-script-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/magnific-popup.js" id="magnific-popup-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/jquery.fitvids.js" id="jquery-fitvids-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-includes/js/imagesloaded.min.js" id="imagesloaded-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/object-fit-images.js" id="object-fit-images-js"></script>
<script type="text/javascript" id="contentberg-theme-js-extra">
/* <![CDATA[ */
var Bunyad = {"custom_ajax_url":"\/journal\/forma-obratnoj-svyazi-na-html-i-css-chto-nuzhno-znat-o-ee-sozdanii\/"};
/* ]]> */
</script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/theme.js" id="contentberg-theme-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/theia-sticky-sidebar.js" id="theia-sticky-sidebar-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/jquery.slick.js" id="jquery-slick-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-content/themes/contentberg/js/jarallax.js" id="jarallax-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-includes/js/masonry.min.js" id="masonry-js"></script>
<script type="text/javascript" src="https://otus.ru/journal/wp-includes/js/jquery/jquery.masonry.min.js" id="jquery-masonry-js"></script>

</body>

</html>
<!-- Cache served by breeze CACHE - Last modified: Tue, 10 Mar 2026 17:49:52 GMT -->