Конспект розробки веб-форм

//

//

Основне

Елементи

Елемент <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 Метод '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

//

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

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

//

Элемент <input>

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

  • form - устанавливает принадлежность элемента форме по id в элементе <form>
  • type - устанавливает тип элемента формы
    • по умолчанию 'text'
  • id - идентификатор
  • name - имя значения формы, которое будет отправлено формой,
    • общее имя может объединять несколько элементов формы типа radio
    • использоваться в формуле output-элемента
  • value устанавливает значение элемента, которое используется в зависимости от типа элемента формы
  • checked - устанавливает элемент типа checkbox или radio в выбранное состояние, при котором элемент или группа name получают значение value
  • readonly - для строковых типов делают значение value не редактируемым
  • disabled - устанавливает недоступность элемента
  • required - делает элемент обязательным, требует установить элементу какое-либо значение перед отправкой формы
    • для типа radio один из элементов должен быть выбран
    • для типа checkbox флажок должен быть установлен
  • autocomplete значение on разрешает автозаполнение браузером строковых и текстовых значений, основанном на атрибуте name
  • spellcheckзначение false запрещает проверку браузером синтаксиса строковых и текстовых значений
  • title строковое значение будет всплывать над элементом при hover
  • 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">

Элемент типа file позволяет выбрать один или несколько файлов в локальной системе клиента. После выбора имена файлов отображаются в элементе, а при submit файлы выгружаются на сервер.

  • value получает строку пути выбранного файла или первого в списке файлов
    • путь файла не соответствует реальному путь по соображениям безопасности
    • полный список файлов доступен в свойстве HTMLInputElement.files элемента.
  • accept позволяет установить фильтр на допустимые расширения при выборе файла
  • multiple атрибут без значение делает возможным выбор нескольких файлов
  • files !!! Объект FileList, в котором перечислены все выбранные файлы. В этом списке не более одного элемента, если не указан атрибут Multiple.

//

Examples //developer.mozilla.org/...

Кнопочные

  • <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-элемента, а затем отредактированы произвольным способом.

  • value задает начальное значение и фильтр отбора на опции списка

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

Элемент реализует выбор значения представленного ...

  • multiple делает возможным выбор нескольких значений

//

Картинки в выборе

Очевидный способ разместить <img> в <option> не дает результат, тем не менее отобразить картинку можно используя свойства background-image и padding:

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

//

Элемент <button>

Тег <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 формы:

формы:

Важно: Если в форме в элементе <button> явно не указать type="button", то по умолчанию кнопке будет установлен тип "submit" и в этом случае обработчик onclick может не вызываться, а форма будет выполнять отправку данных и перезагрузку документа!

//

//

//

//

df

Элемент <output>

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

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

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

Элемент <meter>

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

Стилизация элемента не стандартизирована и реализуется для каждого браузера !!!

  • WebKit
    • meter::-webkit-meter-bar { background: red; } !!!
    • meter::-webkit-meter-optimum-value { background: var(--v2-bg2-color); }
    • meter::-webkit-meter-suboptimum-value{ background:orange; }
    • meter::-webkit-meter-even-less-good-value{ background:red; }
  • Mozilla Firefox !!!
    • meter::moz-meter-bar ...

 

Диалог <dialog>

!!! Форма определенная внутри тега <dialog> качественно изменяет свою работу:

  • Форма будет отображаться как модальное окно. Это означает, что она будет затенять остальную часть страницы, пока не будет закрыта.
  • Форма будет автоматически центрироваться на странице.
  • Пользователи смогут закрыть форму, нажав клавишу Esc или кнопку "X" в правом верхнем углу.
  • Форма будет работать как обычно. Пользователи смогут вводить данные и отправлять форму.
    Однако, фокус будет ограничен модальным окном. Это означает, что пользователи не смогут взаимодействовать с элементами на странице за пределами окна, пока оно открыто.

Элемент

@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 может быть полностью отключена:

Элемент формы в фокусе обозначается рамкой свойства outline, которое устанавливается аналогично свойству border, при этом отступ рамки устанавливает свойство outline-offset, которое не оказывает влияние на геометрию компоновки:

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

Изменение вида

Простой способ заменить checkbox/radio цветным квадратиком/кружком (автоматически связан с размером шрифта подписи):

Простой способ заменить checkbox/radio изображениями из файла:

Изменение вида select и option

Изменение стиля отображения элементов select и option содержит много нюансов, начиная с того, что не все средства работают:

//

Обязательный элемент

Селектор псевдокласса :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-элементов:

Блокирование автоматического Submit

Для предотвращения обработки submit и отправки данных при нажатии Enter в элементе формы необходимо на событие подтверждения onsubmit установить обработчик-заглушку:

Логин и пароль

Элементы ввода атрибутов авторизации на сайте могут сохранятся менеджерами паролей браузера, для этого они должны использовать регламентированные имена:

Менеджер паролей ассоциирует значения логина и пароля с доменом страницы и будет заполнять значения элементов с этими именами автоматически.

Кроме того, эти элементы попадут под действие специальных селекторов стиля браузера (например, в 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>]

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

Элемент

Значения элемента формы можно получить с помощью свойства .value объекта элемента.

!!!Парный элемент <textarea> !!! свойство textContent !!! не проверял !!!

Radio

Простейшее получение значения элементов input-radio при единственной форме:

Расширенный алгоритм:

 

Свойство readonly

Если элементу в html-разметке назначено свойство readonly, js-скрипт может и отменить, и установить его действие:

 

События

Обработчик события oninput элемента вызывается на любое изменение в значении элемента и до завершения редактирования. В примере для элемента <textarea> реализована автоматическая оптимизация высоты элемента для границы толщиной 1px:

Данные формы

Данные формы можно обработать собственными скриптами.

В AJAX сборка данных формы и асинхронная отправка реализуются очень компактно:

Общий пример сборки данных формы конструктором FormData() и асинхронной отправки данных объектом XMLHttpRequest (тип содержания по умолчанию multipart/form-data):

Объектная реализация:

Скрипт на сервере

Отправка формы выполняется 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, которые в некоторых случаях могут препятствовать передаче параметров из формы в скрипт.

Джерела

Leave a Reply