HTML Input в Две Строки - Как Создать Многострочное Поле Ввода

Для создания многострочного поля ввода в HTML используйте тег <textarea>. Этот элемент позволяет пользователям вводить текст в несколько строк, что удобно для форм с большими объемами текста, например, для комментариев или сообщений. Просто добавьте его в ваш HTML-код, указав необходимые атрибуты, такие как rows и cols, чтобы задать размеры поля.

Например, чтобы создать поле ввода высотой в 4 строки и шириной в 50 символов, используйте следующий код: <textarea rows=»4″ cols=»50″></textarea>. Если нужно, чтобы поле автоматически подстраивалось под ширину контейнера, используйте CSS-свойство width: 100%. Это сделает поле более гибким и адаптивным.

Для улучшения пользовательского опыта добавьте атрибут placeholder, который отображает подсказку внутри поля. Например: <textarea rows=»4″ cols=»50″ placeholder=»Введите ваш текст здесь»></textarea>. Это помогает пользователям понять, какую информацию нужно вводить.

Если требуется ограничить количество символов, используйте атрибут maxlength. Например, <textarea rows=»4″ cols=»50″ maxlength=»500″></textarea> ограничит ввод до 500 символов. Это полезно для контроля длины текста и предотвращения переполнения.

С помощью CSS вы можете стилизовать <textarea>, чтобы оно соответствовало дизайну вашего сайта. Например, измените цвет фона, шрифт или границы. Используйте свойства background-color, font-family и border для настройки внешнего вида.

Создание многострочного поля ввода с помощью тега

Используйте тег <textarea> для создания многострочного поля ввода. Этот тег позволяет пользователю вводить текст в несколько строк, что удобно для длинных сообщений или комментариев. Просто добавьте его в HTML-код и укажите атрибуты rows и cols, чтобы задать размеры поля.

Пример: <textarea rows="4" cols="50"></textarea>. Здесь поле будет иметь 4 строки и ширину в 50 символов. Если нужно задать начальный текст, поместите его между открывающим и закрывающим тегами.

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

Если требуется ограничить количество вводимых символов, добавьте атрибуты maxlength или используйте JavaScript для динамической проверки. Это поможет избежать переполнения и упростит обработку данных.

Тег <textarea> поддерживает атрибут placeholder, который отображает подсказку внутри поля. Например, <textarea placeholder="Введите ваш текст здесь"></textarea>. Это улучшает пользовательский опыт, делая интерфейс интуитивно понятным.

