Работа с value у форм

Bliss.js предоставляет удобные средства для работы с элементами формы, включая чтение, установку и отслеживание значений полей. В основе лежит метод .val(), который позволяет взаимодействовать с value как с отдельным свойством HTML-элемента, но при этом предлагает упрощённый синтаксис и интеграцию с остальными возможностями библиотеки.

Получение значения поля

Для чтения текущего значения поля используется метод .val() без аргументов. Bliss автоматически учитывает тип поля:

let input = Bliss('#username');
let currentValue = input.val(); // Получает строку из текстового поля

Особенности работы с различными типами элементов:

• и </code></strong> — возвращается строка.</li> <li><strong><code><input type="checkbox"></code></strong> — возвращается <code>true</code> или <code>false</code> в зависимости от состояния.</li> <li><strong><code><input type="radio"></code></strong> — возвращается значение выбранной радио-кнопки из группы.</li> <li><strong><code><select></code></strong> — возвращается значение выбранного <code><option></code>. Для множественного выбора — массив выбранных значений.</li> </ul> <p>Пример для радио-кнопок и селекта:</p> <pre class="javascript"><code>let selectedOption = Bliss('input[name="gender"]:checked').val(); let selectedValues = Bliss('#multiSelect').val(); // Возвращает массив</code></pre> <hr /> <h4 id="установка-значения-поля">Установка значения поля</h4> <p>Передача аргумента в <code>.val()</code> изменяет значение поля. Bliss автоматически корректирует тип данных:</p> <pre class="javascript"><code>Bliss('#username').val('ivan'); // Устанавливает текст Bliss('#agree').val(true); // Отмечает checkbox Bliss('input[name="gender"]').val('male'); // Выбирает radio-кнопку Bliss('#multiSelect').val(['option1', 'option3']); // Выбирает несколько опций</code></pre> <p>Важно, что установка значения радио-кнопки через <code>.val()</code> ищет кнопку с нужным <code>value</code> и устанавливает её состояние <code>checked</code>. Если такого значения нет — состояние не изменяется.</p> <hr /> <h4 id="массовая-работа-с-формами">Массовая работа с формами</h4> <p>Bliss позволяет работать сразу с формой целиком. Метод <code>.val()</code> на элементе <code><form></code> возвращает объект, где ключи — имена полей, а значения — их текущие <code>value</code>:</p> <pre class="javascript"><code>let formData = Bliss('#signupForm').val(); /* { username: 'ivan', password: '12345', gender: 'male', interests: ['music', 'books'], agree: true } */</code></pre> <p>Для установки значений формы передаётся объект с ключами по имени полей:</p> <pre class="javascript"><code>Bliss('#signupForm').val({ username: 'anna', gender: 'female', interests: ['art'], agree: false });</code></pre> <p>Bliss автоматически обработает типы данных: отметит нужные checkbox и radio, выберет опции <code><select></code>.</p> <hr /> <h4 id="реактивное-отслеживание-изменений">Реактивное отслеживание изменений</h4> <p>Bliss упрощает привязку событий изменения значения. Метод <code>.on('change', callback)</code> позволяет реагировать на любые изменения поля, включая ввод текста и выбор опций:</p> <pre class="javascript"><code>Bliss('#username').on('change', function() { console.log('Новое значение:', this.val()); });</code></pre> <p>Для форм это позволяет получать актуальные данные при любом взаимодействии с пользователем:</p> <pre class="javascript"><code>Bliss('#signupForm').on('change', function() { console.log('Данные формы:', this.val()); });</code></pre> <hr /> <h4 id="особенности-и-подводные-камни">Особенности и подводные камни</h4> <ol type="1"> <li><strong>Checkbox и радио</strong> — <code>.val()</code> всегда возвращает корректный логический тип или значение выбранного элемента. Несовпадение значений может привести к тому, что выбор не изменится.</li> <li><strong>Множественный <code><select></code></strong> — возвращается массив. При установке значения важно передавать массив, иначе выбор не изменится.</li> <li><strong>Форма без <code>name</code> у элементов</strong> — поля без имени не будут учитываться при получении объекта через <code>.val()</code>.</li> </ol> <hr /> <h4 id="интеграция-с-другими-методами-bliss">Интеграция с другими методами Bliss</h4> <p>Метод <code>.val()</code> удобно комбинировать с другими функциями:</p> <ul> <li><code>.each()</code> — для обхода группы полей и индивидуальной обработки значений.</li> <li><code>.filter()</code> — для работы только с выбранными полями, например, с checkbox или текстовыми полями.</li> <li><code>.attr()</code> — для чтения или изменения атрибутов, связанных с value, таких как <code>disabled</code> или <code>readonly</code>.</li> </ul> <p>Пример выборочной обработки:</p> <pre class="javascript"><code>Bliss('#signupForm input[type="text"]').each(function() { console.log(this.val()); });</code></pre> <hr /> <h4 id="практическая-структура-кода">Практическая структура кода</h4> <p>При работе с формами часто используют следующую структуру:</p> <ol type="1"> <li>Сбор значений формы:</li> </ol> <pre class="javascript"><code>let data = Bliss('#myForm').val();</code></pre> <ol start="2" type="1"> <li>Валидация и преобразование данных:</li> </ol> <pre class="javascript"><code>if (!data.username) { console.warn('Имя пользователя не задано'); }</code></pre> <ol start="3" type="1"> <li>Отправка на сервер или локальная обработка:</li> </ol> <pre class="javascript"><code>fetch('/submit', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(data) });</code></pre> <p>Использование <code>.val()</code> делает весь процесс максимально компактным и понятным, без ручного обхода каждого элемента формы.</p> </div> <div class="post-navigation row mt-3 mb-4"> <div class="previous-post-link col-md-5"> <a href="/tutorials/bliss-js/html-soderzhimoe/" rel="prev">« HTML-содержимое</a> </div> <div class="index-link col-md-2 text-center"> <a href="/tutorials/bliss-js/">Оглавление</a> </div> <div class="next-post-link col-md-5 text-end"> <a href="/tutorials/bliss-js/vstavka-kontenta-v-raznye-pozitsii/" rel="next">Вставка контента в разные позиции »</a> </div> </div> </div> <div class="col-md-3 mt-lg-0 mt-md-0 mt-sm-3 mt-3"> <aside class="sidebar"> <h3>Учебник Bliss.js</h3> <ul> <li> Введение в Bliss.js <ul> <li> <a href="/tutorials/bliss-js/chto-takoe-bliss-js/">Что такое Bliss.js</a> </li> <li> <a href="/tutorials/bliss-js/istoriya-sozdaniya-i-filosofiya-biblioteki-bliss-js/">История создания и философия библиотеки</a> </li> <li> <a href="/tutorials/bliss-js/sravnenie-s-jquery-i-vanilla-javascript-bliss-js/">Сравнение с jQuery и vanilla JavaScript</a> </li> <li> <a href="/tutorials/bliss-js/ustanovka-i-podklyuchenie-bliss-js/">Установка и подключение</a> </li> <li> <a href="/tutorials/bliss-js/pervaya-programma-na-bliss-js/">Первая программа на Bliss.js</a> </li> </ul> </li> <li> Основы работы с DOM <ul> <li> <a href="/tutorials/bliss-js/selektory-i-vybor-elementov/">Селекторы и выбор элементов</a> </li> <li> <a href="/tutorials/bliss-js/metod-i-ego-vozmozhnosti/">Метод $() и его возможности</a> </li> <li> <a href="/tutorials/bliss-js/rabota-s-kollektsiyami-elementov-bliss-js/">Работа с коллекциями элементов</a> </li> <li> <a href="/tutorials/bliss-js/tsepochki-vyzovov-chaining/">Цепочки вызовов (chaining)</a> </li> <li> <a href="/tutorials/bliss-js/kontekst-vypolneniya-bliss-js/">Контекст выполнения</a> </li> </ul> </li> <li> Создание и модификация элементов <ul> <li> <a href="/tutorials/bliss-js/sozdanie-novykh-elementov-cherez-create-/">Создание новых элементов через $.create()</a> </li> <li> <a href="/tutorials/bliss-js/dobavlenie-elementov-v-dom/">Добавление элементов в DOM</a> </li> <li> <a href="/tutorials/bliss-js/udalenie-elementov-bliss-js/">Удаление элементов</a> </li> <li> <a href="/tutorials/bliss-js/klonirovanie-elementov-bliss-js/">Клонирование элементов</a> </li> <li> <a href="/tutorials/bliss-js/zamena-elementov-bliss-js/">Замена элементов</a> </li> </ul> </li> <li> Атрибуты и свойства <ul> <li> <a href="/tutorials/bliss-js/rabota-s-html-atributami/">Работа с HTML-атрибутами</a> </li> <li> <a href="/tutorials/bliss-js/upravlenie-data-atributami/">Управление data-атрибутами</a> </li> <li> <a href="/tutorials/bliss-js/svoystva-elementov-bliss-js/">Свойства элементов</a> </li> <li> <a href="/tutorials/bliss-js/razlichiya-mezhdu-atributami-i-svoystvami-bliss-js/">Различия между атрибутами и свойствами</a> </li> <li> <a href="/tutorials/bliss-js/batch-operatsii-nad-atributami/">Batch-операции над атрибутами</a> </li> </ul> </li> <li> Классы и стили <ul> <li> <a href="/tutorials/bliss-js/dobavlenie-i-udalenie-klassov-bliss-js/">Добавление и удаление классов</a> </li> <li> <a href="/tutorials/bliss-js/pereklyuchenie-klassov-bliss-js/">Переключение классов</a> </li> <li> <a href="/tutorials/bliss-js/proverka-nalichiya-klassov-bliss-js/">Проверка наличия классов</a> </li> <li> <a href="/tutorials/bliss-js/inline-stili-cherez-style-/">Inline-стили через $.style()</a> </li> <li> <a href="/tutorials/bliss-js/vychislyaemye-stili-bliss-js/">Вычисляемые стили</a> </li> <li> <a href="/tutorials/bliss-js/rabota-s-css-peremennymi/">Работа с CSS-переменными</a> </li> </ul> </li> <li> События <ul> <li> <a href="/tutorials/bliss-js/privyazka-obrabotchikov-sobytiy-bliss-js/">Привязка обработчиков событий</a> </li> <li> <a href="/tutorials/bliss-js/delegirovanie-sobytiy-bliss-js/">Делегирование событий</a> </li> <li> <a href="/tutorials/bliss-js/udalenie-obrabotchikov-bliss-js/">Удаление обработчиков</a> </li> <li> <a href="/tutorials/bliss-js/polzovatelskie-sobytiya-bliss-js/">Пользовательские события</a> </li> <li> <a href="/tutorials/bliss-js/obekt-sobytiya-i-ego-svoystva-bliss-js/">Объект события и его свойства</a> </li> <li> <a href="/tutorials/bliss-js/vsplytie-i-perekhvat-sobytiy-bliss-js/">Всплытие и перехват событий</a> </li> <li> <a href="/tutorials/bliss-js/metod-fire-dlya-triggerov/">Метод $.fire() для триггеров</a> </li> </ul> </li> <li> Содержимое элементов <ul> <li> <a href="/tutorials/bliss-js/tekstovoe-soderzhimoe/">Текстовое содержимое</a> </li> <li> <a href="/tutorials/bliss-js/html-soderzhimoe/">HTML-содержимое</a> </li> <li> <a href="/tutorials/bliss-js/rabota-s-value-u-form/">Работа с value у форм</a> </li> <li> <a href="/tutorials/bliss-js/vstavka-kontenta-v-raznye-pozitsii/">Вставка контента в разные позиции</a> </li> <li> <a href="/tutorials/bliss-js/ochistka-soderzhimogo-bliss-js/">Очистка содержимого</a> </li> </ul> </li> <li> Перемещение по DOM <ul> <li> <a href="/tutorials/bliss-js/poisk-roditeley/">Поиск родителей</a> </li> <li> <a href="/tutorials/bliss-js/poisk-potomkov/">Поиск потомков</a> </li> <li> <a href="/tutorials/bliss-js/navigatsiya-po-sosednim-elementam/">Навигация по соседним элементам</a> </li> <li> <a href="/tutorials/bliss-js/metod-closest-/">Метод $.closest()</a> </li> <li> <a href="/tutorials/bliss-js/metod-find-/">Метод $.find()</a> </li> <li> <a href="/tutorials/bliss-js/filtratsiya-kollektsiy-bliss-js/">Фильтрация коллекций</a> </li> </ul> </li> <li> Формы и пользовательский ввод <ul> <li> <a href="/tutorials/bliss-js/poluchenie-znacheniy-poley-bliss-js/">Получение значений полей</a> </li> <li> <a href="/tutorials/bliss-js/ustanovka-znacheniy-bliss-js/">Установка значений</a> </li> <li> <a href="/tutorials/bliss-js/rabota-s-checkbox-i-radio-bliss-js/">Работа с checkbox и radio</a> </li> <li> <a href="/tutorials/bliss-js/rabota-s-select/">Работа с select</a> </li> <li> <a href="/tutorials/bliss-js/serializatsiya-form-bliss-js/">Сериализация форм</a> </li> <li> <a href="/tutorials/bliss-js/validatsiya-form-bliss-js/">Валидация форм</a> </li> </ul> </li> <li> AJAX и сетевые запросы <ul> <li> <a href="/tutorials/bliss-js/metod-fetch-/">Метод $.fetch()</a> </li> <li> <a href="/tutorials/bliss-js/get-zaprosy-bliss-js/">GET-запросы</a> </li> <li> <a href="/tutorials/bliss-js/post-zaprosy-bliss-js/">POST-запросы</a> </li> <li> <a href="/tutorials/bliss-js/obrabotka-otvetov-bliss-js/">Обработка ответов</a> </li> <li> <a href="/tutorials/bliss-js/rabota-s-json-bliss-js/">Работа с JSON</a> </li> <li> <a href="/tutorials/bliss-js/obrabotka-oshibok-bliss-js/">Обработка ошибок</a> </li> <li> <a href="/tutorials/bliss-js/zagruzka-faylov-bliss-js/">Загрузка файлов</a> </li> </ul> </li> <li> Утилиты и хелперы <ul> <li> <a href="/tutorials/bliss-js/metod-type-/">Метод $.type()</a> </li> <li> <a href="/tutorials/bliss-js/rabota-s-massivami-bliss-js/">Работа с массивами</a> </li> <li> <a href="/tutorials/bliss-js/rabota-s-obektami/">Работа с объектами</a> </li> <li> <a href="/tutorials/bliss-js/metod-extend-/">Метод $.extend()</a> </li> <li> <a href="/tutorials/bliss-js/metod-merge-/">Метод $.merge()</a> </li> <li> <a href="/tutorials/bliss-js/preobrazovanie-tipov/">Преобразование типов</a> </li> <li> <a href="/tutorials/bliss-js/utility-dlya-strok/">Утилиты для строк</a> </li> </ul> </li> <li> Делегированные свойства <ul> <li> <a href="/tutorials/bliss-js/kontseptsiya-delegirovaniya/">Концепция делегирования</a> </li> <li> <a href="/tutorials/bliss-js/live-collections/">Live collections</a> </li> <li> <a href="/tutorials/bliss-js/avtomaticheskaya-sinkhronizatsiya/">Автоматическая синхронизация</a> </li> <li> <a href="/tutorials/bliss-js/sozdanie-sobstvennykh-delegirovannykh-svoystv/">Создание собственных делегированных свойств</a> </li> </ul> </li> <li> Hooks и расширения <ul> <li> <a href="/tutorials/bliss-js/chto-takoe-hooks-v-bliss/">Что такое hooks в Bliss</a> </li> <li> <a href="/tutorials/bliss-js/vstroennye-hooks/">Встроенные hooks</a> </li> <li> <a href="/tutorials/bliss-js/sozdanie-sobstvennykh-hooks/">Создание собственных hooks</a> </li> <li> <a href="/tutorials/bliss-js/rasshirenie-funktsionala-biblioteki/">Расширение функционала библиотеки</a> </li> <li> <a href="/tutorials/bliss-js/plaginy-dlya-bliss-js/">Плагины для Bliss.js</a> </li> </ul> </li> <li> Производительность <ul> <li> <a href="/tutorials/bliss-js/optimizatsiya-selektorov-bliss-js/">Оптимизация селекторов</a> </li> <li> <a href="/tutorials/bliss-js/keshirovanie-elementov/">Кеширование элементов</a> </li> <li> <a href="/tutorials/bliss-js/minimizatsiya-reflow-i-repaint/">Минимизация reflow и repaint</a> </li> <li> <a href="/tutorials/bliss-js/batch-obnovleniya-dom/">Batch-обновления DOM</a> </li> <li> <a href="/tutorials/bliss-js/sravnenie-proizvoditelnosti-s-drugimi-bibliotekami-bliss-js/">Сравнение производительности с другими библиотеками</a> </li> </ul> </li> <li> Продвинутые техники <ul> <li> <a href="/tutorials/bliss-js/rabota-s-documentfragment/">Работа с DocumentFragment</a> </li> <li> <a href="/tutorials/bliss-js/shadow-dom-bliss-js/">Shadow DOM</a> </li> <li> <a href="/tutorials/bliss-js/shablonizatsiya-cherez-bliss/">Шаблонизация через Bliss</a> </li> <li> <a href="/tutorials/bliss-js/reaktivnost-i-privyazka-dannykh/">Реактивность и привязка данных</a> </li> <li> <a href="/tutorials/bliss-js/komponentnyy-podkhod/">Компонентный подход</a> </li> </ul> </li> <li> Асинхронность <ul> <li> <a href="/tutorials/bliss-js/promisy-v-bliss-js/">Промисы в Bliss.js</a> </li> <li> <a href="/tutorials/bliss-js/async-await-s-metodami-biblioteki/">Async/await с методами библиотеки</a> </li> <li> <a href="/tutorials/bliss-js/posledovatelnye-i-parallelnye-zaprosy/">Последовательные и параллельные запросы</a> </li> <li> <a href="/tutorials/bliss-js/otmena-zaprosov-bliss-js/">Отмена запросов</a> </li> </ul> </li> <li> Анимации и переходы <ul> <li> <a href="/tutorials/bliss-js/css-perekhody-cherez-javascript/">CSS-переходы через JavaScript</a> </li> <li> <a href="/tutorials/bliss-js/upravlenie-animatsiyami/">Управление анимациями</a> </li> <li> <a href="/tutorials/bliss-js/callback-posle-zaversheniya-animatsii/">Callback после завершения анимации</a> </li> <li> <a href="/tutorials/bliss-js/plavnaya-prokrutka/">Плавная прокрутка</a> </li> <li> <a href="/tutorials/bliss-js/metod-transition-/">Метод $.transition()</a> </li> </ul> </li> <li> Работа с медиа <ul> <li> <a href="/tutorials/bliss-js/zagruzka-izobrazheniy/">Загрузка изображений</a> </li> <li> <a href="/tutorials/bliss-js/preloading-resursov/">Preloading ресурсов</a> </li> <li> <a href="/tutorials/bliss-js/rabota-s-canvas/">Работа с canvas</a> </li> <li> <a href="/tutorials/bliss-js/rabota-s-video-i-audio/">Работа с видео и аудио</a> </li> </ul> </li> <li> Доступность <ul> <li> <a href="/tutorials/bliss-js/aria-atributy/">ARIA-атрибуты</a> </li> <li> <a href="/tutorials/bliss-js/upravlenie-fokusom-bliss-js/">Управление фокусом</a> </li> <li> <a href="/tutorials/bliss-js/klaviaturnaya-navigatsiya-bliss-js/">Клавиатурная навигация</a> </li> <li> <a href="/tutorials/bliss-js/semanticheskaya-razmetka-bliss-js/">Семантическая разметка</a> </li> </ul> </li> <li> Отладка и тестирование <ul> <li> <a href="/tutorials/bliss-js/inspektirovanie-elementov/">Инспектирование элементов</a> </li> <li> <a href="/tutorials/bliss-js/logirovanie-operatsiy/">Логирование операций</a> </li> <li> <a href="/tutorials/bliss-js/yunit-testy-dlya-koda-na-bliss/">Юнит-тесты для кода на Bliss</a> </li> <li> <a href="/tutorials/bliss-js/integratsionnoe-testirovanie-bliss-js/">Интеграционное тестирование</a> </li> <li> <a href="/tutorials/bliss-js/rasprostranennye-oshibki-i-ikh-resheniya-bliss-js/">Распространенные ошибки и их решения</a> </li> </ul> </li> <li> Интеграция с фреймворками <ul> <li> <a href="/tutorials/bliss-js/ispolzovanie-s-react/">Использование с React</a> </li> <li> <a href="/tutorials/bliss-js/ispolzovanie-s-vue/">Использование с Vue</a> </li> <li> <a href="/tutorials/bliss-js/ispolzovanie-s-angular/">Использование с Angular</a> </li> <li> <a href="/tutorials/bliss-js/gibridnye-podkhody-bliss-js/">Гибридные подходы</a> </li> <li> <a href="/tutorials/bliss-js/kogda-stoit-i-ne-stoit-ispolzovat-bliss/">Когда стоит и не стоит использовать Bliss</a> </li> </ul> </li> <li> Миграция и совместимость <ul> <li> <a href="/tutorials/bliss-js/perekhod-s-jquery-na-bliss/">Переход с jQuery на Bliss</a> </li> <li> <a href="/tutorials/bliss-js/perekhod-s-vanilla-js-na-bliss/">Переход с vanilla JS на Bliss</a> </li> <li> <a href="/tutorials/bliss-js/obratnaya-migratsiya/">Обратная миграция</a> </li> <li> <a href="/tutorials/bliss-js/podderzhka-brauzerov-bliss-js/">Поддержка браузеров</a> </li> <li> <a href="/tutorials/bliss-js/polifilly-i-follbeki/">Полифиллы и фоллбэки</a> </li> </ul> </li> <li> Практические паттерны <ul> <li> <a href="/tutorials/bliss-js/modulnaya-arkhitektura-bliss-js/">Модульная архитектура</a> </li> <li> <a href="/tutorials/bliss-js/singleton-pattern-bliss-js/">Singleton-паттерн</a> </li> <li> <a href="/tutorials/bliss-js/observer-pattern-bliss-js/">Observer-паттерн</a> </li> <li> <a href="/tutorials/bliss-js/mvc-s-bliss-js/">MVC с Bliss.js</a> </li> <li> <a href="/tutorials/bliss-js/upravlenie-sostoyaniem-bliss-js/">Управление состоянием</a> </li> </ul> </li> <li> Безопасность <ul> <li> <a href="/tutorials/bliss-js/xss-i-zashchita-ot-inektsiy-bliss-js/">XSS и защита от инъекций</a> </li> <li> <a href="/tutorials/bliss-js/sanitizatsiya-polzovatelskogo-vvoda-bliss-js/">Санитизация пользовательского ввода</a> </li> <li> <a href="/tutorials/bliss-js/content-security-policy-bliss-js/">Content Security Policy</a> </li> <li> <a href="/tutorials/bliss-js/bezopasnaya-rabota-s-innerhtml-bliss-js/">Безопасная работа с innerHTML</a> </li> </ul> </li> <li> Справочник API <ul> <li> <a href="/tutorials/bliss-js/polnyy-spisok-metodov-bliss-js/">Полный список методов</a> </li> <li> <a href="/tutorials/bliss-js/parametry-i-vozvrashchaemye-znacheniya-bliss-js/">Параметры и возвращаемые значения</a> </li> <li> <a href="/tutorials/bliss-js/sovmestimost-versiy/">Совместимость версий</a> </li> <li> <a href="/tutorials/bliss-js/ustarevshie-metody/">Устаревшие методы</a> </li> </ul> </li> </ul> </aside> </div><!--'end_frame_cache_WyJsYv'--> </div> </div> <footer class="bg-javascript pb-2 pt-2 text-center text-light text-lg-start"> <div class="container"> <div class="row d-flex align-items-center"> <div class="col-md-7 col-lg-8 text-center text-md-start"> <div class="font-weight-bold"> javascript42 — изучаем JavaScript вместе </div> </div> <div class="col-md-5 col-lg-4 ml-lg-0 text-center text-md-end"> <!--'start_frame_cache_DLdrDN'--> <a class="btn btn-outline-light btn-floating m-1 feedback-button" role="button"><i class="bi bi-envelope-fill"></i></a> <div class="feedback-modal" style="display: none"> <div class="feedback-modal-content"> <div class="close feedback-modal-close"> <button type="button" class="btn-close" aria-label="Close"></button> </div> <h3 class="text-center mb-3">Обратная связь</h3> <form action="" method="post" class="feedback-form"> <input type="hidden" name="sessid" id="sessid" value="6c66e7b5383b454ba47e5dbbc8408257" /> <input type="hidden" name="action" value="send_feedback"> <input type="text" class="form-control" id="feedback-lastname" name="UF_LASTNAME"> <div class="mb-3"> <label for="feedback-name" class="form-label">Ваше имя</label> <input type="text" class="form-control" id="feedback-name" name="UF_NAME" required> </div> <div class="mb-3"> <label for="feedback-email" class="form-label">Ваш email</label> <input type="email" class="form-control" id="feedback-email" name="UF_EMAIL" required> </div> <div class="mb-3"> <label for="feedback-message" class="form-label">Ваше сообщение</label> <textarea class="form-control" id="feedback-message" name="UF_MESSAGE" rows="4" required>