Как добавить текст в textarea HTML Руководство для новичков

Чтобы добавить текст в элемент <textarea>, используйте его открывающий и закрывающий теги. Например, если вы хотите вставить текст «Привет, мир!», напишите: <textarea>Привет, мир!</textarea>. Это самый простой способ, который работает в любом браузере.

Если вам нужно динамически изменить содержимое <textarea>, используйте JavaScript. Например, чтобы вставить текст после загрузки страницы, добавьте следующий код: document.getElementById(‘myTextarea’).value = ‘Новый текст’;. Убедитесь, что у вашего элемента есть атрибут id, например: <textarea id=»myTextarea»></textarea>.

Для более сложных сценариев, таких как вставка текста в определенное место, используйте методы JavaScript, например selectionStart и selectionEnd. Это позволяет управлять положением курсора и вставлять текст в нужную позицию.

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

Основы работы с тегом

Чтобы вставить текст в элемент <textarea>, используйте атрибут value или поместите текст между открывающим и закрывающим тегами. Например:

<textarea>Ваш текст здесь</textarea>

Для динамического добавления текста через JavaScript, обратитесь к элементу и установите его значение:

document.querySelector('textarea').value = 'Новый текст';

Учитывайте следующие особенности:

• Атрибуты rows и cols задают размеры текстового поля. Например, <textarea rows="4" cols="50"></textarea> создаст поле высотой в 4 строки и шириной в 50 символов.
• Используйте атрибут placeholder, чтобы добавить подсказку внутри поля: <textarea placeholder="Введите сообщение"></textarea>.
• Для отключения возможности редактирования добавьте атрибут disabled: <textarea disabled>Текст недоступен для редактирования</textarea>.

Если нужно ограничить количество символов, используйте атрибут maxlength:

<textarea maxlength="100"></textarea>

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

textarea {
font-family: Arial, sans-serif;
border: 2px solid #ccc;
}

Эти рекомендации помогут быстро освоить работу с <textarea> и эффективно использовать его в ваших проектах.

Что такое и зачем он нужен?</h3> <p>Используйте <textarea>, когда нужно собрать от пользователя большой объём текста, например, комментарии, сообщения или описания. Элемент поддерживает атрибуты <em>rows</em> и <em>cols</em>, которые задают количество строк и столбцов в поле. Если размеры не указаны, браузер использует значения по умолчанию.</p> <p>Чтобы добавить текст по умолчанию, поместите его между открывающим и закрывающим тегами <textarea>. Например: <code><textarea>Введите ваш текст здесь. Этот текст будет отображаться в поле до того, как пользователь начнёт ввод.

Для улучшения функциональности добавьте атрибуты placeholder для подсказки или maxlength для ограничения количества символов. Например: .

