Вы здесь: Главная → Сборник статей → Формы → Создать форму HTML

Предыдующая статья: Выводим количество записей в таблице MySQL

Автор: Николай Гришин / Дата: 2018-06-28

2018-06-28

Создаем формы HTML

Здравствуйте, уважаемый посетитель!

В предыдущих разделах мы создали основные элементы сайта, а также рассмотрели вопросы, связанные с наполнением контента. И теперь можем перейти к следующей довольно важной и обширной теме - к работе с формами HTML.

HTML-формы важнейшие элементы взаимодействия, определяющие интерактивную часть веб-страницы. Без которых не может обойтись ни один полноценный сайт. Ведь именно с их помощью осуществляется основной обмен между пользователем и стороной сервера.

Но в то же время, формы являются довольно сложными элементами интерфейса, с большим разнообразием функциональных компонентов и текстовых полей. Поэтому, в данном разделе постараемся более подробно рассмотреть основные ее элементы, уделив особое внимание практическому их применению в создаваемом сайте.

Причем здесь также будут затронуты и вопросы работы с базой данных MySQL. Так как применение форм в наших примерах будет неразрывно связано с их взаимодействием с таблицами БД. В которых будут сохраняться введённые пользователями данные, используемые в дальнейшем сервером при обработке запросов.

Содержание

В общем о формах HTML
форма онлайн заказа
форма регистрации
Форма авторизации
форма обратной связи

В общем о формах HTML

Форма на веб-странице устанавливается блочным элементом

, который представляет собой контейнер, включающий в себя все элементы, отвечающие за обработку ввода данных, такие как , ,

