//
HTML Forms Tutorial //www.w3schools.com
Submit a form in WordPress without plugin //www.readymadecode.com
- Стилизация флажков и переключателей с использованием CSS3 //habr.com
Отправка форм при помощи JavaScript //developer.mozilla.org
//
Основне
Елементи
Елемент <form>
//
| accept-charset | Устанавливает кодировку, в которой сервер может принимать и обрабатывать данные |
| action | Адрес программы или документа, который обрабатывает данные формы |
| autocomplete | Включает автозаполнение полей формы, необязательный, значение по умолчанию устанавливается в настройках браузера
|
| enctype | Способ кодирования данных формы, необязательный, по умолчанию 'application/x-www-form-urlencoded'
|
| method | Метод 'POST' протокола 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
//
|
1 |
<form id="my_form" method="POST" enctype="multipart/form-data" action="https://reks.biz/my-form.php"> |
Элемент <textarea></textarea>
Элемент реализует возможность ввода многострочного текста
|
1 2 |
<textarea name="message" rows="10" cols="30"> </textarea> <textarea name="message" style="width:200px; height:600px;"> </textarea> |
//
Элемент <input>
Важными атрибутами элемента формы являются:
- form - устанавливает принадлежность элемента форме по id в элементе <form>
- type - устанавливает тип элемента формы
- по умолчанию 'text'
- id - идентификатор
- name - имя значения формы, которое будет отправлено формой,
- общее имя может объединять несколько элементов формы типа radio
- использоваться в формуле output-элемента
- value устанавливает значение элемента, которое используется в зависимости от типа элемента формы
- checked - устанавливает элемент типа checkbox или radio в выбранное состояние, при котором элемент или группа name получают значение value
- readonly - для строковых типов делают значение value не редактируемым
- disabled - устанавливает недоступность элемента
- required - делает элемент обязательным, требует установить элементу какое-либо значение перед отправкой формы
- для типа radio один из элементов должен быть выбран
- для типа checkbox флажок должен быть установлен
- placeholder - создает фоновую надпись в элементах строкового типа
- autofocus - назначает элемент !!! Указывает, что раскрывающийся список должен автоматически получать фокус при загрузке страницы
- hidden - скрывает элемент, исключая из потока, при сохранении всех свойств
Cтроковые типы
- <input type="text"> - тип по умолчанию, реализует возможность ввода теста в одну строку
- ?cols="40" rows="5"
- <input type="password"> строковое значение с символами скрытыми под ********
- <input type="email"> строковое значение
- <input type="search"> строковое значение, элемент в правой части отображает кнопку X для сброса значения
- <input type="tel"> строковое значение
- <input type="url"> строковое значение
- <input type="number"> строка для числового значения, ограниченная символами [+-0-9.eE]
- <input type="hidden"> - элемент представляет именованное значение в составе формы, которое не отображается, но будет отправлено с остальными данными
Шаблон
Атрибут pattern применим к input-элементам типов: text, tel, email, url, password и search. Значение pattern определяет регулярное выражение, которое применяется к введенному значению. Результат
- pattern
выбор
- <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)
|
1 2 |
<label for="consent" >My responses are compiled and ready to be sent:</label> <input type="checkbox" id="consent" value="1" > |
Элемент <datalist>
Элемент реализует выбор значения из набора возможных строковых значений, которые могут быть выбраны в выпадающем списке input-элемента, а затем отредактированы произвольным способом.
- value задает начальное значение и фильтр отбора на опции списка
|
1 2 3 4 5 6 7 |
<input list="browsers"> <datalist id="browsers" value="o" > <option value="Netscape"> <option value="Opera"> <option value="Firefox"> <option value="Chrome" selected > </datalist> |
Элементы <select>, <option>, <optgroup>
Элемент реализует выбор значения представленного ...
|
1 2 3 4 5 6 7 |
<select name="example"> <optgroup label="Группа 1" > <option value="value1" >Вариант 1.1</option> </optgroup> <option value="value3" selected >Вариант 2</option> <option value="value4" >Вариант 3</option> </select> |
//
Картинки в выборе
Очевидный способ разместить <img> в <option> не дает результат, тем не менее отобразить картинку можно используя свойства background-image и padding:
|
1 2 3 |
<select> <option style="padding-left: 16px; background-image:url(uk-flag.svg);">Ukraine</option> ... |
Элемент <fieldset> и <legend>
//
|
1 2 3 4 |
<fieldset> <legend>Personalia:</legend> ... </fieldset> |
Тег <button> создает на веб-странице кнопки и по своему действию напоминает результат, получаемый с помощью тега <input> (с атрибутом type="button | reset | submit"). В отличие от этого тега, <button> предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML, в том числе изображения. Используя стили можно определить вид кнопки путем изменения шрифта, цвета фона, размеров и других параметров.
Теоретически, тег <button> должен располагаться внутри формы, устанавливаемой элементом <form>. Тем не менее, браузеры не выводят сообщение об ошибке и корректно работают с тегом <button>, если он встречается самостоятельно. Однако, если необходимо результат нажатия на кнопку отправить на сервер, помещать <button> в контейнер <form> обязательно.
Атрибуты <button>:
- accesskey назначает горячую клавишу для нажания кнопки
- autofocus устанавливает получение фокус кнопкой после загрузки страницы
- disabled блокирует возможность нажатия кнопки
- form устанавливает связь кнопки с формой
- formaction - задаёт url-адрес, на который пересылаются данные формы при нажатии на кнопку типа 'submit'
- formenctype - Способ кодирования данных формы.
- formmethod - Указывает метод пересылки данных формы.
- formnovalidate - Отменяет проверку формы на корректность.
- formtarget - Открывает результат отправки формы в новом окне или фрейме.
- name - Определяет уникальное имя кнопки.
- type - тип кнопки устанавливает ее действие
- 'button' - обычная
- 'reset' - для очистки формы
- 'submit' - для отправки данных формы на сервер
- value - Значение кнопки, которое будет отправлено на сервер или прочитано с помощью скриптов.
По умолчанию кнопка формы получает тип submit и вызывает action формы:
|
1 |
<button formmethod="POST" formaction="https://reks.biz/my-form-button.php">Click to call button Action</button> |
формы:
|
1 |
<button>Click to call Action in Form tag</button> |
Важно: Если в форме в элементе <button> явно не указать type="button", то по умолчанию кнопке будет установлен тип "submit" и в этом случае обработчик onclick может не вызываться, а форма будет выполнять отправку данных и перезагрузку документа!
//
|
1 |
<button id="form_submit_button" form="my_form">Click to call Action in Form tag</button> |
//
|
1 |
<button type="button" onclick="alert('Button is clicked')">Click to call onclick event</button> |
//
|
1 |
//
df
Элемент <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>
Свойства
!!! Свойство aria-label используется для указания текстовой метки (label), которая описывает цель или назначение поля ввода для пользователей с ограниченными возможностями или технологиями ассистивных устройств, таких как скринридеры
Стили CSS
Изменение вида checkbox и radio
Штатная визуализация состояния элементов типа radio и checkbox может быть полностью отключена:
|
1 2 3 |
-moz-appearance:none; -webkit-appearance:none; -o-appearance:none; |
Элемент формы в фокусе обозначается рамкой свойства outline, которое устанавливается аналогично свойству border, при этом отступ рамки устанавливает свойство outline-offset, которое не оказывает влияние на геометрию компоновки:
|
1 2 3 |
input[type="checkbox"]:focus { outline: 2px solid red; outline-offset: 3px; } |
Цвет флажков и переключателей управляется атрибутом accent-color, а размер атрибутами width и height.
Изменение вида
Простой способ заменить checkbox/radio цветным квадратиком/кружком (автоматически связан с размером шрифта подписи):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<style> label.checkable-span input { display: none; } label.checkable-span span { font-size: 100%; border: 0.2em solid black; background: none; padding: 0 0.5em; margin-right: 0.3em; } label.checkable-span [type="radio"]:checked + span, label.checkable-span [type="checkbox"]:checked + span { background-color: red; } label.checkable-span:focus { outline-offset: 5px; outline: 2px solid #ffb133; } </style> <label class="checkable-span" tabindex="0"> <input type='checkbox'> <span></span>CHECK ME</label> |
Простой способ заменить checkbox/radio изображениями из файла:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<style> label.checkable { padding-left: 20px; background-position: top left; background-repeat: no-repeat; padding-right: 16px; } label.checkable:has(input[type="checkbox"]) { background-image: url("check0.svg"); } label.checkable:has(input[type="radio"]) { background-image: url("radio0.svg"); } label.checkable:has(input[type="checkbox"]:checked) { background-image: url("check1.svg"); } label.checkable:has(input[type="radio"]:checked) { background-image: url("radio1.svg"); } label.checkable input[type="radio"], label.checkable input[type="checkbox"] { display: none; } label.checkable:focus { outline-offset: 5px; outline: 2px solid #ffb133; } </style> <label class="checkable" tabindex="0"><br> <input type="checkbox"/>CHECK ME</label> |
Изменение вида select и option
Изменение стиля отображения элементов select и option содержит много нюансов, начиная с того, что не все средства работают:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
option { padding: 10px; border: 1px solid #EEE; } option:hover { /* не работает ! */ color: #FFF; background-color: #FF0 !important; } option:checked { /* работает не всегда и/или не сразу */ color: #FFF; background-color: #F00; } |
//
Обязательный элемент
Селектор псевдокласса :required реагирует на свойство required в элементе. И напротив, селектор псевдокласса :optional реагирует на отсутствие этого свойства.
Проверка значения
К элементам с проверкой значения свойством pattern применимы css-селекторы псевдоклассов :valid и :invalid (:-moz-submit-invalid, :-moz-ui-invalid)
)
input:invalid {
border: red solid 3px;
}
Отправка формы /Submit
При нажатии клавиши Enter в любом элементе формы или на кнопке submit-типа мыши или клавиши Space происходит отправка данных введенных в элементы формы. Отправка выполняется POST-запросом по URL указанному в свойстве формы action. В запрос включаются данные под именами указанными в элементах в атрибуте name.
- если у нескольких элементов значение name совпадает, будут отправлены данные последнего элемента
- если элемент checkbox не был выбран, его name данные не отправляются
- если в группе name ни один элемент radio не был выбран, name данные не отправляются
- элементы text отправляются с пустым значением, даже если никакой текст не был введен
Для принудительной отправки невыбранного значения элементами radio или checkbox следует в начале формы использовать скрытый элемент с таким же name, атрибутом checked и значением value, соответствующим отсутствию выбора, которое будет отправлено по умолчанию, если видимый checkbox-элемент не будет выбран. Аналогичный прием применим и в группе radio-элементов:
|
1 2 |
<input name='myExample' value='0' checked hidden > <input type='checkbox' name='myExample' value='1' > |
Для предотвращения отправки при нажатии Enter !!!!!!!!!!!!!!
Логин и пароль
Элементы ввода атрибутов авторизации на сайте могут сохранятся менеджерами паролей браузера, для этого они должны использовать регламентированные имена:
|
1 2 |
<input type="text" name="username" /> <input type="password" name="password" /> |
Менеджер паролей ассоциирует значения логина и пароля с доменом страницы и будет заполнять значения элементов с этими именами автоматически.
Кроме того, эти элементы попадут под действие специальных селекторов стиля браузера (например, в Google Chrome user agent stylesheet определен селектор input:-internal-autofill-selected), которые имеют более высокий приоритет и могут подавлять свойства стиля заданные страницей.
Скрипт веб-страницы
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>]
Пример обхода в документе для всех форм, для всех имен значений, всех элементов для вывода выбранных значений:
|
1 2 3 4 5 6 |
for (theform of document.forms) { for(thename of theform.elements) { for(input of thename) { if ((!input.hidden) && (input.checked)) { console.log("for " + input.name + " is checked " + input.value); }}}} |
Элемент
Значения элемента формы можно получить с помощью свойства .value объекта элемента.
!!!Парный элемент <textarea> !!! свойство textContent !!! не проверял !!!
Radio
Простейшее получение значения элементов input-radio при единственной форме:
|
1 2 3 |
var myRadio = document.querySelector('input[name="my-radio"]:checked'); if( myRadio !== null ) { return myRadio.value; |
Расширенный алгоритм:
|
1 2 3 4 5 |
var myForm = document.forms['my-form']; var myRadios = form.elements['my-radio']; for( var i = 0; i < myRadios.length; i++ ) if (myRadios[i].checked) return myRadios[i].value; |
Свойство readonly
Если элементу в html-разметке назначено свойство readonly, js-скрипт может и отменить, и установить его действие:
|
1 2 3 |
<input id="element" type="text" value="abcd" readonly /> ... document.getElementById('element').readOnly = false; |
События
Обработчик события oninput элемента вызывается на любое изменение в значении элемента и до завершения редактирования. В примере для элемента <textarea> реализована автоматическая оптимизация высоты элемента для границы толщиной 1px:
|
1 |
<textarea oninput="this.style.height=(this.scrollHeight+2)+'px';" >...</textarea> |
Данные формы
Данные формы можно обработать собственными скриптами.
В AJAX сборка данных формы и асинхронная отправка реализуются очень компактно:
|
1 2 3 4 5 6 |
$.ajax({ url: "https://reks.biz/mypost.php", type: "POST", data: $("#myform").serialize(), success:function(content){myFunction(content);} }); |
Общий пример сборки данных формы конструктором FormData() и асинхронной отправки данных объектом XMLHttpRequest (тип содержания по умолчанию multipart/form-data):
|
1 2 3 4 5 6 7 8 9 10 11 |
var xhr = new XMLHttpRequest(); var formData = new FormData( document.getElementById( "myform" )); xhr.open( "POST", "https://reks.biz/mypost.php", true ); xhr.onreadystatechange = function () { if ( xhr.readyState == 4 && xhr.status == 200 ) // on success: document.getElementByID( "status", xhr.responseText ); else if (xhr.readyState == 4 && xhr.status != 200) { // on fail: }; xhr.send(formData); |
Объектная реализация:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
class Demo { SubsystemsUpdate() { this.RequestGet( 'poll/ui-subsystems.php', 'subsystems', this.SubsystemsUpdateResponse ); } RequestGet( onready ) { var xhr = new XMLHttpRequest(); xhr.open( 'GET', 'https://reks.biz/myget.php', true); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) onready.call( this, xhr.responseText ); }.bind( this ); xhr.send(); } SubsystemsUpdateResponse( response ) { let suit = JSON.parse( response ); this.DocumentElementsUpdate( suit ); } DocumentElementsUpdate( suit ) { //... } } |
Скрипт на сервере
Отправка формы выполняется HTTP запросом POST
Модуль WordPress
Обработчик общего запроса WordPress (POST/GET) находится в пакете /wp-admin/admin-post.php. Он предназначен для штатной обработки подтверждения форм в темах и плагинах.
Обработчик вызывает для незарегистрированного пользователя событие admin_post_nopriv, а для зарегистрированного admin_post. Кроме того, если в форме есть элемент с именем action, то его значение используется для вызова еще одного из двух событий admin_post_nopriv_(action) или admin_post_(action).
Доступ
При создании собственного модуля обработки следует проверить настройки фильтрации доступа в .htaccess, которые в некоторых случаях могут препятствовать передаче параметров из формы в скрипт.
Джерела