Как создать форму на HTML: руководство для новичков

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

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

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

Содержание

Основы создания формы
Что такое форма
Какие элементы нужны для создания формы
Создание разметки формы
или . В заголовке можно указать название формы или описание того, что необходимо ввести в форму. Далее, следуют сами элементы формы. Наиболее распространенным элементом формы является тег . С помощью атрибута type внутри тега можно определить тип вводимой информации, например, текст, число, галочку и т.д. Также для тега можно определить атрибут name, который будет определять имя элемента формы, а атрибут id, который уникально идентифицирует элемент формы. Например, создаст текстовое поле для ввода имени пользователя. Если нужно добавить подпись к элементу формы, то для этого можно использовать тег . Элемент позволяет прикрепить текст к элементу формы, просто оборачивая его вокруг самого элемента и указывая значение атрибута for, совпадающего с id соответствующего элемента формы. Также можно использовать другие элементы формы, такие как для многострочного текста, для выпадающего списка, и для галочек и радиокнопок соответственно. Каждый из этих элементов может иметь свои уникальные атрибуты для настройки поведения и внешнего вида. После определения всех элементов формы, закрывается тег
. В заголовке можно указать название формы или описание того, что необходимо ввести в форму. Далее, следуют сами элементы формы. Наиболее распространенным элементом формы является тег . С помощью атрибута type внутри тега можно определить тип вводимой информации, например, текст, число, галочку и т.д. Также для тега можно определить атрибут name, который будет определять имя элемента формы, а атрибут id, который уникально идентифицирует элемент формы. Например, создаст текстовое поле для ввода имени пользователя. Если нужно добавить подпись к элементу формы, то для этого можно использовать тег . Элемент позволяет прикрепить текст к элементу формы, просто оборачивая его вокруг самого элемента и указывая значение атрибута for, совпадающего с id соответствующего элемента формы. Также можно использовать другие элементы формы, такие как для многострочного текста, для выпадающего списка, и для галочек и радиокнопок соответственно. Каждый из этих элементов может иметь свои уникальные атрибуты для настройки поведения и внешнего вида. После определения всех элементов формы, закрывается тег
Использование тега
Добавление текстовых полей и кнопок
Работа с типами полей
Текстовое поле

Основы создания формы

Основные элементы формы включают:

Тег <form> – обозначает начало и конец формы.
Тег <input> – используется для создания различных полей ввода, таких как текстовое поле, поле для пароля, флажок и т.д.
Тег <select> – создает выпадающий список.
Тег <textarea> – используется для создания полей для ввода текста.
Тег <button> – создает кнопку для отправки данных формы.

Для каждого элемента формы можно установить различные атрибуты, такие как имя, значение, минимальное и максимальное значения и т.д. Эти атрибуты позволяют настроить поведение элемента формы.

Также в форму можно добавить различные метки (тег <label>) для указания на назначение каждого поля формы, что позволяет пользователям легче понимать, как заполнять форму.

После того, как форма заполнена, ее данные могут быть отправлены на сервер с помощью метода POST или GET. Это позволяет обработать данные формы, например, сохранить их в базе данных или выполнить другие действия.

Создание формы может потребовать использования CSS для стилизации элементов и JavaScript для добавления функциональности, такой как валидация ввода данных перед отправкой формы.

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

Что такое форма

HTML-форма состоит из одного или нескольких полей ввода, таких как текстовые поля, выпадающие списки, флажки и кнопки отправки. Каждое поле ввода имеет атрибуты, которые определяют его тип, имя и другие свойства. Например, атрибут type=»text» для текстового поля и атрибут type=»submit» для кнопки отправки.

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

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

Какие элементы нужны для создания формы

Чтобы создать форму на HTML, мы должны использовать несколько основных элементов:

— Тег

— определяет начало и конец формы;

— Тег — используется для создания полей ввода, таких как текстовое поле, поле для ввода пароля, флажок и др.;