.</p>
                      <p>При этом у тега <form> имеется несколько атрибутов, но два из них являются обязательными. Это "action", который содержит адрес, определяющий, куда будет отправлена форма и "method", определяющий способ (POST или GET), которым она будет отправлена.</p>
                      <p>Что касается ее элементов, то самым разносторонним является тег <input> с помощью которого передается большая часть информации и создаются разные элементы интерфейса. Причем тип полей ввода определяется его основным атрибутом "type", от значения которого зависит их функциональное предназначение.</p>
                      <p>Так, при при значении "text" - текстовое поле, "password" - поле с паролем, "email" - поле для ввода адреса электронной почты, "radio" - переключатель, "checkbox" - флажок, "submit" - кнопка для отправки формы.</p>
                      <p>Ниже показан пример с использования элемента <input> для разных видов полей.</p>
                      <div class="pop-window90">
                        <ol>
                          <li class="pop-wind-0">
                            <p><form <span class="red">name</span>=<span class="fiol"><b>"example"</b></span> <span class="red">action</span>=<span class="fiol"><b>"#"</b></span> <span class="red">method</span>=<span class="fiol"><b>"post"</b></span>></p>
                          </li>
                          <li class="pop-wind-1">
                            <p><input <span class="red">type</span>=<span class="fiol"><b>"text"</b></span> <span class="red">name</span>=<span class="fiol"><b>"login"</b></span>></p>
                          </li>
                          <li class="pop-wind-1">
                            <p><input <span class="red">type</span>=<span class="fiol"><b>"email"</b></span> <span class="red">name</span>=<span class="fiol"><b>"email"</b></span>></p>
                          </li>
                          <li class="pop-wind-1">
                            <p><input <span class="red">type</span>=<span class="fiol"><b>"password"</b></span> <span class="red">name</span>=<span class="fiol"><b>"password"</b></span>></p>
                          </li>
                          <li class="pop-wind-1">
                            <p><input <span class="red">type</span>=<span class="fiol"><b>"submit"</b></span> <span class="red">name</span>=<span class="fiol"><b>"button"</b></span> <span class="red">value</span>=<span class="fiol"><b>"Отправить"</b></span>></p>
                          </li>
                          <li class="pop-wind-0">
                            <p></form></p>
                          </li>
                        </ol>
                      </div>
                      <div class="pop-wind">
                        <p>Рис.1 Пример формы HTML</p>
                      </div>
                      <p>В данном примере видно, что для элемента <input> в зависимости от значения атрибута "type", поле может принимать различный вид. Например, в первом элементе (поз.2) поле предназначено для ввода текстовой информации (в данном случае для логина). В следующем (поз.3) - для ввода e-mail, далее (поз.4) - для пароля, а в последнем (поз.5) - кнопка для отправки формы.</p>
                      <p>Конечно, это упрощенный пример, в котором в основном использованы обязательные атрибуты. В реальности же обычно применяются и другие, определяющие характеристики полей.</p>
                      <p>При этом для каждого элемента имеется свой список атрибутов. Все их перечислять здесь не стоит, так как их достаточно много, и эту информацию лучше брать из специально предназначенной для этого справочной литературе по HTML.</p>
                      <div class="title-hr">
                        <p class="pop-send4">В сети интернет можно найти большое количество заслуживающих доверия справочников по HTML. Например, как я уже ранее упоминал, для этих целей можно использовать справочник по веб-технологиям <span>WebReference.ru,</span> одна из частей которого посвящена подробному описанию всех имеющихся в HTML5 элементов.</p>
                        <p class="pust">скриншот 33</p>
                      </div>
                      <p>Мы же здесь будем практически создавать формы для построения функциональных узлов нашего сайта. И постараемся как можно больше использовать разные элементы с различными атрибутами.</p>
                      <p>Далее будет показано какие варианты мы будем создавать и какие типы элементов будем в них использовать.</p>
                      <div class="cat-right">
                        <p><a href="#metka_0">В начало</a></p>
                      </div>
                    </div>
                    <div class="chapter">
                      <div class="pop-glav">
                        <h2 id="metka_2"><i>форма онлайн заказа</i></h2>
                        <hr>
                      </div>
                      <p>В создаваемом сайте предусматривается оформление заказа на установку противоугонной маркировки стекол автомобиля. Для этого необходимо ввести данные автомобиля и выбрать способа маркировки. После чего, на основе введенных данных, пользователю должна предоставляться информация о стоимости выполнения работ. Причем как полной стоимости, так и рассчитанной с учетом скидок.</p>
                      <p>Соответствующий вариант формы онлайн заказа, который мы будем создавать, приведен на следующем скриншоте.</p>
                      <div class="pop-img-center100">
                        <div></div>
<img class="b-lazy" src="/images/b-lazy/loading.svg" data-src="/images/article/book/form/sozdat-formu-html/forma-onlajn-zakaza.jpg" title="Форма онлайн заказа" alt="Форма онлайн заказа">
                        <p>Рис.2 Форма онлайн заказа</p>
                      </div>
                      <p>Здесь будут использоваться следующие элементы:</p>
                      <ul class="pop-style2">
                        <li><input> с полем ввода текста;</li>
                        <li><select>;</li>
                        <li><option>.</li>
                      </ul>
                      <div class="cat-right">
                        <p><a href="#metka_0">В начало</a></p>
                      </div>
                    </div>
                    <div class="chapter">
                      <div class="pop-glav">
                        <h2 id="metka_3"><i>форма регистрации</i></h2>
                        <hr>
                      </div>
                      <p>Форма регистрации, используемая в создаваемом сайте совмещена с онлайн заказом. Это связано с тем, что в данном случае личный кабинет пользователя предназначен для отображения состояния сделанных заказов и оформления новых. Поэтому вполне логично в этом варианте производить регистрацию одновременно с выполнением первого заказа.</p>
                      <p>Ниже показано, как предполагается сформировать эту функциональную часть.</p>
                      <div class="pop-img-center100">
                        <div></div>