С помощью CSS вы можете стилизовать , изменяя размеры, шрифты, цвета и границы. Это делает элемент более удобным и визуально привлекательным для пользователей.</p> <p>Используйте <textarea> в формах, где требуется сбор текстовой информации. Он прост в использовании и поддерживается всеми современными браузерами, что делает его универсальным инструментом для веб-разработки.</p> <h3>Синтаксис и атрибуты тега</h3> <p>Для вставки текстового поля на страницу используйте тег <code><textarea></code>. Он создает область, в которую пользователь может вводить многострочный текст. Базовый синтаксис выглядит так:</p> <pre><code><textarea>Текст по умолчанию</textarea></code></pre> <p>Основные атрибуты, которые помогут настроить текстовое поле:</p> <ul> <li><strong>name</strong> – задает имя поля для отправки данных на сервер. Например: <code>name="comment"</code>.</li> <li><strong>rows</strong> – определяет количество видимых строк. Например: <code>rows="5"</code>.</li> <li><strong>cols</strong> – задает ширину поля в символах. Например: <code>cols="30"</code>.</li> <li><strong>placeholder</strong> – добавляет подсказку внутри поля. Например: <code>placeholder="Введите ваш текст"</code>.</li> <li><strong>readonly</strong> – делает поле доступным только для чтения. Например: <code>readonly</code>.</li> <li><strong>disabled</strong> – отключает поле, блокируя ввод. Например: <code>disabled</code>.</li> </ul> <p>Пример использования атрибутов:</p> <pre><code><textarea name="message" rows="4" cols="50" placeholder="Напишите сообщение"></textarea></code></pre> <p>Чтобы задать начальный текст, поместите его между открывающим и закрывающим тегом. Например:</p> <pre><code><textarea>Это текст по умолчанию.</textarea></code></pre> <p>Используйте атрибуты <code>minlength</code> и <code>maxlength</code>, чтобы ограничить количество символов:</p> <pre><code><textarea minlength="10" maxlength="200"></textarea></code></pre> <p>Для автоматического изменения размера поля добавьте стиль <code>resize: none;</code> в CSS, если нужно запретить пользователю изменять размеры вручную.</p> <h3>Пример стандартного использования тега</h3> <p>Для вставки текста в <strong>textarea</strong>, добавьте тег <strong><textarea></strong> в HTML-код и поместите нужный текст между открывающим и закрывающим тегами. Например:</p> <pre> <textarea>Введите ваш текст здесь...</textarea> </pre> <p>Этот код создаст поле для ввода текста с предзаполненным значением <em>«Введите ваш текст здесь…»</em>. Пользователь сможет редактировать этот текст или вводить новый.</p> <p>Чтобы задать размеры поля, используйте атрибуты <strong>rows</strong> и <strong>cols</strong>. Например:</p> <pre> <textarea rows="4" cols="50">Это поле имеет 4 строки и 50 символов в ширину.</textarea> </pre> <p>Если нужно ограничить ввод символов, добавьте атрибут <strong>maxlength</strong>. Например, для ограничения в 100 символов:</p> <pre> <textarea maxlength="100">Максимум 100 символов.</textarea> </pre> <p>Для автоматического фокуса на поле при загрузке страницы используйте атрибут <strong>autofocus</strong>:</p> <pre> <textarea autofocus>Это поле будет выделено сразу после загрузки страницы.</textarea> </pre> <p>Эти примеры помогут быстро и удобно настроить <strong>textarea</strong> для ваших задач.</p> <h2>Методы вставки текста в</h2> <p>Для вставки текста в <strong>textarea</strong> используйте атрибут <strong>value</strong> в HTML. Например: <code><textarea>Ваш текст здесь</textarea></code>. Это простой способ задать начальное содержимое поля.</p> <p>Через JavaScript добавьте текст с помощью свойства <strong>value</strong>. Пример: <code>document.getElementById('myTextarea').value = 'Новый текст';</code>. Этот метод удобен для динамического изменения содержимого.</p> <p>Если нужно добавить текст к существующему содержимому, используйте конкатенацию: <code>document.getElementById('myTextarea').value += ' дополнительный текст';</code>. Это сохранит текущий текст и допишет новый.</p> <p>Для вставки текста при клике на кнопку, создайте функцию:</p> <p><code><br /> function insertText() {<br /> document.getElementById('myTextarea').value = 'Текст после клика';<br /> }<br /> </code></p> <p>и свяжите её с кнопкой через атрибут <strong>onclick</strong>.</p> <p>Используйте библиотеку jQuery для упрощения кода: <code>$('#myTextarea').val('Текст через jQuery');</code>. Это подходит для проектов, где уже используется jQuery.</p> <p>Для работы с многострочным текстом учитывайте символы переноса строки. Например: <code>document.getElementById('myTextarea').value = 'Первая строка<br /> Вторая строка';</code>. Это обеспечит корректное отображение.</p> <p>Если текст содержит HTML-теги, экранируйте их, чтобы избежать ошибок. Используйте метод <strong>innerText</strong> вместо <strong>innerHTML</strong> для безопасной вставки.</p> <h3>Вставка текста с использованием атрибута value</h3> <p>Для добавления текста в <code><textarea></code> используйте атрибут <code>value</code>. Этот атрибут позволяет задать начальное значение текстового поля, которое будет отображаться при загрузке страницы. Например:</p> <pre><code><textarea value="Этот текст появится в поле."></textarea></code></pre> <p>Однако, важно помнить, что атрибут <code>value</code> не является стандартным для <code><textarea></code>. Вместо него рекомендуется помещать текст непосредственно между открывающим и закрывающим тегами:</p> <pre><code><textarea>Этот текст появится в поле.</textarea></code></pre> <p>Если вам нужно динамически изменить текст в <code><textarea></code>, используйте JavaScript. Например:</p> <pre><code>document.querySelector('textarea').value = 'Новый текст';</code></pre> <p>Этот подход позволяет легко управлять содержимым текстового поля без необходимости перезагрузки страницы.</p> <h3>Динамическое изменение текста с помощью JavaScript</h3> <p>Чтобы изменить текст в <code>textarea</code> динамически, используйте свойство <code>value</code>. Например, если у вас есть элемент с идентификатором <code>myTextarea</code>, вы можете задать новый текст следующим образом:</p> <pre><code>document.getElementById('myTextarea').value = 'Новый текст';</code></pre> <p>Если нужно добавить текст к существующему содержимому, используйте оператор <code>+=</code>:</p> <pre><code>document.getElementById('myTextarea').value += ' Дополнительный текст';</code></pre> <p>Для работы с событиями, такими как клик по кнопке, добавьте обработчик. Вот пример, который изменяет текст при нажатии на кнопку:</p> <pre><code><button onclick="updateTextarea()">Изменить текст</button> <textarea id="myTextarea"></textarea> <script> function updateTextarea() { document.getElementById('myTextarea').value = 'Текст изменен!'; } </script></code></pre> <p>Если требуется очистить содержимое <code>textarea</code>, просто присвойте свойству <code>value</code> пустую строку:</p> <pre><code>document.getElementById('myTextarea').value = '';</code></pre> <p>Для более сложных сценариев, например, изменения текста на основе ввода пользователя, используйте событие <code>input</code>:</p> <pre><code><input type="text" id="inputField" oninput="updateTextarea()"> <textarea id="myTextarea"></textarea> <script> function updateTextarea() { const inputValue = document.getElementById('inputField').value; document.getElementById('myTextarea').value = inputValue; } </script></code></pre> <p>Эти методы помогут вам легко управлять содержимым <code>textarea</code> с помощью JavaScript, делая ваши веб-страницы более интерактивными.</p> <h3>Использование форм для предварительного заполнения</h3> <p>Для предварительного заполнения текста в <strong>textarea</strong>, используйте атрибут <strong>value</strong> в HTML. Например: <code><textarea>Этот текст уже здесь</textarea></code>. Это полезно, если вы хотите показать пользователю пример или сохранить введенные данные после отправки формы.</p> <p>Если данные динамические, передайте их через JavaScript. Например, задайте содержимое с помощью свойства <strong>value</strong>:</p> <p><code>document.getElementById('myTextarea').value = 'Ваш текст';</code></p> <p>Для работы с формами, используйте тег <strong>form</strong>. Добавьте <strong>textarea</strong> внутрь формы, чтобы данные можно было отправить на сервер. Пример:</p> <p><code><br /> <form action="/submit" method="post"><br /> <textarea name="message">Пример текста</textarea><br /> <button type="submit">Отправить</button><br /> </form><br /> </code></p> <p>Если нужно сохранить данные после перезагрузки страницы, используйте локальное хранилище браузера. Например, сохраните текст в <strong>localStorage</strong> и восстановите его при загрузке страницы:</p> <p><code><br /> document.getElementById('myTextarea').addEventListener('input', function() {<br /> localStorage.setItem('savedText', this.value);<br /> });<br /> document.getElementById('myTextarea').value = localStorage.getItem('savedText') || '';<br /> </code></p> <p>Эти методы помогут упростить взаимодействие пользователя с формой и сделать процесс ввода данных более удобным.</p> <h3>Работа с событиями: как обрабатывать ввод текста</h3> <p>Для обработки ввода текста в <code>textarea</code> используйте событие <code>input</code>. Оно срабатывает каждый раз, когда пользователь изменяет содержимое поля. Например, добавьте обработчик события в JavaScript:</p> <p><code>const textarea = document.querySelector('textarea');<br /> textarea.addEventListener('input', (event) => {<br /> console.log(event.target.value);<br /> });</code></p> <p>Для ограничения длины ввода добавьте проверку внутри обработчика события <code>input</code>:</p> <p><code>textarea.addEventListener('input', (event) => {<br /> if (event.target.value.length > 100) {<br /> event.target.value = event.target.value.slice(0, 100);<br /> }<br /> });</code></p> <p>Этот код не позволит ввести больше 100 символов. Для улучшения взаимодействия с пользователем можно добавить отображение оставшегося количества символов:</p> <p><code>const charCount = document.getElementById('charCount');<br /> textarea.addEventListener('input', (event) => {<br /> const remaining = 100 - event.target.value.length;<br /> charCount.textContent = `Осталось символов: ${remaining}`;<br /> });</code></p> <p>Используйте событие <code>keydown</code>, если нужно обрабатывать нажатия клавиш. Например, для предотвращения ввода определенных символов:</p> <p><code>textarea.addEventListener('keydown', (event) => {<br /> if (event.key === '@') {<br /> event.preventDefault();<br /> }<br /> });</code></p> <p>Эти методы помогут эффективно управлять вводом текста и создавать удобные интерфейсы для пользователей.</p> </p> </div><!-- .entry-content --> </article><!-- #post-## --> <div class="entry-footer"> </div> <div class="b-share b-share--post"> <div class="b-share__title">Понравилась статья? Поделить с друзьями:</div> <span class="b-share__ico b-share__vk js-share-link" data-uri="http://vk.com/share.php?url=https%3A%2F%2Fxn----7sbbh7akdldfh0ai3n.xn--p1ai%2F%25d0%25ba%25d0%25b0%25d0%25ba-%25d0%25b4%25d0%25be%25d0%25b1%25d0%25b0%25d0%25b2%25d0%25b8%25d1%2582%25d1%258c-%25d1%2582%25d0%25b5%25d0%25ba%25d1%2581%25d1%2582-%25d0%25b2-textarea-html-%25d1%2580%25d1%2583%25d0%25ba%25d0%25be%25d0%25b2%25d0%25be%25d0%25b4%25d1%2581%25d1%2582%25d0%25b2%25d0%25be-%25d0%25b4%25d0%25bb%2F"></span> <span class="b-share__ico b-share__fb js-share-link" data-uri="http://www.facebook.com/sharer.php?u=https%3A%2F%2Fxn----7sbbh7akdldfh0ai3n.xn--p1ai%2F%25d0%25ba%25d0%25b0%25d0%25ba-%25d0%25b4%25d0%25be%25d0%25b1%25d0%25b0%25d0%25b2%25d0%25b8%25d1%2582%25d1%258c-%25d1%2582%25d0%25b5%25d0%25ba%25d1%2581%25d1%2582-%25d0%25b2-textarea-html-%25d1%2580%25d1%2583%25d0%25ba%25d0%25be%25d0%25b2%25d0%25be%25d0%25b4%25d1%2581%25d1%2582%25d0%25b2%25d0%25be-%25d0%25b4%25d0%25bb%2F"></span> <span class="b-share__ico b-share__tw js-share-link" data-uri="http://twitter.com/share?text=%D0%9A%D0%B0%D0%BA+%D0%B4%D0%BE%D0%B1%D0%B0%D0%B2%D0%B8%D1%82%D1%8C+%D1%82%D0%B5%D0%BA%D1%81%D1%82+%D0%B2+textarea+HTML+%D0%A0%D1%83%D0%BA%D0%BE%D0%B2%D0%BE%D0%B4%D1%81%D1%82%D0%B2%D0%BE+%D0%B4%D0%BB%D1%8F+%D0%BD%D0%BE%D0%B2%D0%B8%D1%87%D0%BA%D0%BE%D0%B2&url=https%3A%2F%2Fxn----7sbbh7akdldfh0ai3n.xn--p1ai%2F%25d0%25ba%25d0%25b0%25d0%25ba-%25d0%25b4%25d0%25be%25d0%25b1%25d0%25b0%25d0%25b2%25d0%25b8%25d1%2582%25d1%258c-%25d1%2582%25d0%25b5%25d0%25ba%25d1%2581%25d1%2582-%25d0%25b2-textarea-html-%25d1%2580%25d1%2583%25d0%25ba%25d0%25be%25d0%25b2%25d0%25be%25d0%25b4%25d1%2581%25d1%2582%25d0%25b2%25d0%25be-%25d0%25b4%25d0%25bb%2F"></span> <span class="b-share__ico b-share__ok 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%25d0%25ba%25d0%25b0%25d0%25ba-%25d0%25b4%25d0%25be%25d0%25b1%25d0%25b0%25d0%25b2%25d0%25b8%25d1%2582%25d1%258c-%25d1%2582%25d0%25b5%25d0%25ba%25d1%2581%25d1%2582-%25d0%25b2-textarea-html-%25d1%2580%25d1%2583%25d0%25ba%25d0%25be%25d0%25b2%25d0%25be%25d0%25b4%25d1%2581%25d1%2582%25d0%25b2%25d0%25be-%25d0%25b4%25d0%25bb%2F"></span> <span class="b-share__ico b-share__gp js-share-link" data-uri="https://plus.google.com/share?url=https%3A%2F%2Fxn----7sbbh7akdldfh0ai3n.xn--p1ai%2F%25d0%25ba%25d0%25b0%25d0%25ba-%25d0%25b4%25d0%25be%25d0%25b1%25d0%25b0%25d0%25b2%25d0%25b8%25d1%2582%25d1%258c-%25d1%2582%25d0%25b5%25d0%25ba%25d1%2581%25d1%2582-%25d0%25b2-textarea-html-%25d1%2580%25d1%2583%25d0%25ba%25d0%25be%25d0%25b2%25d0%25be%25d0%25b4%25d1%2581%25d1%2582%25d0%25b2%25d0%25be-%25d0%25b4%25d0%25bb%2F"></span> <span class="b-share__ico b-share__whatsapp js-share-link js-share-link-no-window" data-uri="whatsapp://send?text=%D0%9A%D0%B0%D0%BA+%D0%B4%D0%BE%D0%B1%D0%B0%D0%B2%D0%B8%D1%82%D1%8C+%D1%82%D0%B5%D0%BA%D1%81%D1%82+%D0%B2+textarea+HTML+%D0%A0%D1%83%D0%BA%D0%BE%D0%B2%D0%BE%D0%B4%D1%81%D1%82%D0%B2%D0%BE+%D0%B4%D0%BB%D1%8F+%D0%BD%D0%BE%D0%B2%D0%B8%D1%87%D0%BA%D0%BE%D0%B2%20https%3A%2F%2Fxn----7sbbh7akdldfh0ai3n.xn--p1ai%2F%25d0%25ba%25d0%25b0%25d0%25ba-%25d0%25b4%25d0%25be%25d0%25b1%25d0%25b0%25d0%25b2%25d0%25b8%25d1%2582%25d1%258c-%25d1%2582%25d0%25b5%25d0%25ba%25d1%2581%25d1%2582-%25d0%25b2-textarea-html-%25d1%2580%25d1%2583%25d0%25ba%25d0%25be%25d0%25b2%25d0%25be%25d0%25b4%25d1%2581%25d1%2582%25d0%25b2%25d0%25be-%25d0%25b4%25d0%25bb%2F"></span> <span class="b-share__ico b-share__viber js-share-link js-share-link-no-window" data-uri="viber://forward?text=%D0%9A%D0%B0%D0%BA+%D0%B4%D0%BE%D0%B1%D0%B0%D0%B2%D0%B8%D1%82%D1%8C+%D1%82%D0%B5%D0%BA%D1%81%D1%82+%D0%B2+textarea+HTML+%D0%A0%D1%83%D0%BA%D0%BE%D0%B2%D0%BE%D0%B4%D1%81%D1%82%D0%B2%D0%BE+%D0%B4%D0%BB%D1%8F+%D0%BD%D0%BE%D0%B2%D0%B8%D1%87%D0%BA%D0%BE%D0%B2%20https%3A%2F%2Fxn----7sbbh7akdldfh0ai3n.xn--p1ai%2F%25d0%25ba%25d0%25b0%25d0%25ba-%25d0%25b4%25d0%25be%25d0%25b1%25d0%25b0%25d0%25b2%25d0%25b8%25d1%2582%25d1%258c-%25d1%2582%25d0%25b5%25d0%25ba%25d1%2581%25d1%2582-%25d0%25b2-textarea-html-%25d1%2580%25d1%2583%25d0%25ba%25d0%25be%25d0%25b2%25d0%25be%25d0%25b4%25d1%2581%25d1%2582%25d0%25b2%25d0%25be-%25d0%25b4%25d0%25bb%2F"></span> <span class="b-share__ico 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%25d0%25ba%25d0%25b0%25d0%25ba-%25d0%25b4%25d0%25be%25d0%25b1%25d0%25b0%25d0%25b2%25d0%25b8%25d1%2582%25d1%258c-%25d1%2582%25d0%25b5%25d0%25ba%25d1%2581%25d1%2582-%25d0%25b2-textarea-html-%25d1%2580%25d1%2583%25d0%25ba%25d0%25be%25d0%25b2%25d0%25be%25d0%25b4%25d1%2581%25d1%2582%25d0%25b2%25d0%25be-%25d0%25b4%25d0%25bb%2F&text=%D0%9A%D0%B0%D0%BA+%D0%B4%D0%BE%D0%B1%D0%B0%D0%B2%D0%B8%D1%82%D1%8C+%D1%82%D0%B5%D0%BA%D1%81%D1%82+%D0%B2+textarea+HTML+%D0%A0%D1%83%D0%BA%D0%BE%D0%B2%D0%BE%D0%B4%D1%81%D1%82%D0%B2%D0%BE+%D0%B4%D0%BB%D1%8F+%D0%BD%D0%BE%D0%B2%D0%B8%D1%87%D0%BA%D0%BE%D0%B2"></span> </div> <meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="https://xn----7sbbh7akdldfh0ai3n.xn--p1ai/%d0%ba%d0%b0%d0%ba-%d0%b4%d0%be%d0%b1%d0%b0%d0%b2%d0%b8%d1%82%d1%8c-%d1%82%d0%b5%d0%ba%d1%81%d1%82-%d0%b2-textarea-html-%d1%80%d1%83%d0%ba%d0%be%d0%b2%d0%be%d0%b4%d1%81%d1%82%d0%b2%d0%be-%d0%b4%d0%bb/"/> <meta itemprop="dateModified" content="2024-12-03"/> <meta itemprop="datePublished" content="2024-12-03T00:27:18+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%25d0%25ba%25d0%25b0%25d0%25ba-%25d0%25b4%25d0%25be%25d0%25b1%25d0%25b0%25d0%25b2%25d0%25b8%25d1%2582%25d1%258c-%25d1%2582%25d0%25b5%25d0%25ba%25d1%2581%25d1%2582-%25d0%25b2-textarea-html-%25d1%2580%25d1%2583%25d0%25ba%25d0%25be%25d0%25b2%25d0%25be%25d0%25b4%25d1%2581%25d1%2582%25d0%25b2%25d0%25be-%25d0%25b4%25d0%25bb%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="b23e1ef0ed" /><input type="hidden" name="_wp_http_referer" value="/%d0%ba%d0%b0%d0%ba-%d0%b4%d0%be%d0%b1%d0%b0%d0%b2%d0%b8%d1%82%d1%8c-%d1%82%d0%b5%d0%ba%d1%81%d1%82-%d0%b2-textarea-html-%d1%80%d1%83%d0%ba%d0%be%d0%b2%d0%be%d0%b4%d1%81%d1%82%d0%b2%d0%be-%d0%b4%d0%bb/" /> </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/58585d5746823628a15fc92e306c4bc4faf90d8d943049db61f3af1d333bbfbd?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/58585d5746823628a15fc92e306c4bc4faf90d8d943049db61f3af1d333bbfbd?s=56&d=mm&r=g"/><noscript><img alt='guest' src='https://secure.gravatar.com/avatar/58585d5746823628a15fc92e306c4bc4faf90d8d943049db61f3af1d333bbfbd?s=56&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/58585d5746823628a15fc92e306c4bc4faf90d8d943049db61f3af1d333bbfbd?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">

{} [+]