— Тег — позволяет создать многострочное текстовое поле;</p><p>— Тег <select> — создает выпадающий список, из которого пользователь может выбрать один или несколько вариантов;</p><p>— Тег <button> — создает кнопку, которую пользователь может нажать;</p><p>— Тег <label> — используется для связывания текста с соответствующим элементом формы;</p><p>— Тег</p><fieldset> — создает группу элементов формы и определяет их общий заголовок;<p>— Тег</p><legend> — определяет заголовок для группы элементов внутри тега<fieldset>;<p>— Тег<optgroup> — группирует элементы в выпадающем списке;</p><p>— Тег<option> — определяет пункт в выпадающем списке;</p><p>Эти основные элементы позволяют создавать различные виды форм для пользователей.</p><h2 id="sozdanie-razmetki-formy">Создание разметки формы</h2><p>Создание формы на HTML начинается с определения тега</p><form>. Этот тег служит контейнером для элементов формы и указывает браузеру на то, что это форма для ввода данных.<p>После открытия тега</p><form>, обычно следует заголовок формы, который можно определить с помощью тега<h3 id="ili-p-v-zagolovke-mozhno-ukazat-nazvanie"> или<h4 id="v-zagolovke-mozhno-ukazat-nazvanie-formy">. В заголовке можно указать название формы или описание того, что необходимо ввести в форму.<p>Далее, следуют сами элементы формы. Наиболее распространенным элементом формы является тег <input>. С помощью атрибута type внутри тега <input> можно определить тип вводимой информации, например, текст, число, галочку и т.д. Также для тега <input> можно определить атрибут name, который будет определять имя элемента формы, а атрибут id, который уникально идентифицирует элемент формы. Например, <input type="text" name="name" id="name"> создаст текстовое поле для ввода имени пользователя.</p><p>Если нужно добавить подпись к элементу формы, то для этого можно использовать тег <label>. Элемент <label> позволяет прикрепить текст к элементу формы, просто оборачивая его вокруг самого элемента и указывая значение атрибута for, совпадающего с id соответствующего элемента формы.</p><p>Также можно использовать другие элементы формы, такие как <textarea> для многострочного текста, <select> для выпадающего списка, <checkbox> и <radio> для галочек и радиокнопок соответственно. Каждый из этих элементов может иметь свои уникальные атрибуты для настройки поведения и внешнего вида.</p><p>После определения всех элементов формы, закрывается тег</p></form><p>, обозначающий конец формы. Далее можно добавить кнопку отправки формы с помощью тега <button> и атрибута type=»submit». При нажатии на эту кнопку данные из формы будут отправлены на сервер для дальнейшей обработки.</p><p>Пример разметки формы:</p><pre> <form> <h3>Вход в систему</h3> <label for="username">Имя пользователя:</label> <input type="text" name="username" id="username"> <label for="password">Пароль:</label> <input type="password" name="password" id="password"> <button type="submit">Войти</button> </form> </pre><p>В данном примере создается форма для входа в систему, где пользователь должен ввести своё имя и пароль. После нажатия на кнопку «Войти», данные будут отправлены на сервер для проверки.</p><h2 id="ispolzovanie-tega">Использование тега</h2><p>Например, если вы хотите выделить заголовок, чтобы он привлекал взгляды посетителей веб-страницы, вы можете использовать такой код:</p><p><code><br /> <h1><strong>Заголовок</strong></h1><br /> </code></p><p>Текст внутри тега <strong> будет выделен жирным шрифтом, что поможет сделать заголовок более заметным.</p><p>Кроме того, вы можете использовать тег <strong>для выделения отдельных слов или фраз внутри абзаца:</p><p><code><br /> <p>Этот текст очень <strong>важен</strong> для вас.</p><br /> </code></p><p>Такой код сделает слово «важен» жирным внутри абзаца, что поможет подчеркнуть его значение.</p><p>Тег <strong> может быть очень полезным для выделения ключевых слов или фраз, которые являются основными смысловыми единицами вашей веб-страницы. Подходящее использование этого тега поможет усилить впечатление, которое вы хотите произвести на своих посетителей.</p><p>Используйте тег <strong>с умом, чтобы подчеркнуть важные элементы вашей веб-страницы и сделать ее более привлекательной и информативной.</p><h2 id="dobavlenie-tekstovyh-poley-i-knopok">Добавление текстовых полей и кнопок</h2><p>Для создания формы на сайте необходимо добавить текстовые поля, в которых пользователь сможет вводить информацию, а также кнопки, которые позволят ему отправить данные или выполнить другие действия.</p><p>Чтобы добавить текстовое поле, используйте тег <input> и укажите атрибут type=»text». Например:</p><p><input type=»text» name=»username»></p><p>В данном примере мы создаем текстовое поле с именем «username».</p><p>Также можно добавить атрибуты placeholder и value, чтобы предоставить подсказку пользователю или задать значение по умолчанию:</p><p><input type=»text» name=»username» placeholder=»Введите ваше имя» value=»Иван»></p><p>Для добавления кнопки используйте тег <input> или <button>. Например:</p><p><input type=»submit» value=»Отправить»></p><p>В данном примере мы создаем кнопку с надписью «Отправить».</p><p>Также можно указать атрибуты name и onclick, чтобы определить название кнопки и задать действие при её нажатии:</p><p><button name=»submit» onclick=»submitForm()»>Отправить</button></p><p>В данном примере мы создаем кнопку с названием «submit» и вызываем функцию «submitForm()» при её нажатии.</p><h2 id="rabota-s-tipami-poley">Работа с типами полей</h2><p>Типы полей играют важную роль при создании формы на HTML. Зная, какой тип поля использовать, вы можете собирать различную информацию от пользователей и обеспечивать им удобный интерфейс.</p><p><strong>Тип «text»</strong></p><p>Это самый распространенный тип поля. Он предназначен для ввода текста. Настроить его можно с помощью атрибутов name, id, value и placeholder.</p><p><strong>Тип «email»</strong></p><p>Поле типа email предназначено для ввода электронной почты. Оно проверяет правильность введенного адреса и позволяет добавить специализированную клавиатуру для мобильных устройств.</p><p><strong>Тип «password»</strong></p><p>Поле типа password используется для ввода пароля. Оно маскирует введенный текст, чтобы никто не мог увидеть его при вводе.</p><p><strong>Тип «checkbox»</strong></p><p>Поле типа checkbox представляет собой флажок, который можно отметить или снять. Оно часто используется для выбора нескольких вариантов ответа.</p><p><strong>Тип «radio»</strong></p><p>Поле типа radio представляет собой кнопку, которую можно выбрать только одну из нескольких вариантов. Оно полезно, когда нужно выбрать только один вариант из нескольких.</p><p><strong>Тип «select»</strong></p><p>Поле типа select представляет собой выпадающий список с несколькими вариантами. Пользователи могут выбрать только один из вариантов.</p><p><strong>Тип «textarea»</strong></p><p>Поле типа textarea позволяет пользователям вводить большой объем текста. Оно создает многострочное поле ввода.</p><p><em>Зная различные типы полей, вы можете создавать разнообразные формы и собирать нужную информацию с пользователей.</em></p><h2 id="tekstovoe-pole">Текстовое поле</h2><p>Для создания текстового поля используется тег <input> с атрибутом type=»text».</p><p>Пример создания текстового поля:</p><table><tr><td><label for="name">Имя:</label></td><td><input type="text" id="name" name="name"></td></tr></table><p>В примере выше, метка «Имя» отображается рядом с текстовым полем, чтобы пользователь знал, что именно нужно вводить в это поле.</p><p>Атрибуты id и name используются для идентификации текстового поля. Они позволяют связать метку с полем и сделать поле доступным для обработки на сервере.</p><p>Текстовое поле может иметь различные дополнительные атрибуты, такие как placeholder, maxlength и дрите. Они позволяют настроить поведение и ограничения ввода текста в поле.</p><p>Например, атрибут placeholder позволяет задать подсказку для пользователя:</p><table><tr><td><label for="email">Email:</label></td><td><input type="text" id="email" name="email" placeholder="Введите ваш email"></td></tr></table><p>В примере выше, при отображении формы, в поле ввода будет отображаться текст «Введите ваш email». Эта подсказка исчезнет при фокусировке на поле и вернется, если поле пустое.</p><p>Текстовое поле может быть использовано в различных сценариях, где нужно получить текстовую информацию от пользователя. Его создание и настройка достаточно просты, и это является одной из причин его широкого использования.</p><div class="fpm_end"></div></div></article><div class="rating-box"><div class="rating-box__header">Оцените статью</div><div class="wp-star-rating js-star-rating star-rating--score-0" data-post-id="50463" data-rating-count="0" data-rating-sum="0" data-rating-value="0"><span class="star-rating-item js-star-rating-item" data-score="1"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span><span class="star-rating-item js-star-rating-item" data-score="2"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span><span class="star-rating-item js-star-rating-item" data-score="3"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span><span class="star-rating-item js-star-rating-item" data-score="4"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span><span class="star-rating-item js-star-rating-item" data-score="5"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span></div></div><div class="entry-social"><div class="social-buttons"><span class="social-button social-button--vkontakte" data-social="vkontakte" data-image=""></span><span class="social-button social-button--telegram" data-social="telegram"></span><span class="social-button social-button--odnoklassniki" data-social="odnoklassniki"></span><span class="social-button social-button--twitter" data-social="twitter"></span><span class="social-button social-button--sms" data-social="sms"></span><span class="social-button social-button--whatsapp" data-social="whatsapp"></span><span class="social-button social-button--pinterest" data-social="pinterest" data-url="https://profi-velo.ru/info/kak-sozdat-universalnuyu-formu-na-html-dlya-novickov-podrobnoe-rukovodstvo-s-posagovymi-instrukciyami/" data-title="Как создать универсальную форму на HTML для новичков — подробное руководство с пошаговыми инструкциями" data-description="HTML – это основной язык для создания веб-страниц и приложений. С его помощью вы можете управлять содержимым и структурой веб-страницы. Одной из важных возможностей HTML является создание форм, которые позволяют пользователям взаимодействовать с веб-страницей и передавать информацию. Формы на HTML состоят из различных элементов, таких как текстовые поля, кнопки, флажки и списки. Благодаря формам вы […]" data-image=""></span></div></div><meta itemprop="author" content="admin"><meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="https://profi-velo.ru/info/kak-sozdat-universalnuyu-formu-na-html-dlya-novickov-podrobnoe-rukovodstvo-s-posagovymi-instrukciyami/" content="Как создать универсальную форму на HTML для новичков — подробное руководство с пошаговыми инструкциями"><div itemprop="publisher" itemscope itemtype="https://schema.org/Organization" style="display: none;"><meta itemprop="name" content="profi-velo.ru"><meta itemprop="telephone" content="profi-velo.ru"><meta itemprop="address" content="https://profi-velo.ru/info"></div></main></div><aside id="secondary" class="widget-area" itemscope itemtype="http://schema.org/WPSideBar"><div class="sticky-sidebar js-sticky-sidebar"><div id="custom_html-2" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"><div id="Q_sidebar"></div></div></div></div></aside><div id="related-posts" class="related-posts fixed"><div class="related-posts__header">Вам также может понравиться</div><div class="post-cards post-cards--vertical"><div class="post-card post-card--related post-card--thumbnail-no"><div class="post-card__title"><a href="https://profi-velo.ru/info/yacnevaya-krupa-poleznye-svoistva-i-recepty-dlya-prigotovleniya-vkusnyx-blyud/">Ячневая крупа — полезные свойства и рецепты для приготовления вкусных блюд</a></div><div class="post-card__description">Ячневая крупа – это одна из наиболее полезных и питательных круп.</div></div><div class="post-card post-card--related post-card--thumbnail-no"><div class="post-card__title"><a href="https://profi-velo.ru/info/yarost-protiv-kromsaniya-vybor-praim-bioenergii/">Ярость против кромсания — выбор прайм биоэнергии</a></div><div class="post-card__description">Биоэнергия – это изумительное явление, которое с каждым</div></div><div class="post-card post-card--related post-card--thumbnail-no"><div class="post-card__title"><a href="https://profi-velo.ru/info/aktualnye-novosti-o-probkax-i-avariyax-na-yaroslavskom-sosse-v-storonu-moskvy/">Актуальные новости о пробках и авариях на Ярославском шоссе в сторону Москвы</a></div><div class="post-card__description">Ярославское шоссе — одна из главных транспортных</div></div><div class="post-card post-card--related post-card--thumbnail-no"><div class="post-card__title"><a href="https://profi-velo.ru/info/yasnovidenie-put-k-razvitiyu-sposobnosti-samostoyatelno-vosprinimat-mysli-i-emocii/">Ясновидение — путь к развитию способности самостоятельно воспринимать мысли и эмоции</a></div><div class="post-card__description">Ясновидение — это уникальная способность воспринимать</div></div></div></div></div></div><div class="site-footer-container "><footer id="colophon" class="site-footer site-footer--style-gray full"><div class="site-footer-inner fixed"><div class="footer-widgets footer-widgets-3"><div class="footer-widget"><div id="nav_menu-3" class="widget widget_nav_menu"><div class="widget-header">Про сайт</div><div class="menu-about_menu-container"><ul id="menu-about_menu" class="menu"><li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36"><a href="https://profi-velo.ru/info/kontakty/">Контакты</a></li><li id="menu-item-65" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-65"><a href="/sitemap_index.xml">Карта сайта</a></li></ul></div></div></div><div class="footer-widget"><div id="wpshop_widget_articles-2" class="widget widget_wpshop_widget_articles"><div class="widget-header">Популярные записи</div><div class="widget-articles"><article class="post-card post-card--small"><div class="post-card__body"><div class="post-card__title"><a href="https://profi-velo.ru/info/zapyataya-pered-ne-tolko-vypolnyaet-li-ona-vaznuyu-rol-v-strukture-predlozeniya-na-russkom-yazyke/">Запятая перед не только — выполняет ли она важную роль в структуре предложения на русском языке</a></div></div></article><article class="post-card post-card--small"><div class="post-card__body"><div class="post-card__title"><a href="https://profi-velo.ru/info/skolko-stoit-usluga-brokerov-po-oformleniyu-kredita-uznaite-o-komissiyax-i-procentax-ctoby-sekonomit-na-vasem-finansovom-resenii/">Сколько стоит услуга брокеров по оформлению кредита — узнайте о комиссиях и процентах, чтобы сэкономить на вашем финансовом решении!</a></div></div></article><article class="post-card post-card--small"><div class="post-card__body"><div class="post-card__title"><a href="https://profi-velo.ru/info/skolko-kubov-betona-v-miksere-kamaza-cena-i-osobennosti/">Сколько кубов бетона в миксере Камаза — цена и особенности</a></div></div></article><article class="post-card post-card--small"><div class="post-card__body"><div class="post-card__title"><a href="https://profi-velo.ru/info/skolko-derzitsya-temperatura-u-rebenka-posle-pnevmonii-priciny-i-sroki-normalizacii/">Сколько держится температура у ребенка после пневмонии? Причины и сроки нормализации</a></div></div></article></div></div></div><div class="footer-widget"><div id="nav_menu-4" class="widget widget_nav_menu"><div class="widget-header">Cookie</div><div class="menu-cookie_menu-container"><ul id="menu-cookie_menu" class="menu"><li id="menu-item-66" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-privacy-policy menu-item-66"><a rel="privacy-policy" href="https://profi-velo.ru/info/privacy-policy/">Политика конфиденциальности</a></li><li id="menu-item-67" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-67"><a href="https://profi-velo.ru/info/soglashenie/">Соглашение (пользовательское)</a></li></ul></div></div></div></div><div class="footer-bottom"><div class="footer-info"> © 2024 profi-velo.ru</div></div></div></footer></div></div> <script>document.addEventListener("copy", (event) => {var pagelink = "\nИсточник: https://profi-velo.ru/info/kak-sozdat-universalnuyu-formu-na-html-dlya-novickov-podrobnoe-rukovodstvo-s-posagovymi-instrukciyami";event.clipboardData.setData("text", document.getSelection() + pagelink);event.preventDefault();});</script><script type="text/javascript" id="reboot-scripts-js-extra">var settings_array = {"rating_text_average":"\u0441\u0440\u0435\u0434\u043d\u0435\u0435","rating_text_from":"\u0438\u0437","lightbox_display":"1","sidebar_fixed":"1"}; var wps_ajax = {"url":"https:\/\/profi-velo.ru\/info\/wp-admin\/admin-ajax.php","nonce":"3f7664e15d"};</script> <script>window.lazyLoadOptions = { elements_selector: "img[data-lazy-src],.rocket-lazyload,iframe[data-lazy-src]", data_src: "lazy-src", data_srcset: "lazy-srcset", data_sizes: "lazy-sizes", class_loading: "lazyloading", class_loaded: "lazyloaded", threshold: 300, callback_loaded: function(element) { if ( element.tagName === "IFRAME" && element.dataset.rocketLazyload == "fitvidscompatible" ) { if (element.classList.contains("lazyloaded") ) { if (typeof window.jQuery != "undefined") { if (jQuery.fn.fitVids) { jQuery(element).parent().fitVids(); } } } } }}; window.addEventListener('LazyLoad::Initialized', function (e) { var lazyLoadInstance = e.detail.instance; if (window.MutationObserver) { var observer = new MutationObserver(function(mutations) { var image_count = 0; var iframe_count = 0; var rocketlazy_count = 0; mutations.forEach(function(mutation) { for (i = 0; i < mutation.addedNodes.length; i++) { if (typeof mutation.addedNodes[i].getElementsByTagName !== 'function') { return; } if (typeof mutation.addedNodes[i].getElementsByClassName !== 'function') { return; } images = mutation.addedNodes[i].getElementsByTagName('img'); is_image = mutation.addedNodes[i].tagName == "IMG"; iframes = mutation.addedNodes[i].getElementsByTagName('iframe'); is_iframe = mutation.addedNodes[i].tagName == "IFRAME"; rocket_lazy = mutation.addedNodes[i].getElementsByClassName('rocket-lazyload'); image_count += images.length; iframe_count += iframes.length; rocketlazy_count += rocket_lazy.length; if(is_image){ image_count += 1; } if(is_iframe){ iframe_count += 1; } } } ); if(image_count > 0 || iframe_count > 0 || rocketlazy_count > 0){ lazyLoadInstance.update(); } } ); var b = document.getElementsByTagName("body")[0]; var config = { childList: true, subtree: true }; observer.observe(b, config); } }, false);</script><script data-no-minify="1" async src="https://profi-velo.ru/info/wp-content/plugins/rocket-lazy-load/assets/js/16.1/lazyload.min.js"></script><script>function lazyLoadThumb(e){var t='<img loading="lazy" data-lazy-src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"><noscript><img src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"></noscript>',a='<div class="play"></div>';return t.replace("ID",e)+a}function lazyLoadYoutubeIframe(){var e=document.createElement("iframe"),t="ID?autoplay=1";t+=0===this.dataset.query.length?'':'&'+this.dataset.query;e.setAttribute("src",t.replace("ID",this.dataset.src)),e.setAttribute("frameborder","0"),e.setAttribute("allowfullscreen","1"),e.setAttribute("allow", "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"),this.parentNode.replaceChild(e,this)}document.addEventListener("DOMContentLoaded",function(){var e,t,a=document.getElementsByClassName("rll-youtube-player");for(t=0;t<a.length;t++)e=document.createElement("div"),e.setAttribute("data-id",a[t].dataset.id),e.setAttribute("data-query", a[t].dataset.query),e.setAttribute("data-src", a[t].dataset.src),e.innerHTML=lazyLoadThumb(a[t].dataset.id),e.onclick=lazyLoadYoutubeIframe,a[t].appendChild(e)});</script> <script defer src="https://profi-velo.ru/info/wp-content/cache/autoptimize/js/autoptimize_8719a8fcc817f74da642350c845eb2cd.js"></script></body></html>