<img class="b-lazy" src="/images/b-lazy/loading.svg" data-src="/images/article/book/form/sozdat-formu-html/forma-registracii.jpg" title="форма регистрации" alt="форма регистрации">
                        <p>Рис.3 форма регистрации</p>
                      </div>
                      <p>Элементы, которые должны быть предусмотрены в этом варианте:</p>
                      <ul class="pop-style2">
                        <li><label>;</li>
                        <li><input> с полем ввода текста;</li>
                        <li><input> с полем ввода e-mail;</li>
                        <li><input> с полем ввода пароля;</li>
                        <li><input> с кнопкой для отправки формы (совмещенная с формой онлайн заказа).</li>
                      </ul>
                      <div class="cat-right">
                        <p><a href="#metka_0">В начало</a></p>
                      </div>
                    </div>
                    <div class="chapter">
                      <div class="pop-glav">
                        <h2 id="metka_4"><i>Форма авторизации</i></h2>
                        <hr>
                      </div>
                      <p>Для входа в личный кабинет необходима авторизация. Обычно такая форма состоит из полей ввода логина, пароля и кнопки для ее отправки. Также для восстановления учетных данных часто используются дополнительные ссылки типа: "Забыли логин?", "Забыли пароль?".</p>
                      <p>Несмотря на то, что такие дополнительные ссылки обычно располагаются вместе с элементами формы регистрации, но по сути к ее элементами они не относятся.</p>
                      <p>Ниже показан общий вид панели пользователя с элементами авторизации.</p>
                      <div class="pop-img-center60">
                        <div></div>
<img class="b-lazy" src="/images/b-lazy/loading.svg" data-src="/images/article/book/form/sozdat-formu-html/forma-avtorizacii.jpg" title="форма авторизации" alt="форма авторизации">
                        <p>Рис.4 форма авторизации</p>
                      </div>
                      <p>В этом случае будут использоваться следующие элементы:</p>
                      <ul class="pop-style2">
                        <li><label>;</li>
                        <li><input> с полем ввода текста;</li>
                        <li><input> с полем ввода пароля;</li>
                        <li><input> с кнопкой для отправки формы.</li>
                      </ul>
                      <div class="cat-right">
                        <p><a href="#metka_0">В начало</a></p>
                      </div>
                    </div>
                    <div class="chapter">
                      <div class="pop-glav">
                        <h2 id="metka_5"><i>форма обратной связи</i></h2>
                        <hr>
                      </div>
                      <p>Само название этой формы говорит о ее назначении. Поэтому здесь должны быть все необходимые поля для отправки сообщения. В данном случае она будет состоять из четырех полей: два для ввода имени и почтового адреса отправителя и два для передачи самого сообщения.</p>
                      <p>Внешний вид такой формы показан на следующем скриншоте.</p>
                      <div class="pop-img-center100">
                        <div></div>
