|
|||||||
Содержание
Введение |
Веб-формыВведение Форма предназначена, чтобы собрать информацию от посетителй Вашего сайта. При этом результаты опроса могут быть посланы по электронной почте. Если у Вашего веб-сервера есть необходимое обеспечение, Вы можете сохранить результаты формы в базе данных. Для создания формы используйте:
  Примечание: для версии WYSIWYG Web Builder 11 есть ряд
изменений и дополнений при создании форм:- новые опции при создании Editbox, TextArea - при создании Combobox - добавление дополнения (padding) - добавление выбора группы, чтобы сгруппировать связанные варианты в раскрывающемся списке. Для WYSIWYG Web Builder 18 раздел по созданию форм будет выглядеть так, как на рисунке ниже.  Для вставки графических форм используйте меню Insert - раздел FormВ разделе фигурируют следующие формы: Form Area (Область формы), Advanced Button (Кнопка «Дополнительно»), Button (кнопка), Captcha (Капча), Checkbox (Флажок), Editbox (Поле редактирования), File Upload (Файл загружен), Flip Switch (переключатель), Label (этикетка), Radio Button, Range, (диапазон), Select (выбор), Text Area (Текстовая область) Порядок создания формы в WYSIWYG Web Builder 1. Form Area - контейнер для объектов формы (текстовых областей, флажков, радио-кнопок, списков и пр.). Все объекты формы должны быть установлены в область Form Area.Тяните объект Формы к странице и ничьи коробка, чтобы указать положение формы. 2. Проектируйте свою форму, добавляя средства управления, такие как Button, Image Button, Advanced Button, Checkbox, Radio button, Editbox, Text Area или Combobox. Вы заметите, что все объекты становятся частью формы, и при перемещении области формы все элементы формы также перемещаются. Элементы формы Объекты
или элементы формы по-разному
могут отражаться в разных
браузерах, поэтому проверьте свою форму на
всех браузерах и платформах.
Checkbox - Выключатель вкл\выкл  Новое: добавлен стиль флажка в стиле Bootstrap.Combobox - Поле со списком - Позволяет сделать выбор из нескольких вариантов  Новое для Combobox - Новая функция: добавлена проверка HTML5. Чтобы это работало, значение
первого элемента должно быть пустым. - Новая функция: добавлена проверка в стиле Bootstrap. Посмотреть пример Новое
- Переименовано поле со списком (combobox) в Выбор (Select). Это
является официальным названием этого HTML-элемента. И другое. ПодробнееEditbox - Область единственной строки, которая может использоваться, чтобы добавить области name/e-mail. Spinner Спиннер - Усовершенствуйте ввод текста для ввода числовых значений с помощью кнопок вверх/вниз и управления клавишами со стрелками. Обратите внимание, что этот объект обычно используется в форме в качестве замены стандартного поля редактирования (standard editbox). Объект Spinner основан на виджете Spinner библиотеки пользовательского интерфейса jQuery.  Новое в WYSIWYG Web Builder 17 - Новая функция: добавлен режим Bootstrap для счетчика в дополнение к режиму пользовательского интерфейса jQuery. В режиме Bootstrap кнопки вверх и вниз отображаются слева и справа от поля ввода. Новые функции: - добавлена поддержка
заполнения. Это управляет
смещением текста влево и вправо, а также влияет на размер кнопок
прокрутки в режиме Bootstrap. - добавлено свойство выравнивания текста: слева, по центру, справа. - добавлена поддержка условий. Это может быть полезно для вычисления значений в форме. Например, рассчитайте цену на основе количества в корзине PayPal. Новое) добавлена поддержка «плавающих меток». Подробнее Новое
для Form (Форма):Добавлена опция защиты от спама Honeypot.
Добавлена новая переменная сайта для установки сообщения об ошибке
приманки (Обнаружен спам). Добавлена опция «Включить временную метку
в данные формы». Добавлена опция «Включить информацию о браузере в данные формы». И другое.Подробнее File Upload - Этот объект предоставляет средство пользователям, чтобы приложить файл к содержанию формы. Элемент предоставлен как текстовая область и связанная кнопка, хотя в некоторых браузерах это может появиться по-разному. Button Кнопка (Button) обычно используется как кнопка отправки или сброса в форме. Если кнопка не является частью формы, по умолчанию она ничего не делает, но вы можете использовать события для запуска различных действий. В настройках кнопки указывается название, метка (текст), тип кнопки (обычный, ссылка на сайт, кнопка сброса и др.), апределяете стиль оформления кнопки, назначить Событие, определить адаптивные свойства ( видимость, положение объекта, размер объекта, шрифты, фон, границы и др.) Для вставки кнопки на страницу используйте Панель вставок - раздел Form Controls - Button. Image
Button -
Вставляет объект Кнопки- изображения на форме.
См. также Новое в WYSIWYG Web
Builder 15 и Новое в WYSIWYG
Web
Builder 16).Push Button - Кнопка будет обычно использоваться как кнопка сброса на форме. Если кнопка не часть формы, она ничего не делает по умолчанию. См. также: Advanced Button Radio button - Радио-кнопки похожа на checkboxes, за исключением того, что можно сделать только один выбор из нескольких вариантов. Новое для Radio Button: добавлен стиль переключателя в стиле Bootstrap.TextArea - многострочная область формы, где пользователь может ввести большое количество текста. ActiveX Вы используете средства управления ActiveX, чтобы включить заявление в Веб-страницу. Средства управления за ActiveX могут добавить свои способности, такие как проигрыватели аудио/кино, календари, свои кнопки или другие особенности к Вашим страницам. Некоторые средства управления ActiveX не поддерживают HTML как язык программирования и будут вести себя неожиданные, так что нужно убедиться в их правильной работе. CAPTCHA CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) - элемент формы, предназначенный для защиты от спама. Объект CAPTCHA работает в комбинации с (PHP) формы, поэтому используется на веб-сервере с поддержкой PHP! Подробнее о CAPTCHA - см. авторскую справку программы. Новое для
КАПЧА: добавлено свойство «Полная ширина». Указывает, имеет ли элемент полную ширину при использовании в сетке макета.Date Picker (Выбор даты) DatePicker предназначен для ввода дат в форму. Объект предоставляет графический календарь, который появляется, если щелкнуть внутри поля ввода (поля редактирования). Средство выбора даты пользовательского интерфейса jQuery основано на виджете DatePicker библиотеки пользовательского интерфейса jQuery: http://jquery.com/ Bootstrap DatePicker основан на Bootstrap Datetime Picker от Tempus Dominus https://github.com/tempusdominus/ Из настроек: General (Общие) Use current date (Использовать
текущую дату)
Date format (Формат даты) - Подробнее о форматах даты Change month (Изменить месяц) Change year (Изменить год) Mode (Режим) jQuery UI - Flexible Пользовательский интерфейс jQuery) — встроенный Календарь будет виден на странице все время. Bootstrap - Date and Time Picker - выбор даты и времени. Использует Bootstrap Datetime Picker Допустимые форматы даты/времени Custom options - Пользовательские параметры (только для опытных пользователей) Настройки стиля оформления Это относится только к режимам пользовательского интерфейса jQuery. Настраивается тема страницы (Вы можете установить тему для всего в Page Properties (Свойствах страницы) -> Style (Стиль) -> Theme (Тема). Темы можно создавать/редактировать с помощью встроенного Theme Manager (менеджера тем) или на веб-сайте ThemeRoller. Также: выбор и настройка шрифта, настройки адаптивных свойств Подробнее см. Сайты для разных экранов Новое: добавлено свойство «цвет фокуса» (для режима
наложения). Указывает цвет контура для состояния фокуса (Примечание -
когда пользователь нажимает клавишу Tab, браузер перемещает фокус ввода
с элемента на элемент).- Новая функция: добавлены режимы «Bootstrap Datepicker»: дата, время или дата и время. Это можно использовать в качестве альтернативы средству выбора даты пользовательского интерфейса jQuery. Допустимые форматы даты/времени. - Улучшено: цвета окна редактирования и раскрывающегося списка выбора даты теперь можно устанавливать отдельно. Range
(Диапазон) для использования в формах. Имеет ползунок для управления
вводом чисел. Вы можете
установить минимальное и максимальное значение и шаги для определения
числовых интервалов. Например: 0,5Объект Range также поддерживает События и условия. С помощью условий диапазон может быть связан с другим полем ввода, например, полем редактирования для отображения выбранного значения. Для использования элемента "Range" используйте Панель вставок (Toolbox) - раздел Form Controls - Range.  Новое для CAPTCHA - добавлена возможность
устанавливать цвет текста
изображения, установить прозрачность
текста, добавлены новые фоновые эффекты, добавлено свойство «Включить
вращение» (Enable
rotation). возможность указывать, какие символы будут
использоваться в изображении и другое.Подробнее Новые
функции: теперь вы также можете
установить значение для состояния «ВЫКЛ» (OFF), добавлена поддержка
значений комбинированного списка, встроенный скрипт обработчика формПодробнее Новое: Кнопка (Button) / тематическая кнопка
(Themeable Button) - Новые
функции: добавлено свойство «курсор» (cursor), добавлено свойство
«выравнивание текста», добавлено свойство padding, добавлены
свойства
«стиль границы» и «альфа границы» для кнопки с возможностью добавления
темы и другое.Подробнее 3. Удостоверьтесь, что Ваша форма содержит кнопку Submit (Button). Без этой кнопки пользователь будет не в состоянии представить введенные данные. 4. Как только Вы создали свою форму, Вы должны установить некоторые свойства. Выделите форму и выберите меню Edit -> Properties (или дважды щелкните по форме для определения свойств формы, двойной щелчок по элементу формы открывает окно свойств элемента). Самая важная вещь, которую Вы должны сделать, это определить действие формы. Например, чтобы послать введенные данныена Ваш адрес электронной почты, когда пользователь нажимает кнопку Submit. Примечание: Намного больше информации о формах доступно на сайте WYSIWYG Web Builder - в FAO (Frequently Asked Questions - Часто задаваемых вопросах, в обучающих программах онлайн и на форуме: http://www.wysiwygwebbuilder.com/support.html Form name - Введите название для формы Action (Действие) - Необходимый признак, определяя URL подлинника CGI, который обрабатывает форму и отсылает обратную связь назад. Есть два метода, чтобы послать данные формы в сервер - GET и POST. Последний метод означает, что Вы можете послать большее количество данных. Пример: mailto:yourname@yourdomain.com Результаты заполнения формы будут посланы по электронной почте, используя клиента электронной почты посетителей по умолчанию. Примечание:
Мы не рекомендуем использовать метод ‘mailto’ HTML. Это
очень ненадежно. Когда возможно, используйте
встроенный обработчик формы PHP или создайте Ваш
собственный обработчик.
Если Ваш веб-сервер поддерживает PHP, тогда Вы можете использовать built-in PHP form processor - встроенный процессор формы PHP, который является вероятно самым легким способом осуществить обработку формы. Вы можете также создать простую форму, используя PHP, как объяснено в этой обучающей программе: http://www.wysiwygwebbuilder.com/forms_php.html Если Ваш сервер не поддерживает PHP, то Вы должны связаться со своим хостом и спросить у них детали относительно обработки форм. Accept Charset - Применяемая кодировка. Большинством браузеров поддерживаются ISO-8859-1 или UTF-8. Encoding type - Тип кодирования По умолчанию "application/x-www-form-urlencoded" наиболее широко поддержан. Альтернатива - text/plain Use Built-in PHP form processor to send data to an email address -Используйте Встроенный процессор формы PHP, чтобы послать данные по адресу электронной почты. После того, как пользователь ввел информацию в форму, Вы вероятно хотите обработать это так или иначе. WYSIWYG Web Builder имеет встроенный процессор формы. Он производит все основные действия - посылку электронной почты, сохранение к файлу на сервере или даже хранение в базе данных MySQL. Вы будете в состоянии выбрать страницу благодарности (thank you), которая будет показана после того, как пользователь представил данные. Email address - Адрес электронной почты, куда будут посылать данные Subject - Предмет сообщения электронной почты. Message -Сообщение. По умолчанию, сообщение пошлют как простой текст, но также возможно отформатировать текст. Щелкните кнопкой 'Edit', чтобы изменить формат сообщения. Выберите 'Rich text', чтобы использовать встроенного редактора, чтобы отформатировать текст (щелкните кнопкой 'Edit', чтобы открыть редактора), или выберите 'HTML', чтобы вставить Ваш собственный код HTML для сообщения (для передовых пользователей!). Success page (required) - Страница успеха (требуется), Появляется, когда пользователь правильно заполнил форму. Error page (required) - Ошибочная страница (требуется). Появляется, когда пользователь неправильно заполнил форму. Write form data to a .csv file -Этот выбор сохранит представленные данные формы к отделенной картотеке данных на веб-сервере. Вы сможете открыть этот файл в Microsoft Excel, редакторе текста или импортируете в базу данных. Отметьте, что картотека данных должна существовать на сервере, и это должно быть перезаписываемо! WYSIWYG Web Builder автоматически создает этот файл для Вас и установит соответствующие разрешения. Просто щелкните кнопкой 'Create' рядом с областью имени файла и следуйте за инструкциями. Шаг 1 Вводит имя картотеки
данных.
Например 'formdata.csv'
Шаг 2 Выбирает местоположение, где файл будет создан. WYSIWYG Web Builder перечислит все профили, которые Вы создали в менеджере публикации. Шаг 3 WYSIWYG Web Builder соединится с выбранным местоположением и покажет структуру папок на веб-сервере. Выберите отдаленную папку и щелкните ''Finish', чтобы создать картотеку данных. Upload files to a folder on the server - Загрузите файлы к папке на сервере. При этом выборе встроенный процессор формы загрузит файлы к папке на сервере вместо того, чтобы послать их как приложение через электронную почту. Файлы будут сохранены с уникальным именем файла. Местоположение загруженного файла (ов) будет включено в сообщение электронной почты. Мастер веб-формы - Form Wizard Создание формы на пустом месте может быть довольно трудным, поэтому рекомендуется использовать Мастера Формы, чтобы сделать эту задачу немного легче. Примечание:
В версии WYSIWYG Web Builder 11 имеется улучшенный: Form Wizard
(создает объекты лейбла вместо
стандартного текста).
Для открытия мастера веб-форм используйте меню Insert - Form Controls - Wizard. Мастер форм позволяет создавать новые графические формы (на основании предоставленных шаблонов). Создайте рамку в Окне редактирования. При двойном щелчке по рамке откроется мастер веб-форм. Работа с мастером веб-форм Шаг 1: Как Вы хотите создать новую форму? У Мастера форм (Form Wizard) есть 3 метода, чтобы создать форму: 1. Create
a new form based on a template - Этот выбор позволяет Вам
выбирать шаблон формы, который Вы можете использовать как основание для
собственной формы.
2. Create a new form from scratch using the wizard - Создайте новую форму на пустом месте, используя мастера форм 3. Create a blank form so you can add controls later - Создайте пустой бланк формы, Вы можете добавить средства управления позже. В основном этот метод - то же самое как ручная вставка пустой области формы. Шаг 2: Выберите форму шаблона Мы включили несколько готовых к
использованию форм, чтобы Вы могли начать.
Для некоторых форм Вы должны будете изменить данные,
такие как адрес электронной почты или URL вебсайта.
Есть 2 шаблона процессора формы, где используются внешние вебсайты, чтобы обработать данные формы. Прежде, чем Вы сможете использовать услуги этих вебсайтов, Вы должны сначала зарегистрироваться! http://www.formbuddy.com/ http://www.mailmyform.com/ Эти примеры могут быть полезными, если Ваш вебсайт не поддерживает PHP или любой другой тип обработки формы. Шаг 3: Добавьте контроль к форме В этом шаге Вы можете вставить
средства
управления к форме. У каждого
контроля может быть ярлык, который будет показан перед контролем.
Щелкните Add (Добавить) и выберите один из пунктов от раскрывающегося меню, чтобы вставить новый контроль. В большинстве случаев мастер попросит, чтобы Вы ввели имя ярлыка. Чтобы изменить свойства средств управления, выделите его в списке и щелкните Edit (Редактировать), чтобы показать свойства контроля. Вы можете перестроить пункты, используя кнопки Move Up и Move Down. Примечание: Удостоверьтесь, что Ваша форма содержит кнопку Submit (Отправить). Без этой кнопки пользователь не будет в состоянии представить введенные данные!  Шаг 4: Куда нужно послать данные ? Когда пользователь нажимает кнопку Submit, браузер посылает данные формы в сервер сети, таким образом мы должны определить, куда данные нужно послать. 'Submit the data to an email address' - Одна из возможностей - представить данные по адресу электронной почты. Хотя это - очень распространенная методика, но она не работает надежно на всех посетителей Вашего сайта - все зависит от почтового клиента, установленного на их компьютере. Мы не рекомендуем использовать этот метод! Submit data to a script on an external server - Вместо того, чтобы использовать представление данных по эл. почте ("mailto"), попытайтесь использовать сценарий CGI, с использованием PHP, ASP. В этом случае данные хранятся на сервере, при этом предоставляется платный или бесплатный хостинг. Примеры - http://www.formbuddy.com или http://www.mailmyform.com. Сценарий CGI переводит Вашу форму на сообщение электронной почты и пересылает ее к адресу, который Вы указываете. Submit data to a page within your website - Альтернативно Вы можете создать свой собственный процессор формы. В учебной секции нашего вебсайта Вы можете найти пример, как осуществить это использование PHP: http://www.wysiwygwebbuilder.com/forms_php.html Примечание:
Некоторые шаблоны формы используют свой собственный сценарий обработчика формы (обычно добавленный как отдельный объект HTML). В этом случае не изменяйте установленные значения, если Вы не знаете то, что Вы делаете! Шаблоны, которые используют процессор формы, включают: Dictionary lookup - Поиск словаря Form processor - Процессор формы: ASP Form processor - Процессор формы: Godaddy Form processor - Процессор формы: Tell a friend Form processor: www.formbuddy.com Form processor: www.mailmyform.com All PayPal templates - Все шаблоны PayPal All search templates - Все шаблоны поиска Некоторый шаблон формы использует скрытые области адреса электронной почты или вебсайта. Удостоверьтесь, что Вы заменяете эти значения своей собственной информацией! Use Built-in PHP form processor to send data to an email address - Используйте встроенный процессор формы PHP, чтобы послать данные в адрес электронной почты. Encoding type - Тип кодирования Необходимый тип кодирования зависит от процессора формы. В случае, если Вы выбрали предопределенную форму, будет выбран правильный тип кодирования. Новое
для Form Wizard (Мастер форм) - Form Wizard претерпел изменения в стиле
«Aero». Это не только придает мастеру современный вид, но и позволяет
изменять размер окон, повышая удобство работы пользователя.Wizard  Новое: Добавлен новый объект Мастер (Wizard).
Мастер может использоваться
(например), чтобы создать многостраничную Веб-форму. Объект Wizard (мастер) может быть использован (например) для создания многостраничной формы. Мастер может быть модальным (всплывающим) или использоваться как стандартный элемент. Объект мастера основан на объекте диалогового окна и имеет те же свойства. Примечание:
Диалоговое окно - это плавающее окно, содержащее строку заголовка и область содержимого. Вы можете перетаскивать объекты в диалоговое окно, как часть окна. Само диалоговое окно можно перетакскивать по веб-странице Пример jQuery Диалог. Подробнее о диалоговом окне - см. jQuery Dialog Основное отличие этого диалогового окна заключается в возможности добавления нескольких страниц (шагов). Добавление объектов работает так же, как с другими контейнерами, просто перетащите объекты внутри области размещения. Для вставки мастера используйте Панель вставок (Toolbox) - раздел jQuery UI / Bootstrap - Wizard. Нажмите кнопку "'Next" ("Далее") или 'Previous' ("назад"), чтобы перейти к другому шагу. Примечание:
Если мастер используется в качестве формы, то кнопка 'Finish' ("готово") будет действовать как кнопка отправки, в противном случае она просто закроет мастера. База данных (для опытных пользователей только) Вы можете использовать этот выбор в комбинации со встроенным процессором формы, чтобы хранить данные формы в базе данных MySQL на сервере. Произведенный сценарийк PHP попытается автоматически составить таблицу и области, основанные на параметрах настройки, которые Вы указали, таким образом Вы не должны волноваться о создании этого непосредственно. Области базы данных будут в том же самом порядке и использовать то же самое название, как в Вашем проекте формы. Примечание:
Чтобы рассмотреть или обработать представленные данные формы,
Вы будете нуждаться в отдельном инструменте, как standard MySQL admin
tool (инструменте администрирования). Пожалуйста, проконсультируйтесь с
документацией своего хоста для большего количества подробностей.
Write form data in a MySQL database - Определяет, написать ли данные формы в базе данных MySQL. Database / Table - Определяет название базы данных MySQL и название таблицы. Username / Password - Определяет имя пользователя MySQL и пароль. Server - Определяет сервер базы данных MySQL. Auto responder Мы добавили немного основных авто- функциональных возможностей респондента к процессору формы. Это позволяет Вам посылать (спасибо или подтверждение) сообщение пользователю. From - Определяет раздел 'from - от' адреса электронной почты. Subject - Определяет предмет для сообщения электронной почты. Message - Определяет основной текст для сообщения электронной почты. Miscellaneous (Разное) Include IP address in form data - Включают IP адрес в данные формы, чтобы включать IP адрес компьютерной формы, где форма была представлена в сообщении. Process variables in Success Page - позволяет включать результаты формы в страницу успешного сообщения. Пример: на успехе страница добавляют текстовый объект с этим текстом: Следующие данные были представлены форме онлайн: Name: $name Email: $email Website: $website Где name (название), email (электронная почта) и website (вебсайт) являются названиями областей формы, плюс знак доллара. Так, если имя поля - 'name', тогда, имя переменной будет '$name'. Добавление собственного кода к процессору формы (для опытных пользователей только!) Возможно добавить дополнительный код к процессору формы, это может быть полезно для того, чтобы вставить заголовки CC/BCC или послать другую электронную почту, сохранение к базе данных и т.д. Шаг 1 Удостоверьтесь, что выбор ''Use Built-in PHP form processor to send data to an email address" позволен. Шаг 2 Правой кнопкой щелкают по форме и выбирают 'HTML' от контекстного меню. Шаг 3 Один из вариантов - "Custom Form Processing" (Свой обработчик формы). Здесь Вы можете напечатать свой собственный код. Код будет вставлен перед функцией PHP mail(): $body .= '--'.$boundary.'--'.$eol; // your code will be inserted here! mail($mailto, $subject, $body, $header); header('Location: '.$success_url); exit; Подробнее о вставке своего кода - см. Авторскую справку программы. Или: онлайн-обучение http://www.wysiwygwebbuilder.com/forms.html Hidden Fields Вы можете добавить скрытые области, которые используются, чтобы хранить информацию между обменами клиент-сервер. Events См. События Web Storage Web Storage (веб-память) - новая особенность HTML5. Это позволяет хранить области между сеансами или/и страницами. Это может быть полезно, если Вы хотите передать значения от одной формы до другой. Local
storage - Местная память хранит данные без срока.
Session storage - Память сеанса хранит данные для одного сеанса. Мобильный jQuery Use AJAX - Использование AJAX - мобильный jQuery будет автоматически обращаться с подчинением формы через AJAX, когда возможно. Или обычный HTTP будет использоваться. Transition - Определяет переход страницы к странице успеха. Переходы страницы работают, если AJAX позволяют. Set Tab Order in Forms - Установленный порядок счета в формах Вот то, как это работает: 1) Сначала выберите форму. 2) Затем выберите ''Set Tab Order' в меню (также доступно через контекстное меню формы). 3) Web Builder теперь покажет текущий индекс каждого элемента формы, который поддерживает признак индекса счета. Если индекс счета еще не установлен, он показывает ''Not Set''. 4) Теперь щелкните каждым объектом в желательном заказе. Новый индекс будет автоматически отображен. Advanced Button Эта кнопка дает Вам намного больше контроля над появлением и поведением кнопки. Вы можете изменить фоновый цвет, использовать различные шрифты для текста или даже активизировать JavaScript. В настройках конпки указывается Name (Название), Value (начальное значение), Button Type - тип кнопки Normal: нет никакого поведения по
умолчанию.
Submit: Когда активизировано, представленная кнопка представляет форму. Reset: Когда активизировано, кнопка сброса перезагружает все средства управления к их начальным значениям. OnClick: С этим выбором Вы можете связать кнопку с дополнительным сценарием. Действие OnClick Здесь Вы можете определить какое действие связано со случаем кнопки OnClick:
Проверка правильности веб-форм Для проверки правильности формы используется Form Validation У WYSIWYG Web Builder есть некоторые очень сильные инструментальные средства проверки правильности, чтобы проверить правильность пользовательского ввода для EditBox, Combobox, Radio Button, Checkbox, CAPTCHA и TextArea. Помимо проверки правильности JavaScript, есть также встроенная поддержка проверки правильности HTML5! Подробнее о проверке правильности форм - См. авторскую справку программы. Процедура, применяемая в WYSIWYG Web Builder, может оказаться для многих пользователей довольно сложной. Намного проще использовать специализированные программы для создания веб-форм - см. Веб-формы Input
Mask
Новое в WYSIWYG Web
Builder 17Добавлена функция Input Mask (Маска ввода) в поле редактирования. Маска ввода помогает пользователю с вводом, обеспечивая предопределенный формат (это может быть полезно для дат, чисел, телефонных номеров и т. д.) В чем разница между масками ввода и правилами проверки? Маски ввода связаны с форматированием; правила проверки касаются правильности значений Примечание:
между проверкой и маской ввода нет прямой связи, поэтому
вам нужно убедиться, что комбинация маскирования и проверки имеет смысл.
Эта функция основана на Inputmask Робина
Херботса.Порядок переходов в веб-форме Когда пользователь нажимает клавишу Tab, браузер перемещает фокус ввода с элемента на элемент, чтобы элементы отображались в коде HTML. Однако вы можете изменить порядок перехода. В этом случае вы можете пронумеровать поля, используя атрибут tabindex. Обычно первый пункт перехода (tabindex) начинается со значения «1». Чтобы исключить элемент из порядка табуляции, установите значение tabindex равным -1. В этом случае элемент пропускается, когда пользователь перемещается по форме. Для установки порядка переходоа по элементам формы используйте Строку меню (Menu Bar) - меню Arrange - Set Tab Order in Forms (Расстановка объектов в форме) Опция 'Set Tab Order'
("установить
порядок табуляции") может быть использована для быстрой установки
порядка табуляции в формах.
Вот как это работает: 1) Сначала выберите форму.
2) Затем выберите опцию "'Set Tab Order" в меню (также эта опция доступна в контекстном меню формы). 3) Web Builder теперь будет отображать текущий индекс каждого элемента формы, который поддерживает атрибут tabindex. Если индекс вкладки еще не задан, он показывает 'Not Set' ("не задан"). 4) Теперь выберите каждый объект в нужном порядке. Новый индекс будет отображаться автоматически. Лейбл (Label) Элемент лейбла введен в WYSIWYG Web Builder
11.Лейбл HTML (<label>) представляет заголовок для элемента веб-формы (editbox, textarea, combobox, checkbox, radio button, file upload). Для вставки лейбла используйте Панель вставок - раздел Form Controls - Label. При двойном щелчке по лейблу открываются его свойства. Advanced Button Advanced Button (расширенная кнопка) дает вам гораздо больше контроля над внешним видом и поведением кнопки. Вы можете изменить цвет фона, использовать форматированный текст (как в текстовом объекте) или даже активировать команды JavaScript. Из настроек - название, значение, отправленное с формой, Тип кнопки, действие "по щелчку" (перйти к окну, на указанную страницу, перезагрузка и пр.), подсказки при наведении курсора, стиль и другое. Параметр disabled отключает управление для ввода пользователем. Следующие свойства являются адаптивными- Видимость, Положение объекта, Размер объекта, задний план, цвет границы, Радиус границы, Тень коробки. Новое в WYSIWYG Web
Builder 16Расширенная кнопка (Advanced Button) - Новая функция: добавлена возможность использовать расширенную кнопку в качестве ссылки. URL-адрес ссылки можно задать в настройках «Ссылка» (Link). Это может быть полезно, если вы хотите создать кнопку многострочной ссылки. Подробнее Форма и расчеты  В
WYSIWYG Web Builder 12 введеы функции "Показать / Скрыть /включить/
Выключить" (Show/hide/enable/disable)
объекты в зависимости от значения/выбора поля ввода формы. Также
введена функция вычисления значений на основе значений/выбора других
полей.Например, вы можете отключить кнопку отправки формы до тех пор, пока пользователь заполняет форму. Несколько условий могут быть добавлены к объекту. Также можно сделать расчеты в полях формы. Вычисления доступны в разделе 'Conditions' ("Условия") полей ввода. Их можно использовать для вычисления значения на основе значений или выборок других входных полей. Например, для расчета общей цены товара в интернет-магазине на основе выбранных параметров. Условия / расчеты параметры доступны для Editbox, TextArea, Combobox, Checkbox (флажков) и Radio Button (переключателей). Подробнее о новом при создании веб-форм (англ. язык) Добавлена поддержка переменных в теме сообщения электронной почты (PHP почтовой программы или форматированного текста должна быть включена). Добавлена возможность установить свойство ID для скрытых полей. Добавлена возможность включать название страницы/referrer в данные формs. Добавлена опция для настройки автоответчика поля ввода электронной почты. В
WYSIWYG Web Builder 12 можно настроить стиль и размер кнопок
Checkbox/Radio Button. Это также делает эти кнопки отзывчивыми при
создании сайта для разных экранов, поэтому что Checkbox/Radio
Button могут иметь разный размер (и цвет) в контрольных точках. Этот новый режим может быть отключен с
использованием стилей браузера
по умолчанию' (это возможно для старых проектов для обратной
совместимости). Улучшено: максимальный размер файла теперь
устанавливается в сценарии
вместо использования скрытого поля формы для лучшей безопасности.- Улучшено: теперь также можно использовать переменные в теме сообщения электронной почты (PHP Mailer или rich text должен быть включен). - Новая функция: добавлена возможность установить свойство ID для скрытых полей. - Новая функция: добавлена возможность включать название страницы / refferer в данные формы. - Новая функция: добавлена возможность настройки поля ввода электронной почты автоответчика. - Новая функция: добавлена опция 'Full Width' ("полная ширина") в Editbox, TextArea, Combobox, Label и Button. Это позволяет переключаться между блоком (100%) и встроенным режимом (фиксированная ширина) при использовании в сетке макета. - Новая функция: добавлена возможность отправлять данные формы на адрес электронной почты на основе выбора в выпадающем списке. Пользователи могут выбрать 'department' ("отдел") из раскрывающегося меню и отправить электронное письмо только на адрес электронной почты этого отдела. Условия
формы и расчеты (Form
Conditions и Calculations)- Новая функция: добавлены 'Conditions' (условия)'. Это позволяет отображать/скрывать/включать / отключать другие объекты на основе значения или выбора поля ввода формы. Например, можно отключить кнопку отправки формы, пока пользователь не установит флажок. Новое в WYSIWYG Web Builder 14 Условия формы (Form Conditions)- Новая функция: добавлены условия 'Less than' and 'Greater than' ("меньше" и "больше"). Также можно создать отдельные диапазоны. - Новая функция: добавлены условия 'else ("еще"). Это может использоваться в сочетании с 'equal to', 'not equal to', 'greater than' and 'less than' ('равно', 'не равно', 'больше чем' и 'меньше чем'). - Новая функция: добавлено свойство "From" во встроенные настройки процессора форм. Это установит 'to ("от") в адрес электронной почты отправленных сообщений на указанный адрес электронной почты. Если оставить поле пустым, то оно будет работать так же, как и в предыдущих версиях: либо будет использоваться ввод 'email' (если он существует), либо адрес 'кому'. - Новая функция: добавлен Set envelope-from address for PHP mail() with the -f option ("установить конверт-от адреса для PHP mail() с опцией-f") в form properties (свойствах формы) - Свойства формы (Form Properties )-> дополнительно (Advanced) -> разное (Miscellaneous). Это заменяет параметр PHP7 в Свойствах страницы. Он служит той же цели. - Новая функция: добавлена проверка ввода на стороне сервера - Свойства формы (Form Properties )-> дополнительно (Advanced) -> разное (Miscellaneous). Это добавляет дополнительную безопасность форме, также проверяя входные данные на стороне сервера (используя PHP). Эта функция использует те же параметры, что и JavaScript (на стороне клиента) проверки. Новое в WYSIWYG Web Builder 15 Flip
- переключатель
«Переключатель» (FlipSwitch) может
использоваться при создании веб-формы в качестве альтернативы
для флажка. Создан по типу флажка iPhone. Имеет несколько вариантов
оформления. Для вставки переключателя на страницу используйте Панель вставок (Toolbox) - раздел Form Controls - FlipSwitch. Для настройки свойств используйте Инспектор свойств. Образцы переключателей Новое для Flip Switch - теперь можно использовать переключатель для
переключения между светлой и темной цветовой схемой. ПодробнееВеб - формы - Новая функция: добавлен параметр «Создать адаптивную форму с использованием сеток макетов» в Мастере веб-формы. Мастер форм теперь может создавать гибкие / адаптивные формы. Опция будет выбрана автоматически, когда страница уже содержит сетки макетов. - Новая функция: добавлена опция Spacing («Интервал») в Мастере веб-формы. Это устанавливает интервал между элементами управления созданной формы. - Новая функция: добавлена возможность установить диалог (jQuery UI или Bootstrap) в качестве цели формы. Это позволяет отображать страницу успеха или ошибки во всплывающем окне. Добавьте диалоговое окно на страницу и выберите идентификатор диалога в целевом свойстве формы. Весь необходимый код будет сгенерирован автоматически! Посмотреть пример Обучение - Новая функция: добавлены новые переменные сайта для настройки сообщений об ошибках формы: $FORMERROR_EMAIL$, $FORMERROR_URL$, $FORMERROR_FILESIZE$ - Новая функция: добавлена опция 'Do not allow URLs in form data (Не разрешать URL в данных формы). Эта опция может помочь предотвратить спам, блокируя сообщения, содержащие ссылки. Кнопка - Новая функция: добавлена возможность использовать кнопку (веб-форма) в качестве ссылки. Хотя эта кнопка в основном предназначена для использования с формами, многие пользователи запрашивали эту функцию, поэтому теперь она (наконец) стала возможной. См. также: Создание
веб-форм (видео)
Создание формы с отправкой файлов на Web Builder (видео) Формы обратной связи и страницы (видео) Полная настройка формы подписки Как использовать Карусель для создания многостраничной формы? • Форма часто задаваемых вопросов • Создание формы • Как использовать Мастер форм? • Обновлено: Проверка ввода формы. • Формировать условия и расчеты • Создание корзины покупок на PHP с помощью WYSIWYG Web Builder. • Как использовать PHP для сбора данных форм. • Создание формы со всплывающим подтверждением. • Поля ввода формы. • Маска ввода • Автозаполнение • Новое: Функции защиты от спама в формах. • Новинка: Область форматированного текста. --------------------------------- Поисковая оптимизация (SEO) • Добавьте расширенные фрагменты кода на свой веб-сайт с помощью структурированных данных (schema.org). • SEO-помощник SEO Assistant • Добавление файла robots.txt на ваш сайт. • Добавление карты сайта на ваш сайт. Доступные рсширения: Random Question CAPTCHA CAPTCHA предназначена для защиты
от спама и отображает случайный
вопрос, на который необходимо ответить, прежде чем пользователь сможет
отправить форму.
См. CAPTCHA reCAPTCHA v2 reCAPTCHA v2-это новая версия
reCAPTCHA. Вместо ввода текста
пользователи теперь могут использовать один клик, чтобы подтвердить,
что они не робот.
См. reCAPTCHA HTML Area Pro Простой способ добавить
визуальный онлайн-редактор в свои формы! HTML.
Area Pro поддерживает несколько популярных редакторов: CKEditor,
TinyMCE, CLEditor.
См. HTML Area Pro MySQL Connector MySQL Table Editor Используя редактор таблиц MySQL,
вы можете добавлять, редактировать,
просматривать или удалять записи таблицы MySQL. Существует также
встроенная опция поиска!
См. MySQL Table Editor Последнее обновление: январь
2024 г.
|
||||||
|
|||||||
