Экстракт форм на WordPress

//

//

Основное

Элементы

Элемент <form>

//

accept-charset Устанавливает кодировку, в которой сервер может принимать и обрабатывать данные
action Адрес программы или документа, который обрабатывает данные формы
autocomplete Включает автозаполнение полей формы, необязательный, значение по умолчанию устанавливается в настройках браузера

  • 'on'
    Включает автозаполнение текста.
  • 'off'
    Отключает автозаполнение. Это значение обычно используется для отмены сохранения в браузере важных данных (паролей, номеров банковских карт), а также редко вводимых или уникальных данных (капча)
enctype Способ кодирования данных формы, необязательный, по умолчанию 'application/x-www-form-urlencoded'

  • 'application/x-www-form-urlencoded'
    ??? пробелы заменяются на "+", национальные символы кодируются ?UTF-8
  • 'multipart/form-data'
    Данные не кодируются. Это значение применяется при отправке файлов
  • 'text/plain'
    пробелы заменяются на "+", буквы и другие символы не кодируются
method Метод протокола HTTP
name Имя формы
novalidate Отменяет встроенную проверку данных формы на корректность ввода
target Имя окна или фрейма, куда обработчик будет загружать возвращаемый результат

<form>
<fieldset>...</fieldset>
</form>

<form>
<input type="text" name="search" placeholder="Search..">
</form>

При использовании формой метода POST (method="post") атрибут enctype указывает, как данные формы должны быть закодированы при отправке на сервер:

  • application/x-www-form-urlencoded Default. All characters are encoded before sent (spaces are converted to "+" symbols, and special characters are converted to ASCII HEX values)
  • multipart/form-data This value is necessary if the user will upload a file through the form
  • text/plain Sends data without any encoding at all. Not recommended

Элемент <textarea></textarea>

Элемент реализует возможность ввода многострочного текста

//

Элемент <input>

Важными атрибутами элемента формы являются:

  • form - устанавливает принадлежность форме по id
  • type - устанавливает тип элемента формы
    • по умолчанию 'text'
  • id - идентификатор
  • name - имя значения формы, которое будет отправлено формой,
    • общее имя может объединять несколько элементов формы типа radio
    • использоваться в формуле output-элемента
  • autofocus - назначает элемент !!! Указывает, что раскрывающийся список должен автоматически получать фокус при загрузке страницы
  • disabled - устанавливает недоступность элемента для изменения
  • required - определяет, что значение элемента должно быть установлено перед отправкой формы
    • для типа radio один из элементов должен быть выбран
    • для типа checkbox флажок должен быть установлен
  • placeholder - создает фоновую надпись в элементах строкового типа
  • checked - устанавливает выбранное состояние элементу типа radio и checkbox
  • hidden - скрывает элемент, сохраняя его влияние на данные
Cтроковые
  • <input type="hidden">
  • <input type="number">
  • <input type="password">
  • <input type="email">
  • <input type="search">
  • <input type="tel">
  • <input type="text"> - тип по умолчанию, реализует возможность ввода теста в одну строку
    • ?cols="40" rows="5"
  • <input type="url">
выбор
  • <input type="range">
  • <input type="color">
дата и время
  • <input type="date">
  • <input type="time">
  • <input type="datetime-local">
  • <input type="month">
  • <input type="week">
Выбор из диапазона числовых значений /range 

<input type="range"> реализует выбор; значение

  • autocomplete
  • list
  • max
  • min
  • step
  • IDL атрибуты
    • list,
    • value
    • valueAsNumber
Переключатели "радиокнопки" /radio

<input type="radio"> реализует выбор; значение свойства name объединяет элементы типа radio в группу, в которой только один элемент может быть выбран

  • checked Предварительное выделение переключателя. По определению, набор переключателей может иметь только один выделенный пункт, поэтому добавление checked сразу к нескольким полям не даст особого результата. В любом случае, будет отмечен элемент, находящийся в коде HTML последним.
  • name Имя группы переключателей для идентификации поля. Поскольку переключатели являются групповыми элементами, то имя у всех элементов группы должно быть одинаковым.
  • value Задаёт, какое значение будет отправлено на сервер
    • при отсутствии значения выбранный элемент отправит значение 'on'
Флажки "чекбоксы" /checkbox

<input type="checkbox"> -

  • checked Предварительное выделение флажка
  • name Имя флажка для его идентификации обработчиком формы
  • value задаёт значение для отправки выбранным элементом на сервер
Файл <input type="file">
Кнопочные
  • <input type="button">
  • <input type="image">
  • <input type="submit">
  • <input type="reset">

<input type="text" id="fname" name="fname">

Элемент <label>

Элемент этикетки выводит надпись связанную с input-элементом. Элемент этикетки чувствителен к клику и устанавливает связанный input-элемент типа radio и checkbox.

  • accesskey - реализует доступ к элементу формы с помощью горячей клавиши, конкретная реализация зависит от браузера, чаще реализуется комбинация Alt+<accesskey>
  • for - идентификатор id связанного элемента (не имя name)

Элемент <datalist>

Элемент реализует неисчерпывающий список возможных строковых значений, которые могут быть выбраны в выпадающем списке input-элемента и отредактированы произвольным способом.

 

Элементы <select>, <option>, <optgroup>

Элемент <fieldset> и <legend>

//

Элемент <button>

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