<img class="b-lazy" src="/images/b-lazy/loading.svg" data-src="/images/article/book/form/sozdat-formu-html/forma-obratnoj-svyazi.jpg" title="Форма обратной связи" alt="Форма обратной связи">
                        <p>Рис.5 Форма обратной связи</p>
                      </div>
                      <p>Здесь, помимо уже используемых элементов, должен добавиться еще один (<textarea>), с помощью которого в поле можно будет вводить несколько строк текста. А весь перечень для этого варианта примет следующий вид:</p>
                      <ul class="pop-style2">
                        <li><label>;</li>
                        <li><input> с полем ввода текста;</li>
                        <li><input> с полем ввода e-mail;</li>
                        <li><textarea> с областью, в которую можно вводить несколько строк текста.</li>
                        <li><input> с кнопкой для отправки формы.</li>
                      </ul>
                      <div class="pop-glav15">
                        <hr>
                      </div>
                      <p>Таким образом, в этой, по сути, вводной статье, мы рассмотрели некоторые общие вопросы, связанные с формами HTML. И определились, с какими конкретными примерами мы будем в дальнейшем работать.</p>
                      <p>После чего можем перейти и к практическому созданию форм, составляя для каждого случая необходимый код и описывая их взаимодействие с соответствующими таблицами MySQL. Но это будет уже в следующих статьях.</p>
                      <div class="cat-right">
                        <p><a href="#metka_0">В начало</a></p>
                      </div>
                    </div>
                    <div class="pop-sinse">
                      <p>С уважением, Николай Гришин</p>
                    </div>
                  </div>
                </div>
                <div class="pop-glav15">
                  <hr>
                </div>
                <ul class="pop-style16">
                  <li class="pop-next">Следующая сатья: <a href="/book/form/sozdat-formu-onlajn-zakaza.html">Создаем форму онлайн заказа</a>
                  </li>
                </ul>
              </div>
            </div>
            <div class="pop-vod4">
              <div class="pop-article">
                <div class="pop-glav">
                  <p><i>Комментарии</i></p>
                  <hr>
                </div>
                <p>Если у Вас возникли вопросы, или есть какие-либо пожелания по представлению материала, либо заметили какие-нибудь ошибки, а быть может просто хотите выразить свое мнение, пожалуйста, оставьте свои комментарии. Такая обратная связь очень важна для возможности учета мнения посетителей.</p>
                <p><span>Буду Вам за это очень признателен!</span></p>
              </div>
              <div id="hypercomments_widget"></div>
              <div id="hypercomments_script"></div>
            </div>
          </main>
          <aside id="banner_center">
            <div class="pop-vod4">
              <div class="pop-article">
                <div class="pop-glav">
                  <p><i>Подписка</i></p>
                  <hr>
                </div>
                <p>Здесь вы можете подписаться на получение уведомлений о выходе новых статей блога.</p>
                <p>Данные об <span>e-mail надежно защищены</span> (работа сайта обеспечивается только через защищенные соединения по протоколу SSL) и <span>не предназначены для использования третьими лицами</span>.</p>
                <div class="user-wrapper">
                  <div class="user_1"></div>
                  <div class="form_reg">
                    <form name="sait" action="/subscribe.html" method="post" onsubmit="return checkRiting(this)" id="sait">
                      <div>
                        <label for="name-sait">Ваш имя:</label>
                      </div>
                      <div>
                        <input type="text" id="name-sait" name="name-sait" title="Имя должно быть на русском и содержать не менее 3 символов" required="">
                      </div>
                      <div>
                        <label for="email-sait">Ваш e-mail:</label>
                      </div>
                      <div>
                        <input type="email" id="email-sait" name="email-sait" required="">
                      </div>
                      <div class="sait-checkbox">
                        <div>
                          <span> </span><b>✓</b> Я не робот
                        </div>
                      </div>
                      <div class="sait-capcha capcha">
                        <span>6 - 3 =</span> <input type="text" name="result-sait" value="">
                      </div>
                      <p class="subscribe-button"><input type="submit" name="button_sait" value="Отправить"></p>
                    </form>
                  </div>
                  <div class="user_2"></div>
                </div>
              </div>
            </div>
            <div class="pop-vod4" id="anons-block">
              <div class="pop-article">
                <div class="pop-glav" id="glav-anons">
                  <p><i>Другие статьи сборника "Самописный сайт своими руками"</i></p>
                  <hr>
                </div>
                <div id="anons-common">
                  <div class="anons-add">
                    <div class="anons-0"></div>
                  </div>
                </div>
                <div class="next-section4">
                  <p>Показать больше</p>
                </div>
              </div>
            </div>
          </aside>
        </div>
        <div id="mirr-banners_240">
          <aside id="banners_240">
            <div class="div-banner" id="banner_vip1">
              <div class="div-banner-fon_right">
                <div class="banner_1">
                  <span>Последнее</span>
                </div>
                <ul class="pop-style24">
                  <li>
                    <div class="style-block">
                      <div>
                        <div class="style-ground obrabotka-oshibok-sql-zaprosov">
                          <div id="obrabotka-oshibok-sql-zaprosov"></div>
                        </div>
                      </div>
                      <div>
                        <span>2019-03-12</span> <a href="/book/errors/obrabotka-oshibok-sql-zaprosov.html">Обработка ошибок sql-запросов</a>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="style-block">
                      <div>
                        <div class="style-ground svorachivanie-i-razvorachivanie-ehlementov-na-javascript">
                          <div id="svorachivanie-i-razvorachivanie-ehlementov-na-javascript"></div>
                        </div>
                      </div>
                      <div>
                        <span>2019-05-05</span> <a href="/book/content/svorachivanie-i-razvorachivanie-ehlementov-na-javascript.html">Сворачивание и разворачивание элементов на JavaScript</a>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="style-block">
                      <div>
                        <div class="style-ground plavayushchij-sajdbar-na-sticky-css">
                          <div id="plavayushchij-sajdbar-na-sticky-css"></div>
                        </div>
                      </div>
                      <div>
                        <span>2019-07-10</span> <a href="/book/floating-sidebar/plavayushchij-sajdbar-na-sticky-css.html">Плавающий сайдбар на sticky-css</a>
                      </div>
                    </div>
                  </li>
                </ul>
                <ul class="pop-style17" id="google"></ul>
              </div>
            </div>
            <div class="div-banner" id="banner_vip2">
              <div class="div-banner-fon_right">
                <div class="banner_1">
                  <span>Популярное</span>
                </div>
                <ul class="pop-style18">
                  <li>
                    <div class="style-block">
                      <div>
                        <div class="style-ground2 podkluchenie-bazi-dannix-mysql">
                          <div><img src="/images/anons/smallest/podkluchenie-bazi-dannix-mysql.png" alt=""></div>
                        </div>
                      </div>
                      <div>
                        <span>2017-06-27</span> <a href="/book/mysql/podkluchenie-bazi-dannix-mysql.html">Подключаем базу данных MySQL с использованием процедурного и объектно-ориентированного стиля MySQLi</a>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="style-block">
                      <div>
                        <div class="style-ground2 kak-ustanovit-perenesti-sajt-na-openserver">
                          <div><img src="/images/anons/smallest/kak-ustanovit-perenesti-sajt-na-openserver.png" alt=""></div>
                        </div>
                      </div>
                      <div>
                        <span>2018-11-13</span> <a href="/book/setting/kak-ustanovit-perenesti-sajt-na-openserver.html">Как установить (перенести) сайт на локальный веб-сервер Open Server</a>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="style-block">
                      <div>
                        <div class="style-ground2 kak-sozdaty-dinamicheskiy-sait">
                          <div><img src="/images/anons/smallest/kak-sozdaty-dinamicheskiy-sait.png" alt=""></div>
                        </div>
                      </div>
                      <div>
                        <span>2017-01-10</span> <a href="/book/dinamicheskiy/kak-sozdaty-dinamicheskiy-sait.html">Создаем динамический сайт с помощью php</a>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="style-block">
                      <div>
                        <div class="style-ground2 poluchenie-i-proverka-dannyh-iz-formy-v-php">
                          <div><img src="/images/anons/smallest/poluchenie-i-proverka-dannyh-iz-formy-v-php.png" alt=""></div>
                        </div>
                      </div>
                      <div>
                        <span>2018-09-14</span> <a href="/book/form/poluchenie-i-proverka-dannyh-iz-formy-v-php.html">Получаем и проверяем данные из формы в PHP</a>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="style-block">
                      <div>
                        <div class="style-ground2 sozdanie-formy-avtorizacii">
                          <div><img src="/images/anons/smallest/sozdanie-formy-avtorizacii.png" alt=""></div>
                        </div>
                      </div>
                      <div>
                        <span>2018-12-16</span> <a href="/book/form/sozdanie-formy-avtorizacii.html">Создаем форму авторизации</a>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="style-block">
                      <div>
                        <div class="style-ground2 sozdanie-bazi-dannix-mysql">
                          <div><img src="/images/anons/smallest/sozdanie-bazi-dannix-mysql.png" alt=""></div>
                        </div>
                      </div>
                      <div>
                        <span>2017-06-21</span> <a href="/book/mysql/sozdanie-bazi-dannix-mysql.html">Создаем базу данных MySQL</a>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="style-block">
                      <div>
                        <div class="style-ground2 sozdanie-tablitsi-mysql">
                          <div><img src="/images/anons/smallest/sozdanie-tablitsi-mysql.png" alt=""></div>
                        </div>
                      </div>
                      <div>
                        <span>2017-07-02</span> <a href="/book/mysql/sozdanie-tablitsi-mysql.html">Создаем таблицы MySQL c помощью phpMyAdmin, SQL-команд и в PHP</a>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="style-block">
                      <div>
                        <div class="style-ground2 vivod-dannix-mysql-php">
                          <div><img src="/images/anons/smallest/vivod-dannix-mysql-php.png" alt=""></div>
                        </div>
                      </div>
                      <div>
                        <span>2017-08-03</span> <a href="/book/mysql/vivod-dannix-mysql-php.html">Выводим данные из БД MySQL в PHP</a>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="style-block">
                      <div>
                        <div class="style-ground2 sozdanie-veb-ctranitsi">
                          <div><img src="/images/anons/smallest/sozdanie-veb-ctranitsi.png" alt=""></div>
                        </div>
                      </div>
                      <div>
                        <span>2016-11-06</span> <a href="/book/verstka/sozdanie-veb-ctranitsi.html">Создаем веб-страницу и размещаем ее на локальном веб-сервере</a>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
            <div class="div-banner" id="banner_vip3">
              <div class="div-banner-fon_right">
                <div class="banner_1">
                  <span>Как загрузить файлы сайта</span>
                </div>
                <div class="banner_4">
                  <p>При рассмотрении различных этапов создания сайта может возникнуть вопрос, как использовать те исходные материалы, которые прилагаются к статьям Сборника?</p>
                </div>
                <p class="banner_35"></p>