Что такое тег и как он работает?</h3> <p>Тег <textarea> создает многострочное поле ввода текста на веб-странице. Он позволяет пользователям вводить несколько строк текста, что удобно для форм с длинными сообщениями, комментариями или описаниями.</p> <p>Чтобы добавить <textarea> в HTML, используйте следующий синтаксис:</p> <pre><code><textarea rows="4" cols="50">Введите текст здесь</textarea></code></pre> <p>Атрибуты <code>rows</code> и <code>cols</code> задают высоту и ширину поля:</p> <ul> <li><code>rows</code> – количество видимых строк.</li> <li><code>cols</code> – ширина поля в символах.</li> </ul> <p>Вы также можете добавить атрибуты для улучшения функциональности:</p> <ul> <li><code>placeholder</code> – текст-подсказка, который исчезает при вводе.</li> <li><code>maxlength</code> – ограничивает количество символов.</li> <li><code>readonly</code> – делает поле только для чтения.</li> </ul> <p>Пример с использованием дополнительных атрибутов:</p> <pre><code><textarea rows="5" cols="40" placeholder="Напишите сообщение" maxlength="200"></textarea></code></pre> <p>Для стилизации <textarea> используйте CSS. Например, можно изменить шрифт, цвет границы или добавить тень:</p> <pre><code>textarea { font-family: Arial, sans-serif; border: 1px solid #ccc; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); }</code></pre> <p>Тег <textarea> поддерживает все современные браузеры и легко интегрируется с JavaScript для динамической обработки введенных данных.</p> <h3>Настройка размеров поля ввода</h3> <p>Для изменения ширины и высоты текстового поля используйте атрибуты <code>cols</code> и <code>rows</code> в теге <code><textarea></code>. Например, чтобы создать поле шириной 40 символов и высотой 5 строк, добавьте следующий код:</p> <pre><code><textarea cols="40" rows="5"></textarea></code></pre> <p>Если требуется гибкость в управлении размерами, применяйте CSS. Укажите ширину и высоту через свойства <code>width</code> и <code>height</code>:</p> <pre><code><textarea style="width: 300px; height: 150px;"></textarea></code></pre> <p>Для адаптивного дизайна используйте относительные единицы измерения, например, проценты или <code>vw</code>/<code>vh</code>:</p> <pre><code><textarea style="width: 100%; height: 20vh;"></textarea></code></pre> <p>Чтобы предотвратить изменение размеров пользователем, добавьте свойство <code>resize: none;</code>:</p> <pre><code><textarea style="resize: none;"></textarea></code></pre> <p>Для более точного контроля над отступами внутри поля ввода используйте свойства <code>padding</code> и <code>margin</code>:</p> <pre><code><textarea style="padding: 10px; margin: 5px;"></textarea></code></pre> <p>Эти методы помогут вам создать удобное и функциональное многострочное поле ввода, которое соответствует требованиям вашего проекта.</p> <h3>Добавление атрибутов для улучшения пользовательского опыта</h3> <p>Используйте атрибут <strong>placeholder</strong>, чтобы подсказать пользователю, какую информацию вводить. Например, <em>«Введите ваш комментарий здесь»</em> помогает избежать путаницы.</p> <p>Добавьте <strong>maxlength</strong>, чтобы ограничить количество символов. Это предотвращает переполнение текстового поля и упрощает обработку данных.</p> <p>Примените атрибут <strong>required</strong>, если поле обязательно для заполнения. Это гарантирует, что пользователь не пропустит важные данные.</p> <p>Используйте <strong>autofocus</strong>, чтобы курсор автоматически устанавливался в поле при загрузке страницы. Это экономит время и делает взаимодействие удобнее.</p> <p>Добавьте <strong>spellcheck</strong> для проверки орфографии. Это особенно полезно в многострочных полях, где ошибки встречаются чаще.</p> <p>Примените атрибут <strong>rows</strong> для управления высотой поля. Установите значение, например, <em>rows=»5″</em>, чтобы сразу показать достаточно места для ввода.</p> <p>Используйте <strong>wrap=»soft»</strong> или <strong>wrap=»hard»</strong>, чтобы контролировать перенос текста. Это помогает сохранить форматирование при отправке данных.</p> <p>Добавьте <strong>aria-label</strong> или <strong>aria-describedby</strong> для улучшения доступности. Это помогает пользователям с ограниченными возможностями понять назначение поля.</p> <h2>Стилизация многострочного поля ввода с помощью CSS</h2> <p>Используйте свойство <code>resize</code>, чтобы управлять возможностью изменения размера текстового поля. Например, <code>resize: vertical;</code> позволяет изменять высоту, а <code>resize: none;</code> полностью отключает эту функцию.</p> <p>Добавьте отступы внутри поля с помощью <code>padding</code>. Это улучшит читаемость текста. Например, <code>padding: 10px;</code> создаст комфортное расстояние между текстом и границами.</p> <p>Измените цвет фона и текста с помощью <code>background-color</code> и <code>color</code>. Для примера, <code>background-color: #f9f9f9;</code> и <code>color: #333;</code> создадут мягкий контраст.</p> <p>Добавьте границы с помощью <code>border</code>. Например, <code>border: 1px solid #ccc;</code> создаст тонкую линию вокруг поля. Для закругленных углов используйте <code>border-radius</code>, например, <code>border-radius: 5px;</code>.</p> <p>Используйте <code>box-shadow</code>, чтобы добавить тень. Например, <code>box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);</code> создаст легкий эффект объема.</p> <p>Настройте шрифт с помощью <code>font-family</code> и <code>font-size</code>. Например, <code>font-family: Arial, sans-serif;</code> и <code>font-size: 14px;</code> сделают текст более читаемым.</p> <p>Пример стилей для многострочного поля ввода:</p> <table> <tr> <th>Свойство</th> <th>Значение</th> </tr> <tr> <td><code>resize</code></td> <td><code>vertical</code></td> </tr> <tr> <td><code>padding</code></td> <td><code>10px</code></td> </tr> <tr> <td><code>background-color</code></td> <td><code>#f9f9f9</code></td> </tr> <tr> <td><code>border</code></td> <td><code>1px solid #ccc</code></td> </tr> <tr> <td><code>border-radius</code></td> <td><code>5px</code></td> </tr> <tr> <td><code>box-shadow</code></td> <td><code>0 2px 5px rgba(0, 0, 0, 0.1)</code></td> </tr> <tr> <td><code>font-family</code></td> <td><code>Arial, sans-serif</code></td> </tr> <tr> <td><code>font-size</code></td> <td><code>14px</code></td> </tr> </table> <p>Эти стили сделают поле ввода визуально привлекательным и удобным для пользователя.</p> <h3>Изменение внешнего вида поля ввода</h3> <p>Используйте CSS, чтобы настроить внешний вид многострочного поля ввода. Например, задайте ширину и высоту с помощью свойств <code>width</code> и <code>height</code>. Добавьте отступы внутри поля с помощью <code>padding</code>, чтобы текст не прижимался к краям. Примените <code>border-radius</code> для скругления углов, а <code>border</code> – для изменения рамки.</p> <p>Измените цвет фона с помощью <code>background-color</code>, чтобы поле выделялось на странице. Используйте <code>font-family</code> и <code>font-size</code>, чтобы настроить шрифт и его размер. Добавьте тень с помощью <code>box-shadow</code>, чтобы поле выглядело объемным.</p> <p>Для улучшения взаимодействия пользователя, измените стиль поля при фокусе с помощью псевдокласса <code>:focus</code>. Например, добавьте другой цвет рамки или увеличьте тень. Если нужно сделать поле более заметным при ошибке, используйте <code>:invalid</code> для изменения его стиля.</p> <p>Пример кода:</p> <pre><code>textarea { width: 100%; height: 150px; padding: 10px; border: 2px solid #ccc; border-radius: 8px; background-color: #f9f9f9; font-family: Arial, sans-serif; font-size: 16px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } textarea:focus { border-color: #007bff; box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3); } textarea:invalid { border-color: #ff0000; }</code></pre> <p>Эти простые изменения сделают поле ввода более удобным и привлекательным для пользователей.</p> <h3>Добавление отступов и границ</h3> <p>Чтобы сделать многострочное поле ввода более удобным для восприятия, добавьте отступы внутри текстовой области. Используйте свойство <code>padding</code> в CSS. Например, <code>padding: 10px;</code> создаст равномерные отступы по всем сторонам текста.</p> <p>Границы помогут выделить поле ввода на странице. Примените свойство <code>border</code> с указанием толщины, стиля и цвета. Например, <code>border: 1px solid #ccc;</code> добавит тонкую серую рамку. Для более мягкого вида используйте закругленные углы с помощью <code>border-radius: 5px;</code>.</p> <p>Если нужно изменить внешний вид границы при фокусе на поле, используйте псевдокласс <code>:focus</code>. Например, <code>textarea:focus { border-color: #007bff; }</code> сделает рамку синей, когда пользователь начнет ввод.</p> <p>Для улучшения читаемости текста внутри поля добавьте небольшой отступ между строками с помощью <code>line-height</code>. Значение <code>line-height: 1.5;</code> обеспечит достаточное пространство между строками.</p> <p>Если поле ввода должно выглядеть более компактно, уменьшите внутренние отступы и толщину границы. Например, <code>padding: 5px; border: 1px solid #ddd;</code> создаст аккуратное и минималистичное поле.</p> <h3>Использование псевдоклассов для интерактивности</h3> <p>Добавьте <strong>:focus</strong> к стилям текстового поля, чтобы выделить его при активации. Например, задайте <em>border-color: #007BFF;</em> и <em>box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);</em>. Это улучшит визуальную обратную связь для пользователя.</p> <p>Используйте <strong>:hover</strong>, чтобы сделать поле более привлекательным при наведении курсора. Добавьте плавный переход с помощью <em>transition: border-color 0.3s ease;</em>, чтобы изменения выглядели естественно.</p> <p>Для полей с ошибками примените <strong>:invalid</strong>. Например, установите <em>border-color: #dc3545;</em> и добавьте иконку или текст с подсказкой, чтобы пользователь сразу понял, что нужно исправить.</p> <p>Если поле заполнено корректно, используйте <strong>:valid</strong>. Задайте <em>border-color: #28a745;</em>, чтобы показать успешное завершение ввода. Это особенно полезно в формах с несколькими шагами.</p> <p>С помощью <strong>:placeholder-shown</strong> можно изменить стиль поля, когда подсказка видна. Например, уменьшите размер шрифта или измените цвет текста, чтобы выделить активное состояние.</p> <p>Комбинируйте псевдоклассы для более сложных эффектов. Например, используйте <em>:focus:hover</em>, чтобы добавить уникальный стиль при наведении на активное поле. Это сделает интерфейс более динамичным и удобным.</p> </p> </div> </article> <div class="entry-footer"> </div> <div class="b-share b-share--post"> <div class="b-sharetitle">Понравилась статья? Поделить с друзьями:</div> <span class="b-shareico b-sharevk js-share-link" data-uri="http://vk.com/share.php?url=https%3A%2F%2Fxn----7sbbh7akdldfh0ai3n.xn--p1ai%2F%25d1%2581%25d0%25be%25d0%25b7%25d0%25b4%25d0%25b0%25d0%25bd%25d0%25b8%25d0%25b5-%25d0%25bc%25d0%25bd%25d0%25be%25d0%25b3%25d0%25be%25d1%2581%25d1%2582%25d1%2580%25d0%25be%25d1%2587%25d0%25bd%25d0%25be%25d0%25b3%25d0%25be-%25d0%25bf%25d0%25be%25d0%25bb%25d1%258f-%25d0%25b2%25d0%25b2%25d0%25be%25d0%25b4%25d0%25b0-html%2F"></span> <span class="b-shareico b-sharefb js-share-link" data-uri="http://www.facebook.com/sharer.php?u=https%3A%2F%2Fxn----7sbbh7akdldfh0ai3n.xn--p1ai%2F%25d1%2581%25d0%25be%25d0%25b7%25d0%25b4%25d0%25b0%25d0%25bd%25d0%25b8%25d0%25b5-%25d0%25bc%25d0%25bd%25d0%25be%25d0%25b3%25d0%25be%25d1%2581%25d1%2582%25d1%2580%25d0%25be%25d1%2587%25d0%25bd%25d0%25be%25d0%25b3%25d0%25be-%25d0%25bf%25d0%25be%25d0%25bb%25d1%258f-%25d0%25b2%25d0%25b2%25d0%25be%25d0%25b4%25d0%25b0-html%2F"></span> <span class="b-shareico b-sharetw js-share-link" data-uri="http://twitter.com/share?text=%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5+%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE%D1%81%D1%82%D1%80%D0%BE%D1%87%D0%BD%D0%BE%D0%B3%D0%BE+%D0%BF%D0%BE%D0%BB%D1%8F+%D0%B2%D0%B2%D0%BE%D0%B4%D0%B0+HTML+%D0%B2+%D0%B4%D0%B2%D0%B5+%D1%81%D1%82%D1%80%D0%BE%D0%BA%D0%B8&url=https%3A%2F%2Fxn----7sbbh7akdldfh0ai3n.xn--p1ai%2F%25d1%2581%25d0%25be%25d0%25b7%25d0%25b4%25d0%25b0%25d0%25bd%25d0%25b8%25d0%25b5-%25d0%25bc%25d0%25bd%25d0%25be%25d0%25b3%25d0%25be%25d1%2581%25d1%2582%25d1%2580%25d0%25be%25d1%2587%25d0%25bd%25d0%25be%25d0%25b3%25d0%25be-%25d0%25bf%25d0%25be%25d0%25bb%25d1%258f-%25d0%25b2%25d0%25b2%25d0%25be%25d0%25b4%25d0%25b0-html%2F"></span> <span class="b-shareico b-shareok js-share-link" data-uri="https://connect.ok.ru/dk?st.cmd=WidgetSharePreview&service=odnoklassniki&st.shareUrl=https%3A%2F%2Fxn----7sbbh7akdldfh0ai3n.xn--p1ai%2F%25d1%2581%25d0%25be%25d0%25b7%25d0%25b4%25d0%25b0%25d0%25bd%25d0%25b8%25d0%25b5-%25d0%25bc%25d0%25bd%25d0%25be%25d0%25b3%25d0%25be%25d1%2581%25d1%2582%25d1%2580%25d0%25be%25d1%2587%25d0%25bd%25d0%25be%25d0%25b3%25d0%25be-%25d0%25bf%25d0%25be%25d0%25bb%25d1%258f-%25d0%25b2%25d0%25b2%25d0%25be%25d0%25b4%25d0%25b0-html%2F"></span> <span class="b-shareico b-sharegp js-share-link" data-uri="https://plus.google.com/share?url=https%3A%2F%2Fxn----7sbbh7akdldfh0ai3n.xn--p1ai%2F%25d1%2581%25d0%25be%25d0%25b7%25d0%25b4%25d0%25b0%25d0%25bd%25d0%25b8%25d0%25b5-%25d0%25bc%25d0%25bd%25d0%25be%25d0%25b3%25d0%25be%25d1%2581%25d1%2582%25d1%2580%25d0%25be%25d1%2587%25d0%25bd%25d0%25be%25d0%25b3%25d0%25be-%25d0%25bf%25d0%25be%25d0%25bb%25d1%258f-%25d0%25b2%25d0%25b2%25d0%25be%25d0%25b4%25d0%25b0-html%2F"></span> <span class="b-shareico b-sharewhatsapp js-share-link js-share-link-no-window" data-uri="whatsapp://send?text=%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5+%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE%D1%81%D1%82%D1%80%D0%BE%D1%87%D0%BD%D0%BE%D0%B3%D0%BE+%D0%BF%D0%BE%D0%BB%D1%8F+%D0%B2%D0%B2%D0%BE%D0%B4%D0%B0+HTML+%D0%B2+%D0%B4%D0%B2%D0%B5+%D1%81%D1%82%D1%80%D0%BE%D0%BA%D0%B8%20https%3A%2F%2Fxn----7sbbh7akdldfh0ai3n.xn--p1ai%2F%25d1%2581%25d0%25be%25d0%25b7%25d0%25b4%25d0%25b0%25d0%25bd%25d0%25b8%25d0%25b5-%25d0%25bc%25d0%25bd%25d0%25be%25d0%25b3%25d0%25be%25d1%2581%25d1%2582%25d1%2580%25d0%25be%25d1%2587%25d0%25bd%25d0%25be%25d0%25b3%25d0%25be-%25d0%25bf%25d0%25be%25d0%25bb%25d1%258f-%25d0%25b2%25d0%25b2%25d0%25be%25d0%25b4%25d0%25b0-html%2F"></span> <span class="b-shareico b-shareviber js-share-link js-share-link-no-window" data-uri="viber://forward?text=%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5+%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE%D1%81%D1%82%D1%80%D0%BE%D1%87%D0%BD%D0%BE%D0%B3%D0%BE+%D0%BF%D0%BE%D0%BB%D1%8F+%D0%B2%D0%B2%D0%BE%D0%B4%D0%B0+HTML+%D0%B2+%D0%B4%D0%B2%D0%B5+%D1%81%D1%82%D1%80%D0%BE%D0%BA%D0%B8%20https%3A%2F%2Fxn----7sbbh7akdldfh0ai3n.xn--p1ai%2F%25d1%2581%25d0%25be%25d0%25b7%25d0%25b4%25d0%25b0%25d0%25bd%25d0%25b8%25d0%25b5-%25d0%25bc%25d0%25bd%25d0%25be%25d0%25b3%25d0%25be%25d1%2581%25d1%2582%25d1%2580%25d0%25be%25d1%2587%25d0%25bd%25d0%25be%25d0%25b3%25d0%25be-%25d0%25bf%25d0%25be%25d0%25bb%25d1%258f-%25d0%25b2%25d0%25b2%25d0%25be%25d0%25b4%25d0%25b0-html%2F"></span> <span class="b-shareico b-share__telegram js-share-link js-share-link-no-window" data-uri="https://telegram.me/share/url?url=https%3A%2F%2Fxn----7sbbh7akdldfh0ai3n.xn--p1ai%2F%25d1%2581%25d0%25be%25d0%25b7%25d0%25b4%25d0%25b0%25d0%25bd%25d0%25b8%25d0%25b5-%25d0%25bc%25d0%25bd%25d0%25be%25d0%25b3%25d0%25be%25d1%2581%25d1%2582%25d1%2580%25d0%25be%25d1%2587%25d0%25bd%25d0%25be%25d0%25b3%25d0%25be-%25d0%25bf%25d0%25be%25d0%25bb%25d1%258f-%25d0%25b2%25d0%25b2%25d0%25be%25d0%25b4%25d0%25b0-html%2F&text=%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5+%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE%D1%81%D1%82%D1%80%D0%BE%D1%87%D0%BD%D0%BE%D0%B3%D0%BE+%D0%BF%D0%BE%D0%BB%D1%8F+%D0%B2%D0%B2%D0%BE%D0%B4%D0%B0+HTML+%D0%B2+%D0%B4%D0%B2%D0%B5+%D1%81%D1%82%D1%80%D0%BE%D0%BA%D0%B8"></span> </div> <meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="https://xn----7sbbh7akdldfh0ai3n.xn--p1ai/%d1%81%d0%be%d0%b7%d0%b4%d0%b0%d0%bd%d0%b8%d0%b5-%d0%bc%d0%bd%d0%be%d0%b3%d0%be%d1%81%d1%82%d1%80%d0%be%d1%87%d0%bd%d0%be%d0%b3%d0%be-%d0%bf%d0%be%d0%bb%d1%8f-%d0%b2%d0%b2%d0%be%d0%b4%d0%b0-html/"/> <meta itemprop="dateModified" content="2024-10-24"/> <meta itemprop="datePublished" content="2024-10-24T08:59:29+03:00"/> <div class="wpdiscuz_top_clearing"></div> <div id='comments' class='comments-area'><div id='respond' style='width: 0;height: 0;clear: both;margin: 0;padding: 0;'></div><div id='wpd-post-rating' class='wpd-not-rated'> <div class='wpd-rating-wrap'> <div class='wpd-rating-left'></div> <div class='wpd-rating-data'> <div class='wpd-rating-value'> <span class='wpdrv'>0</span> <span class='wpdrc'>0</span> <span class='wpdrt'>голоса</span></div> <div class='wpd-rating-title'>Рейтинг статьи</div> <div class='wpd-rating-stars'><svg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M0 0h24v24H0z' fill='none'/><path class='wpd-star' d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/><path d='M0 0h24v24H0z' fill='none'/></svg><svg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M0 0h24v24H0z' fill='none'/><path class='wpd-star' d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/><path d='M0 0h24v24H0z' fill='none'/></svg><svg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M0 0h24v24H0z' fill='none'/><path class='wpd-star' d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/><path d='M0 0h24v24H0z' fill='none'/></svg><svg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M0 0h24v24H0z' fill='none'/><path class='wpd-star' d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/><path d='M0 0h24v24H0z' fill='none'/></svg><svg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M0 0h24v24H0z' fill='none'/><path class='wpd-star' d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/><path d='M0 0h24v24H0z' fill='none'/></svg></div><div class='wpd-rate-starts'><svg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M0 0h24v24H0z' fill='none'/><path class='wpd-star' d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/><path d='M0 0h24v24H0z' fill='none'/></svg><svg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M0 0h24v24H0z' fill='none'/><path class='wpd-star' d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/><path d='M0 0h24v24H0z' fill='none'/></svg><svg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M0 0h24v24H0z' fill='none'/><path class='wpd-star' d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/><path d='M0 0h24v24H0z' fill='none'/></svg><svg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M0 0h24v24H0z' fill='none'/><path class='wpd-star' d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/><path d='M0 0h24v24H0z' fill='none'/></svg><svg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M0 0h24v24H0z' fill='none'/><path class='wpd-star' d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/><path d='M0 0h24v24H0z' fill='none'/></svg></div></div> <div class='wpd-rating-right'></div></div></div> <div id="wpdcom" class="wpdiscuz_unauth wpd-default wpd-layout-1 wpd-comments-open"> <div class="wc_social_plugin_wrapper"> </div> <div class="wpd-form-wrap"> <div class="wpd-form-head"> <div class="wpd-sbs-toggle"> <i class="far fa-envelope"></i> <span class="wpd-sbs-title">Подписаться</span> <i class="fas fa-caret-down"></i> </div> <div class="wpd-auth"> <div class="wpd-login"> <a rel="nofollow" href="https://xn----7sbbh7akdldfh0ai3n.xn--p1ai/wp-login.php?redirect_to=https%3A%2F%2Fxn----7sbbh7akdldfh0ai3n.xn--p1ai%2F%25d1%2581%25d0%25be%25d0%25b7%25d0%25b4%25d0%25b0%25d0%25bd%25d0%25b8%25d0%25b5-%25d0%25bc%25d0%25bd%25d0%25be%25d0%25b3%25d0%25be%25d1%2581%25d1%2582%25d1%2580%25d0%25be%25d1%2587%25d0%25bd%25d0%25be%25d0%25b3%25d0%25be-%25d0%25bf%25d0%25be%25d0%25bb%25d1%258f-%25d0%25b2%25d0%25b2%25d0%25be%25d0%25b4%25d0%25b0-html%2F"><i class='fas fa-sign-in-alt'></i> авторизуйтесь</a> </div> </div> </div> <div class="wpdiscuz-subscribe-bar wpdiscuz-hidden"> <form action="https://xn----7sbbh7akdldfh0ai3n.xn--p1ai/wp-admin/admin-ajax.php?action=wpdAddSubscription" method="post" id="wpdiscuz-subscribe-form"> <div class="wpdiscuz-subscribe-form-intro">Уведомить о </div> <div class="wpdiscuz-subscribe-form-option" style="width:40%;"> <select class="wpdiscuz_select" name="wpdiscuzSubscriptionType"> <option value="post">новых последующих комментариях</option> <option value="all_comment" >новых ответах на мои комментарии</option> </select> </div> <div class="wpdiscuz-item wpdiscuz-subscribe-form-email"> <input class="email" type="email" name="wpdiscuzSubscriptionEmail" required="required" value="" placeholder="Email"/> </div> <div class="wpdiscuz-subscribe-form-button"> <input id="wpdiscuz_subscription_button" class="wpd-prim-button wpd_not_clicked" type="submit" value="›" name="wpdiscuz_subscription_button"/> </div> <input type="hidden" id="wpdiscuz_subscribe_form_nonce" name="wpdiscuz_subscribe_form_nonce" value="2f0e046d77" /><input type="hidden" name="_wp_http_referer" value="/%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5-%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE%D1%81%D1%82%D1%80%D0%BE%D1%87%D0%BD%D0%BE%D0%B3%D0%BE-%D0%BF%D0%BE%D0%BB%D1%8F-%D0%B2%D0%B2%D0%BE%D0%B4%D0%B0-html/" /> </form> </div> <div class="wpd-form wpd-form-wrapper wpd-main-form-wrapper" id='wpd-main-form-wrapper-0_0'> <form method="post" enctype="multipart/form-data" data-uploading="false" class="wpd_comm_form wpd_main_comm_form" > <div class="wpd-field-comment"> <div class="wpdiscuz-item wc-field-textarea"> <div class="wpdiscuz-textarea-wrap "> <div class="wpd-avatar"> <img alt='guest' src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2056%2056'%3E%3C/svg%3E" data-lazy-srcset='https://secure.gravatar.com/avatar/3796328df2935bc7b23477c17cdaf08e0cff8c0e1d7da213409166b12ceb65bc?s=112&d=mm&r=g 2x' class='avatar avatar-56 photo' height='56' width='56' decoding='async' data-lazy-src="https://secure.gravatar.com/avatar/3796328df2935bc7b23477c17cdaf08e0cff8c0e1d7da213409166b12ceb65bc?s=56&d=mm&r=g"/><noscript><img alt='guest' src='https://secure.gravatar.com/avatar/3796328df2935bc7b23477c17cdaf08e0cff8c0e1d7da213409166b12ceb65bc?s=56&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/3796328df2935bc7b23477c17cdaf08e0cff8c0e1d7da213409166b12ceb65bc?s=112&d=mm&r=g 2x' class='avatar avatar-56 photo' height='56' width='56' decoding='async'/></noscript> </div> <div id="wpd-editor-wraper-0_0" style="display: none;"> <div id="wpd-editor-char-counter-0_0" class="wpd-editor-char-counter"></div> <label style="display: none;" for="wc-textarea-0_0">Label</label> <textarea id="wc-textarea-0_0" name="wc_comment" class="wc_comment wpd-field">