Тег <button> создает на веб-странице кнопки и по своему действию напоминает результат, получаемый с помощью тега <input> (с атрибутом type="button | reset | submit"). В отличие от этого тега, <button> предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML, в том числе изображения. Используя стили можно определить вид кнопки путем изменения шрифта, цвета фона, размеров и других параметров.

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

Атрибуты

  • accesskey  назначает горячую клавишу для нажания кнопки
  • autofocus  устанавливает получение фокус кнопкой после загрузки страницы
  • disabled  блокирует возможность нажатия кнопки
  • form  устанавливает связь кнопки с формой
  • formaction - задаёт url-адрес, на который пересылаются данные формы при нажатии на кнопку типа 'submit'
  • formenctype - Способ кодирования данных формы.
  • formmethod - Указывает метод пересылки данных формы.
  • formnovalidate - Отменяет проверку формы на корректность.
  • formtarget - Открывает результат отправки формы в новом окне или фрейме.
  • name - Определяет уникальное имя кнопки.
  • type - тип кнопки устанавливает ее действие
    • 'button' - обычная
    • 'reset' - для очистки формы
    • 'submit' - для отправки данных формы на сервер
  • value - Значение кнопки, которое будет отправлено на сервер или прочитано с помощью скриптов.

Элемент <output>

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

  • for (element_id) определяет список имен элементов, от которых зависит вычисляемое значение элемента
  • form (form_id) определяет принадлежность элемента форме по идентификатору формы
  • name (name) определяет имя элемента для использования в формулах

<output name="x" for="a b"></output>

Элемент

@media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
padding: 20;
}
}

<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>

Стили CSS

Цвет флажков и переключателей управляется атрибутом accent-color, а размер атрибутами width и height.

Отправка формы /Submit

При нажатии клавиши Enter в любом элементе формы или на кнопке submit-типа мыши или клавиши Space происходит отправка данных введенных в элементы формы. Отправка выполняется POST-запросом по URL указанному в свойстве формы action. В запрос включаются данные под именами указанными в элементах в атрибуте name.

  • если у нескольких элементов значение name совпадает, будут отправлены данные последнего элемента
  • если элемент checkbox не был выбран, его name данные не отправляются
  • если в группе name ни один элемент radio не был выбран, name данные не отправляются
  • элементы text отправляются с пустым значением, даже если никакой текст не был введен

Для принудительной отправки невыбранного значения элементами radio или checkbox следует в начале формы использовать скрытый элемент с таким же name, атрибутом checked и значением value, соответствующим отсутствию выбора, которое будет отправлено по умолчанию, если видимый checkbox-элемент не будет выбран. Аналогичный прием применим и в группе radio-элементов:

Для предотвращения отправки при нажатии Enter !!!!!!!!!!!!!!

Модуль

Обработчик общего запроса WordPress (POST/GET) находится в пакете /wp-admin/admin-post.php.  Он предназначен для штатной обработки подтверждения форм в темах и плагинах.

Обработчик вызывает для незарегистрированного пользователя событие admin_post_nopriv, а для зарегистрированного admin_post. Кроме того, если в форме есть элемент с именем action, то его значение используется для вызова еще одного из двух событий admin_post_nopriv_(action) или admin_post_(action).

Доступ

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

Скрипты

https://metanit.com/web/javascript/10.1.php

Для JavaScript все формы документа доступны по значению form в свойстве forms, которое содержит итерируемую коллекцию типа HTMLCollection:

  • в документе по имени формы document.<form>
  • в коллекции форм по имени формы document.forms.<form>
  • в коллекции форм по ключу document.forms['<form>']
  • в коллекции форм по индексу document.forms[<index>]

Для вызова JavaScript доступны методы формы

  • searchForm.submit() отправляет данные формы по URL указанному в action
  • searchForm.reset() сбрасывает значения всех элементов в начальное состояние

Все элементы в форме сгруппированы и доступны по значению name в свойстве формы elements, которое содержит итерируемую коллекцию типа HTMLFormControlsCollection:

  • в форме по имени значения document.<form>.<name>
  • в коллекции значений по имени document.<form>.elements.<name>
  • в коллекции значений по ключу document.<form>.elements['<name>']
  • в коллекции значений по индексу document.<form>.elements[<index>]

Пример обхода в документе для всех форм, для всех имен значений, всех элементов для вывода выбранных значений:

Реализация произвольной формы без применения плагинов

Источник: Submit a form in WordPress without plugin //www.readymadecode.com

WordPress позволяет реализовать форму с произвольным составом на произвольной странице штатными средствами. Для этого на странице необходимо разместить form-элемент, у которого атрибут action указывает на штатный обработчик запросов POST/GET форм в темах и плагинах, например: action="https://reks.biz/wp-admin/admin-post.php".

Пример реализации form-элемента php-скриптом:

Также в форме необходимо разместить скрытый input-элемент с именем name="action" , у которого атрибут значения value должен содержать суффикс (action) хуков admin_post_(action) и admin_post_nopriv_(action). Пример для вызова хука admin_post_nopriv_demo_form:

Штатный обработчик не запросов POST/GET ничего не возвращает, поэтому для реализации редиректа в форме необходимо разместить еще один скрытый input-элемент с заданным именем (например: "base_page") и значением value, содержащим URL редиректа. Пример, реализация редиректа на домашнюю страницу сайта php-скриптом:

В код модуля  functions.php необходимо добавить обработчик process_demo_form() и добавить его к хукам неавторизованного и авторизованного запроса:

Обработка редиректа после Submit???

//

Источники

Leave a Reply