<noscript></noscript>
                <div class="banner_4">
                  <p>Для этого можно использовать описание процедуры загрузки предоставляемых исходных файлов разрабатываемого сайта на локальный веб-сервер <a href="/book/setting/kak-ustanovit-perenesti-sajt-na-denwer.html">Денвер</a> и <a href="/book/setting/kak-ustanovit-perenesti-sajt-na-openserver.html">Open Server</a>.</p>
                </div>
                <p class="banner_35"></p>
<noscript></noscript>
                <div class="banner_40">
                  <p>В свою очередь, при размещении сайта в сети Интернет можно воспользоваться статьей <a href="/book/razmeschenie/kak-perenesti-sait-na-hosting.html">Переносим сайт на хостинг</a> где показано, как с помощью FTP клиента FileZilla файлы с локального компьютера могут быть перенесены на удаленный сервер.</p>
                </div>
              </div>
            </div>
            <div class="div-banner5" id="banner_vip5">
              <div class="div-banner-fon_right">
                <div class="banner_0">
                  <span>Антиплагиат</span>
                </div>
                <div class="banner_30">
                  <p><b>Уважаемые посетители!</b></p>
                </div>
                <div class="banner_36">
                  <p>Сообщаю Вам, что на сайте выявлено большое количество случаев воровства контента.</p>
                  <p>В связи с чем мною приняты некоторые меры с целью предотвращения дальнейших случаев плагиата.</p>
                  <p>В результате чего частично <b>ограничена возможность копирования изображений и текстового содержания статей</b>.</p>
                  <div class="banner_35">
                    <noscript></noscript>
                  </div>
                  <p>При этом доступ к копированию фрагментов статей, относящихся к <b>ссылкам и исходным кодам разрабатываемого сайта, оставлен, как и прежде открытым</b>.</p>
                </div>
                <div class="banner_32">
                  <p>Надеюсь на Ваше понимание.</p>
                </div>
                <div class="banner_33">
                  <p>С уважением, Николай Гришин</p>
                </div>
                <div class="banner_14">
                  <p>Плагиаторам</p>
                </div>
                <div class="banner_34">
                  <div class="banner_3">
                    <p>Владельцам же сайтов с перечисленными ниже адресами страниц:</p>
                    <ul>
                      <li>"http://21099.ru/5322-ogranichenie-dvizheniya-transporta-v-astane.html";</li>
                      <li>"http://www.domashnielaifhacki.ru/vishivka/sozdanie-sayta-svoimi-rukami-s-nulya.php";</li>
                      <li>"http://paninobuxu304.ga/7431339/3f93e-sozdat-sayt-svoimi-rukami-i-besplatno-ce0e032a";</li>
                      <li>"http://yoga-altay.ru/component/content/article/21-massage/267-vibromassazh.html";</li>
                      <li>"http://www.uvdrzn.ru/1610-sayt-mozhno-sozdat-neskolkimi-sposobami.html".</li>
                    </ul>
                  </div>
                  <div class="banner_37">
                    <p>Предлагаю в добровольном порядке удалить со своих ресурсов тексты статей блога, которые незаконно были использованы в своих целях.</p>
                    <p>В случае, если это сделано не будет, с моей стороны будет передана вся необходимая информация в соответствующие службы поисковых системы Яндекс и Google для принятия должных решений.</p>
                    <p>Оставляю также за собой право решения данного вопроса в судебном порядке для привлечения соответствующих лиц к ответственности, предусмотренной Гражданским кодексом Российской Федерации за нарушения норм и требований Закона РФ об авторском праве.</p>
                  </div>
                  <div class="pop-slip_4">
                    <p><button>Свернуть</button></p>
                  </div>
                </div>
              </div>
            </div>
          </aside>
        </div>
        <div id="clear"></div>
      </div>
    </div>
    <footer id="footer">
      <div class="footer-block">
        <div class="footer-label">
          
        </div>
        <div class="footer-label"></div>
      </div>
      <div id="footer-title">
        <p>Все права защищены © "Как создать сайт" 2022 <a href="/"> sayt-sozdat.ru</a></p>
      </div>
      <div class="menu-footer">
        <nav>
          <ul class="ftr-menu">
            <li class="passiv-footer">
              <a href="/">Главная</a>
            </li>
            <li class="passiv-footer">
              <a href="/karta-saita.html">Карта сайта</a>
            </li>
            <li class="passiv-footer">
              <a href="/book/">Сборник статей</a>
            </li>
            <li class="passiv-footer">
              <a href="/uslugi.html">Услуги</a>
            </li>
            <li class="passiv-footer">
              <a href="/ob-avtore.html">Об авторе</a>
            </li>
            <li class="passiv-footer">
              <a href="/obratnaya-svyaz.html">Обратная связь</a>
            </li>
            <li class="passiv-footer">
              <a href="/poisk.html">Поиск</a>
            </li>
            <li class="passiv-footer">
              <a href="/auth.html">Войти</a>
            </li>
            <li class="passiv-footer">
              <a href="/subscribe.html">Подписка</a>
            </li>
            <li class="passiv-footer">
              <a href="/registraciya.html">Регистрация</a>
            </li>
          </ul>
        </nav>
      </div>
    </footer>
  </div>
<noscript>
  <link rel="stylesheet" type="text/css" href="/styles/nojs.css">
</noscript> 
  <script src="/js/jquery-3.4.1.min.js"></script> 
  <script src="/js/jquery.easing.1.3.js"></script> 
  <script src="/js/jquery.flexslider_mod.js"></script> 
  <script src="/js/functions.js"></script> 
  <script src="/js/banner_script.js"></script>
</body>
</html>