Атрибут formmethod в HTML


Содержание

Атрибут formmethod в HTML

Обязательный атрибут: нет.

Пример HTML: применение атрибута method

Поддержка версиями HTML

Версия: HTML 4.01 HTML 5 XHTML 1.0 XHTML 1.1
Поддержка: Да Да Да Да

Поддержка браузерами

Браузер: Internet Explorer Google Chrome Mozilla Firefox Opera Safari
Версия: 6.0 и выше 2.0 и выше 2.0 и выше 9.2 и выше 3.1 и выше
Поддержка: Да Да Да Да Да

Copyright © 2010-2015 seodon.ru Все права защищены.

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

Атрибут formmethod в HTML

Значение атрибута method не зависит от регистра. Различают два метода — get и post.

get Этот метод является одним из самых распространенных и предназначен для получения требуемой информации и передачи данных в адресной строке. Пары «имя=значение» присоединяются в этом случае к адресу после вопросительного знака и разделяются между собой амперсандом (символ &). Удобство использования метода get заключается в том, что адрес со всеми параметрами можно использовать неоднократно, сохранив его, например, в закладки браузера, а также менять значения параметров прямо в адресной строке. post Метод post посылает на сервер данные в запросе браузера. Это позволяет отправлять большее количество данных, чем доступно методу get, поскольку у него установлено ограничение в 4 Кб. Большие объемы данных используются в форумах, почтовых службах, заполнении базы данных, при пересылке файлов и др.

Обязательный атрибут

Значение по умолчанию

Пример. Метод отправки данных формы

Браузеры: Настольные Мобильные ?

Internet Explorer Chrome Opera Safari Firefox
3 1 3.5 1 1
Android Firefox Mobile Opera Mobile Safari Mobile
1 1 6 1

Браузеры

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Элемент Form

Описание

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

Из всех атрибутов элемента два являются особенно важными, они используются во всех формах: action и method . Атрибут action указывает на расположение скрипта, который обрабатывает информацию, передаваемую браузером при отправке данных формы. Скрипт может быть написан на любом языке, исполняемом на стороне сервера.

Атрибут method указывает метод отправки данных формы. Рекомендуется использовать метод POST , потому что он скрывает отправляемую информацию и позволяет передавать двоичные данные. Тем не менее, в некоторых частных случаях необходимо использовать метод GET .

Кроме этого HTML тег form представляет собой контейнер для других элементов управления. Ниже приведен их перечень:

  • button: кнопка, при нажатии которой могут выполняться различные действия в зависимости от значения атрибута type . А именно:
  • submit: отправляет данные формы на сервер;
  • reset: сбрасывает значения всех элементов управления к состоянию по умолчанию;
  • button: не выполняет никаких действий;
  • menu: выводит меню.
  • fieldset: группирует наборы элементов управления по определенному критерию;
  • input: в зависимости от значения атрибута type данный элемент управления может использоваться для различных целей:
  • hidden: скрытый элемент управления, используемый для передачи информации на сервер, как правило, управляется скриптом;
  • text: элемент управления, используемый для ввода фрагмента текста одной строкой;
  • search: используется для ввода поисковой строки;
  • tel: элемент управления тега form , используемый для предоставления номера телефона;
  • url: текстовое поле, используемое для ввода одного абсолютного URL-адреса ;
  • email: элемент управления, предназначенный для редактирования одного или нескольких адресов электронной почты;
  • password: текстовое поле для ввода паролей, в котором символы скрыты точками;
  • datetime: элемент управления для ввода даты и времени;
  • date: элемент управления для ввода определенной даты;
  • month: элемент управления для ввода определенного месяца;
  • week: элемент управления для ввода определенной недели;
  • time: элемент управления для ввода о времени;
  • number: элемент управления для ввода определенного числа;
  • range: для ввода одного или двух чисел в указанном диапазоне;
  • color: для ввода цвета;
  • checkbox: для ввода логического значения ( истина / ложь );
  • radio: элемент управления, используемый для выбора одного из нескольких вариантов;
  • file: элемент управления, используемый для загрузки файлов на сервер;
  • submit: кнопка для отправки данных HTML тега form ;
  • image: то же самое, что submit , но с возможностью вывести вместо кнопки по умолчанию пользовательское изображение;
  • reset: кнопка, используемая для сброса значений элементов управления формы;
  • button: кнопка без назначенного действия по умолчанию.
  • keygen: элемент управления, используемый для генерации открытой / секретной пары ключа;
  • label: используется для вывода подписей для элементов управления формы;
  • object: объект представления и отображения вложенного контента;
  • output: элемент управления, используемый для просмотра результатов вычислений, выполняемых на странице, или результатов взаимодействия пользователя с различными элементами управления формы;
  • select: элемент управления для выбора одного или нескольких вариантов из списка;
  • textarea: элемент управления, используемый для ввода фрагмента текста, состоящего из одной или более строк;
  • img: используется для вывода изображения.

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

Примеры

В следующих примерах мы рассмотрим некоторые из атрибутов тега form с несколькими элементами управления.

В нашем первом примере создается простая форма авторизации с тремя элементами: текстовое поле, поле для ввода пароля и кнопка отправки данных. Тег form action и method указывают местоположение скрипта, отвечающего за обработку данных формы, и метод, используемый для их отправки.

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

Во втором примере мы добавим в тег form новые элементы управления ( пару переключателей и три чекбокса ). Мы также добавим кнопку reset , чтобы вы могли поэкспериментировать с элементами управления, изменяя их значения и снова сбрасывая с помощью кнопки.

Также мы будем использовать элемент label . С его помощью мы можем связать текст с элементом управления. Самый простой способ сделать это — заключить и текст, и элемент управления в открывающийся и закрывающийся тег.

В следующем примере мы немного изменим предыдущий HTML тег form форму, чтобы добавить некоторые из новых элементов управления HTML5 : выбора даты, поле ввода номера телефона и выбор цвета. Кроме этого мы сгруппируем элементы управления с помощью fieldset .

Обратите внимание, что мы используем для атрибута method значение « GET » просто для разнообразия. Это позволит при открытии нового окна с результатами обработки данных формы увидеть в адресной строке браузера пару имя / значение.

Что-то наподобие этого: «?fullname=john&birthdate=15/10/2002&…» .

И, наконец, мы создадим тег form с возможностью загрузки файла. В этом примере нам нужно обратить внимание на пару атрибутов: method , который может принимать только значение « POST «, так как это единственный метод, который может передавать двоичные данные. И enctype , который должен иметь значение « multipart/form-data «. Если данная настройка не соблюдается, загрузка файлов будет невозможна.

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

Атрибуты

Специальные атрибуты тега form :

ACCEPT-CHARSET

Разделенный пробелами список кодировок символов, которые должны использоваться в форме. Список должен быть отсортирован по приоритетности.

Пример

AUTOCOMPLETE

Одно из двух значений этого атрибута тега form указывают браузеру, должен ли он отображать варианты для поля ввода элемента управления. Браузеры обычно выполняют это действие, извлекая данные из базы, содержащей введенные ранее. Возможно два значения, оба не зависят от регистра:

  • on: браузер должен автоматически предлагать варианты. Это значение по умолчанию;
  • off: браузер не должен автоматически предлагать варианты.

Пример

ENCTYPE

Значение, указывающее метод, который будет использоваться для кодирования данных при отправке формы. Возможны три значения, которые не зависят от регистра:

  • application/x-www-form-urlencoded: пробелы заменяются знаком плюс ( «+» ), а специальные символы преобразуются в значения HEX . Это значение по умолчанию;
  • multipart/form-data: кодирование не производится. Указывается при загрузке файлов;
  • text/plain: только пробелы заменяются знаком плюс ( «+» ).

Пример

METHOD

Метод, который должны использовать браузеры для отправки данных формы. Возможны три значения, без учета регистра:

  • get: данные прикрепляются к URL-адресу ( указанному в атрибуте action ). Пары имя-значение добавляются в виде « name=value » и отделяются одна от другой знаком амперсанда ( «&» ). Вся строка добавляется к URL-адресу после знака вопроса ( «?» ). Например, строка GET может выглядеть следующим образом: «form-result.php?user=john&pass=123456» ;
  • post: данные прикрепляются к телу запроса;
  • dialog: специальное значение для HTML тег form внутри элемента dialog . Указывает браузеру закрыть диалоговое окно после отправки формы. Результаты должны обрабатываться с помощью скриптов.

Пример

Имя формы. Это значение не может быть пустой строкой и должно отличаться от имен других форм.

Пример

ACCEPT

Указывается разделенный запятыми список разрешенных типов контента. Это может быть полезно при загрузке файлов для фильтрации на стороне клиента типов файлов.

Пример

Данная публикация представляет собой перевод статьи « FORM ELEMENT » , подготовленной дружной командой проекта Интернет-технологии.ру

HTML | method Attribute

The HTML method Attribute is used to specify the HTTP method used to send data while submitting the form. There are two kinds of HTTP methods, which are GET and POST. The method attribute can be used with the element.

Attribute Values:

  • GET: In the GET method, after the submission of the form, the form values will be visible in the address bar of the new browser tab. It has a limited size of about 3000 characters. It is only useful for non-secure data not for sensitive information.
  • POST: In the post method, after the submission of the form, the form values will not be visible in the address bar of the new browser tab as it was visible in the GET method. It appends form data inside the body of the HTTP request. It has no size limitation. This method does not support bookmark the result.

Syntax:

Example 1: This example illustrates the use of GET method attribute.

Атрибут formmethod в HTML

Пояснения к примеру

  • action=»» — говорит о том, что обработка данных будет происходить на этой же странице.
  • — атрибут type=»radio» говорит о том, что нужно отобразить текст после этого кода, как кнопку выбора. Атрибут name и value в данном теге для нас сейчас играют маленькую роль, т.к. мы не изучаем сейчас php (см. уроки php).
  • — атрибут type=»text» говорит о том, что это будет текстовое поле. Здесь так же есть два важных атрибута: name (для php) и value (значение по умолчанию).
  • — атрибут type=»textarea» говорит о том, что это будет большое текстовое поле. Разница от предыдущего случая лишь в том, что он позволяет записывать большой объем текста.
  • — атрибут type=»submit» говорит о том, что это кнопка. В атрибуте value пишется то, что будет написано на кнопке.

Более подробно про все эти элементы можно прочитать в 15 уроке: элементы тега , где рассмотрены радиокнопки, списки, флажки, текстовые поля, кнопки.

Теперь рассмотрим подробно все атрибуты тега .

Атрибуты и свойства тега

1. Атрибут accept-charset=»Кодировка» — определяет кодировку, в которой сервер может принимать и обрабатывать данные формы. Может принимать различные значения, например, CP1251, UTF-8 и т.п.

2. Атрибут action=»URL» — адрес скрипта, который обрабатывает передаваемые данные от формы. Если оставить это значение пустым, то данные будут обрабатываться в этом же документе, где расположена форма.

3. Атрибут autocomplete=»on/off» — задает или отключает автозаполнение формы. Может принимать два значения:


  • on — включить автозаполнение;
  • off — выключить автозаполнение;

4. Атрибут enctype=»параметр» — задает способ кодирования данных. Может принимать следующие значения:

  • application/x-www-form-urlencoded — вместо пробелов ставится +, символы вроде русских букв кодируются их шестнадцатеричными значениями
  • multipart/form-data — данные не кодируются
  • text/plain — пробелы заменяются знаком +, буквы и другие символы не кодируются.

5. Атрибут method=»POST/GET» — задает метод отправки. Может принимать два значения:

  • GET — передача данных в адресной строке (есть ограничение по объёму отправки данных)
  • POST — посылает на сервер данные в запросе браузера (может отправить большое количество данных, т.к. нету ограничения объёма)

Более подробное описание методов передачи через GET и POST читайте в уроках по PHP: использование методов GET и POST.

6. Атрибут name=»имя» — задает имя формы. Чаще всего используется в случае наличия множества форм для того, чтобы можно было обратиться к конкретной форме через скрипт.

7. Атрибут novalidate — отменяет встроенную проверку данных формы на корректность ввода.

8. Атрибут target=»параметр» — имя окна или фрейма, куда обработчик будет загружать возвращаемый результат. Может принимать следующие значения:

  • _blank — загружает страницу в новое окно браузера
  • _self — загружает страницу в текущее окно
  • _parent — загружает страницу во фрейм-родитель
  • _top — отменяет все фреймы и загружает страницу в полном окне браузера

Уважаемый читатель, теперь Вы узнали гораздо больше о html теге form. Теперь советую перейти к следующему уроку.

HTML5 атрибуты форм (часть 2)

Дата публикации: 2020-03-09

От автора: данная статья является выдержкой из книги HTML5 и CSS3 для реального мира, 2-е издание за авторством Алексиса Гольдштейна, Луи Лазариса и Эстель Вейль. Книгу можно найти в магазинах по всему миру, а также купить цифровую версию.

Атрибут pattern

Атрибут pattern задает регулярное выражение, которому должны удовлетворять вводимые пользователем данные, чтобы быть валидными. С помощью атрибута pattern можно ограничить данные на все поля, где доступен ввод текста в произвольной форме.

Язык регулярных выражений в шаблонах по синтаксису тот же, что и в JS на основе Perl за исключением того, что атрибут pattern должен удовлетворять всему значению, а не какому-то внутреннему набору. При использовании шаблонов пользователю необходимо сообщать разрешенные символы.

Глобальный атрибут title имеет особое значение в паре с pattern. В настоящий момент браузеры отображают значение атрибута title при наведении курсора в виде тултипа. Инструкции же в шаблоне более детальны, чем плейсхолдеры, и формируют более связное разъяснение. Атрибут title будет отображаться с сообщением об ошибке по умолчанию в браузерах с поддержкой нативной валидации. Об это мы поговорим в следующей главе.

Заметка: регулярные выражения

Регулярные выражения – функция большинства языков программирования, с помощью которой разработчики могут задавать шаблоны символов и проверять, подходит ли заданная строка под этот шаблон. Для новичков регулярные выражения просто темный лес. Например, выражение для проверки строки на значение цвета в формате hex выглядит следующим образом: #[A-Fa-f0-9]<6>.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

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

В качестве базового примера давайте добавим атрибут pattern на поле с паролем в нашей форме. Нужно, чтобы пароль был минимум 6 символов без пробелов:

Запись \S означает «любой символ кроме пробела», а <6,>значит «минимум 6 раз». Хотите обозначить максимальное количество символов, можно использовать интервал, например, \S<6,10>.

Как и required, атрибут pattern запрещает отправку формы, если есть несоответствия с шаблоном. Также выскочит сообщение с ошибкой.

Если вы задали неправильное регулярное выражение, оно будет проигнорировано в целях валидации.

Атрибут pattern поддерживается в некоторой степени во всех браузерах, начиная с Firefox 4, Safari 5, Chrome 10, Opera 11, IE10 и Android 2.3. Под «в некоторой степени» понимается, что сейчас все браузеры поддерживают pattern. Однако Safari и Android до версии 4.4 позволяют отправку форм с невалидными данными.

Илон Маск рекомендует:  Что такое код asp defaultdocfooter

Кроме того, как с placeholder и required, вы можете использовать значение этого атрибута для JS валидации в браузерах без поддержки.

Атрибут disabled

Булев атрибут disabled появился задолго до HTML5, но в этой спецификации он был значительно расширен. Атрибут работает со всеми полями формы за исключением нового output. В отличие от предыдущих версий HTML спецификация HTML5 позволяет устанавливать атрибут disabled на тег fieldset, тем самым применяя его ко всем тегам внутри набора.

Как правило, контент полей с disabled выделен серым цветом по умолчанию. Браузеры не разрешают полям с disabled получать фокус. С помощью этого атрибута часто отключают кнопку отправки формы до тех пор, пока не будут правильно заполнены все поля.

Стилизовать отключенные поля можно с помощью псевдокласса :disabled, активные поля с помощью :enabled или :not(:disabled).

Поля с атрибутом disabled не отправляются на сервер, т.е. вы не сможете их обработать. Если необходимо, чтобы пользователь видел значение и мог его отправлять, но не редактировал его, используйте атрибут readonly.

Атрибут readonly

Атрибут readonly похож на disabled: пользователю запрещается редактирование поля. Но в отличие от disabled такое поле может получить фокус, и его значение передается на сервер.

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Атрибут multiple

Наличие атрибута multiple указывает на то, что в поле можно вбить несколько значений. Атрибут был доступен и в предыдущих версиях HTML, но применялся только к тегу select. В HTML5 атрибут можно применять к типам file, email и range. Если атрибут есть, то можно выбрать более одного файла, прописать несколько адресов электронной почты через запятую. У диапазона в таком случае будет два слайдера.

Атрибут multiple для типа file поддерживается во всех браузерах с mobile Safari 7 и IE10, но на полях типа range на момент написания статьи данный атрибут еще не поддерживается ни в одном браузере.

Заметка: пробелы или запятые?

Вы могли заметить, что на клавиатуре на iOS в полях типа email разрешен пробел. Пробелы недопустимы в адресах, но браузеры разрешают разделять несколько адресов с помощью пробела и обязательной запятой. Изначально пробелы были запрещены в некоторых браузерах, но позже в спецификацию включили возможность добавления пробела после запятой.

Атрибут form

Не путать с тегом form. Атрибут form в HTML5 позволяет связать элементы с формами, в которые они не вложены. То есть теперь можно ассоциировать набор полей или одно поле с любой другой формой в документе. Этот атрибут решает старую проблему с невозможностью вкладывать формы. Сами формы все еще вкладывать нельзя, но можно ассоциировать «вложенные» поля с формой, которая не является им прямым родителем.

В качестве значения атрибут form принимает ID тега form, с которым нужно ассоциировать набор или одно поле.

Если атрибут отсутствует, поле будет передано вместе с той формой, в которую оно вложено. Если атрибут form был сначала добавлен, а потом удален, используйте el.removeAttribute(‘form’), а не el.setAttribute(‘form’, »). Если атрибут form вставлен, но пустой или ведет на неверный ID формы, поле будет исключено из отправки из всех форм, в том числе и из формы-предка.

Атрибут поддерживается во всех браузерах с Android 4 и IE 11.

Атрибут autocomplete

Атрибут autocomplete отвечает за то, будет ли форма или ее поля заполняться автоматически. Для большинства полей функционал реализуется через выпадающий список, который появляется, как только пользователь начинает печатать. С полями типа password атрибут сохраняет пароль в браузер.

Если autocomplete не указан в форме или полях, то значение по умолчанию ставится в on. Вы могли заметить это, когда последний раз заполняли форму. Для отключения автозаполнения используйте autocomplete=»off». Отличная идея для такой чувствительной информации, как номера кредитных карт или данные, которые нельзя повторно использовать, например, CAPTCHA.

Автозаполнение контролируется браузером и игнорирует настройки разработчика. По умолчанию стоит значение on, однако браузер должен активировать автозаполнение для своей работы. Однако если задать autocomplete в off, это переписывает значение on для соответствующих полей формы.

Элемент datalist и атрибут list

Списки данных поддерживаются во всех браузерах, начиная с IE10 и Android 4.4.3 за исключением Safari. В стандартной форме они выполняют общие требования: текстовое поле с заданными опциями автозаполнения. В отличие от select пользователи могут вбить любое значение, но оно будет представлено с помощью заданного набора опций.

Рисунок 1 элемент datalist в Firefox

Для некоторых типов полей типа text и date выпадающий список опций появляется только после начала ввода, как показано на рисунке 4.4. Для типа range браузер будет показывать маленькую засечку возле слайдера, указывая на то, где найдены предлагаемые опции. Для типа color представлены образцы цвета с опцией переключения на стандартный пикер цвета для устройства, если нужно выбрать другой цвет.

Тег datalist, как и select, является списком опций, которые расположены в тегах option. Datalist ассоциируется с input с помощью атрибута list на инпуте. В качестве значения атрибут list принимает ID тега datalist. Тег datalist можно привязать к нескольким полям.

Form и input — теги и их атрибуты для создания различных HTML форм для сайта

Здравствуйте, уважаемые читатели блога Goldbusinessnet.com. В продолжение изучения языка гипертекстовой разметки переходим к рассмотрению тегов form и input с их атрибутами (что представляют из себя эти составляющие HTML кода в общем случае), с помощью которых можно создавать самые разнообразные формы для сайта.

Какой бы тематики и наполнения не был тот или иной вебресурс, на нем с большой вероятностью будут встречаться формы в том или ином виде: текстовые поля, выпадающие меню, различные кнопки или переключатели. К слову, в одной из публикаций я уже повествовал об элементах, помогающих разнообразить формы с помощью тегов select, option, textarea, label, fieldset и legend.

Каково же практическое предназначение всего разнообразия возможных форм? Прежде всего, они нужны для отправки вводимых пользователем данных на сервер с целью их дальнейшей обработки посредством специально созданного скрипта (обработчика).

HTML формы — как они создаются с помощью form и input

Как я уже сказал вначале, какая-нибудь вебформа, а то и сразу несколько, обязательно должны присутствовать на любом мало-мальски развитом вебсайте. Чтобы понять, насколько они важны в свете соответствия веб-ресурса современным требованиям, достаточно привести вам навскидку тройку объектов, где используются формы, основанные на тегах form и input, которые по одному названию не оставляют сомнений в своей необходимости проекту той или иной направленности:

Если перейдете, к примеру, по ссылке на статью о создании обратной связи (позволяющей всем юзерам отправлять сообщения администрации сайта), то там как раз представлен код HTML с парным тегом form, который имеет открывающую () часть:

Здесь form играет важнейшую роль, так как инициирует установку вебформы. Сам по себе он не выводит некую область на веб-странице, но служит контейнером, содержащим другие тэги.

В нашем случае (см.скриншот выше) в их число входит несколько input (этот ХТМЛ тэг является одиночным, иными словами, не имеет закрывающей составляющей), а также textarea, с разными наборами атрибутов. Каждый из них определяет свой элемент, входящий в форму.

Кстати, именно атрибуты, которые бывают обязательными и необязательными, можно считать средством «тонкой настройки», расширяющим функциональные возможности тегов, а значит, и самой вебформы, которая при просмотре в браузере будет иметь такой вид:

Обратите внимание, что однострочные текстовые поля («Ваше имя», «Электронная почта», «Тема сообщения») выведены в том числе благодаря присутствию атрибутов name (c разными значениями «name», «email», «sub») и type («text») наиболее востребованного тега input.

Для многострочного поля применен тег textarea со своими параметрами. Кнопка «Отправить» реализована тем же input в совокупности с атрибутами value и type (со значением «submit»).

После появления такой формы на странице ресурса пользователь сможет вводить в нее данные. Но это еще не все. Требуется обеспечить такие условия, при которых введенная информация передавалась бы на сервер для обработки в результате нажатия кнопки «Отправить».

Если внешний вид формы мы можем создавать с помощью языка гипертекстовой разметки, то обеспечить передачу данных и их обработку средствами ХТМЛ, к сожалению, мы не в силах.

Для этого предназначена программа обработки форм (обработчик), выполняющая эту задачу. Она обычно реализуется в виде скрипта, написанного на языке PHP, содержание коего в каждом конкретном случае зависит от преследуемых целей. В предоставленном мною примере с обратной связью данную роль играет созданный для этого файл mail.php с таким содержимым:

Прежде чем продолжить текстовое изучение материала, посмотрите небольшой видеоролик:

Далее переходим к описанию конкретных элементов, определяющих вид составных частей веб-форм на странице, то есть к тегам и их атрибутам, причем пристальное внимание я уделю тем, которые являются валидными в HTML5, поскольку именно эта версия языка гипертекстовой разметки в ближайшем будущем будет наиболее актуальной.

Атрибуты тега form — action, method, name и другие

Как я уже отмечал выше, любая ХТМЛ форма заключается между открывающим и закрывающим тегами form, который является контейнером, содержащим другие теги. Form имеет ряд атрибутов, некоторые из которых могут принимать различные значения (параметры). Наиболее часто используемыми из них (смотрите третий скриншот вверх отсюда) являются следующие:

1. Action — путь до документа (URL), содержащего скрипт исполнения (обработчик веб-форм). Обязательный атрибут (в HTML5 таковым не является, поскольку пятая версия языка разметки предусматривает ситуации, когда данные для обработки отправляются на текущую страницу). В качестве значения используется абсолютный или относительный путь к файлу на сервере:

2. Method — c помощью этого атрибута обеспечивается способ передачи данных. Собственно, их всего два: get и post, которые и являются параметрами. Метод get (значение по умолчанию) используется для небольших сообщений посредством адресной строки браузера. Тогда как post предназначен для отправки большего объема данных закрытым способом.

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

Далее представлю вам и остальные атрибуты тега form:

4. Accept-charset — определяет кодировку, в которой сервер должен обрабатывать полученные данные. В качестве значения (параметра) данного атрибута выступает название используемого стандарта (UTF-8, Windows-1251 и т.д.).

5. Autocomplete [HTML5] — активирует автозаполнение формы браузером, который в этом случае оставляет в памяти содержание впервые заполняемых полей (чаще логина и пароля), а при необходимости в дальнейшем ввода этих данных автоматически их вставляет в нужные места. Имеет всего два параметра: on — автоматическое заполнение включено, off — выключено.

Замечу, что функция автоматического заполнения может быть вообще отключена в браузере самого пользователя. Тогда присутствие атрибута autocomplete=»on» в коде веб-формы поможет только в случае, если данная опция активирована в настройках обозревателя конкретного юзера.

6. Enctype — задает метод кодирования введенных в форму данных перед отправкой их на сервер. Может быть применено одно из трех значений:

  • application/x-www-form-urlencoded (параметр по умолчанию) — вместо пробелов применяется «+», кодируются все символы кроме букв латинского алфавита и цифр. Например, знаки кириллицы будут преобразованы в нечто, похожее на «%2F%3D%26%3F%2%3D%26%3D»;
  • text/plain — только пробелы заменяются знаком «+», буквы и другие символы кодировке не подлежат;
  • multipart/form-data — информация не кодируется. Данный параметр используется при отправлении файлов на сервер. При этом элемент загрузки файла в форме описывается тегом input с атрибутом type=»file» (подробнее о нем поговорим ниже).

Вот пример кода с применением атрибута enctype со значением «multipart/form-data»:

7. Noval >[HTML5] — это логический атрибут (значения отсутствуют), который отменяет проверку на корректность введенной пользователем информации, отправляемой на сервер:

Вот простой пример. Допустим, пользователь заполняет какую-то форму из большого количества полей, в некоторых из которых (либо во всех) заданы параметры, на основании которых браузер автоматически проверяет правильность введенных данных и при попытке их отправки в случае наличия ошибок выводит сообщение о требовании их исправления.

Так вот, novalidate позволяет зафиксировать всю информацию без необходимости ее немедленной корректировки и оставляет возможность сохранения любых внесенных уже данных с тем, чтобы продолжить заполнение вебформы спустя некоторое время.

8. Target. Результат обработки отправленных на сервер данных, внесенных юзером в форму, расположенную на странице, возвращается в форме HTML документа, который загружается в окно браузера, определяемое значением атрибута target:

  • _blank — в новое окно;
  • _self (параметр по умолчанию) — в то же окно;
  • _parent — во фрейм-родитель. Если таковой отсутствует, то в текущее окно (_self);
  • _top — в полное исходное окно, отменяя при этом все другие фреймы. При отсутствии фреймов в то же окно (_self);
  • framename — в именной фрейм, название которого задается с помощью его атрибута name ( );

Тег input и его атрибуты, расширяющие возможности форм

Теперь рассмотрим input, который является самым распространенным элементом, используемым для создания вебформы и который, как было отмечено, не имеет закрывающего тега. Основной его атрибут — type, который является обязательным и с помощью разных значений (параметров) определяет вид формы на странице веб-ресурса.

Атрибут type и формируемые им элементы — text (текстовое поле), button (кнопка), checkbox (чекбокс), radio (радиокнопка) и другие

ЗНАЧЕНИЕ ОПРЕДЕЛЕНИЕ И КОД ОТОБРАЖАЕМЫЙ ЭЛЕМЕНТ
1. BUTTON Простая кнопка. Надпись оформляется с помощью параметра атрибута value.
2. CHECKBOX Чекбоксы. Позволяют выбрать галочкой один или сразу несколько необходимых вариантов, названия пунктов (A, B, C) реализованы с помощью атрибута value.
3. COLOR [HTML5] Управление палитрой цветов.
4. DATE [HTML5] Ввод календарной даты в формате DD.MM.YYYY (день, месяц и год).
5. DATETIME-LOCAL [HTML5] Выбор даты и времени в формате DD.MM.YYYYThh:mm (день, месяц, год, часы и минуты).
6. EMAIL [HTML5] Поле для ввода адреса электронной почты
ЗНАЧЕНИЕ ОПРЕДЕЛЕНИЕ И КОД ОТОБРАЖАЕМЫЙ ЭЛЕМЕНТ
7. FILE Кнопка выбора файла для последующей загрузки его на сервер
ЗНАЧЕНИЕ ОПРЕДЕЛЕНИЕ И КОД ОТОБРАЖАЕМЫЙ ЭЛЕМЕНТ
8. HIDDEN Скрытое поле, которое не отображается, однако данные в обработчик передаются.
9. IMAGE Поле с картинкой. Нужно указать путь (относительный или абсолютный) до соответствующего изображения на сервере в качестве значения атрибута src. При нажатии картинку данные будут отправлены на сервер.
10. MONTH [HTML5] Ввод месяца и года в формате Month YYYY.
11. NUMBER [HTML5] Выбор отрицательного или положительного числа.
12. PASSWORD Текстовое поле, где символы показываются звездочками. Предназначено для скрытия вводимого пароля.
13. RADIO Переключатели (радиокнопки). Обычно используются при необходимости выбора одного варианта из предложенных. Для установки наименования каждой радиокнопки применен атрибут value.
14. RANGE [HTML5] Ползунок для выбора чисел в указанном диапазоне. Применяются следующие значения по умолчанию, если соответствующие атрибуты не указаны:
  • min = «0»
  • max = «100»
  • value = min + (max — min) / 2, или min, если max
15. RESET Кнопка для возврата данных к первоначальному значению.
16. SEARCH [HTML5] Однострочное поле для поиска.
17. SUBMIT Кнопка для отправки данных.
18. TEL [HTML5] Элемент для указания номера телефона
19. TEXT Текстовое поле для ввода символов
20. TIME [HTML5] Ввод времени в формате hh:mm.
21. URL [HTML5] Специальное поле для указания URL-адреса.
22. WEEK [HTML5] Выбор порядкового номера недели и года (Неделя NN, YYYY)

Если значение type не указано, то по умолчанию будет создано текстовое поле (type=»text»).

Какие еще атрибуты расширяют функционал input

1. Name — служит для идентификации элемента вебформы обработчиком либо при получении доступа к введенным данным посредством скриптов, причем, любой набор символов может быть его значением (конечно, для удобства лучше применять смысловой термин, а не абракадабру).

В качестве примера создадим стандартную форму авторизации для ввода логина и пароля, где для каждого тега input пропишем уникальное название посредством атрибута name («login-x», «password-x», «submit1»). Вот как это будет выглядеть:

2. Accept — задает фильтрацию на виды файлов, которые можно загружать на сервер. Применим исключительно совместно с . Возможны следующий значения:

  • file_extension — расширение файла (.doc, .gif, .jpg, .png, .xls и т.д.);
  • audio/* — аудиофайлы (звуковые);
  • video/* — видеофайлы;
  • image/* — файлы изображений;
  • media_type — наименование MIME-типа (application/json, audio/mp4, image/gif и т.п.).

При необходимости можно указать сразу несколько различных расширений или MIME-типов через запятую, которые выступают в роли параметра. Вот пример с фильтром по всем видеофайлам:

Загрузите видеоролик:

А вот с образец с возможным выбором изображений в форматах JPEG или PNG:

Загрузите картинку (формат JPEG или PNG):

После нажатия пользователем кнопки «Выберите файл» в появившемся окне выбора будут предложены те группы файлов, которые указаны посредством значения атрибута accept.

3. Alt — применяется исключительно с целью создания альтернативного текста для графической кнопки «Отправить» (input type=»image»). Если по каким-то причинам изображение на страницу не загружено, то вместо него будет выведен фрагмент текста, описывающий эту картинку, он и является параметром данного атрибута.

Естественно, наряду с alt и type=»image» (см. таблицу параметров type выше) должен быть указан и атрибут src, где в качестве значения указан относительный либо абсолютный путь до картинки. Без лишних слов к примеру (слева — код, справа — вид кнопки без отображаемой картинки):

4. Autocomplete [HTML5] — дает возможность сохранять данные, введенные пользователями (два значения: on — автозаполнение включено, off — выключено). Если присутствие такого же атрибута в теге form регулирует автоматическое заполнение сразу для всех полей вебформы, то с помощью тега input можно его включить для одних элементов и отключить для других.

В ниже представленном примере для текстового поля (type=»text»), в которое вводится логин, автоматическое заполнение включено, а для области ввода пароля оно отключено. В результате после вторичного посещения страницы юзером, на которой размещена форма авторизации, его логин будет выведен автоматически:

Но механизм автоматического заполнения (autocomplete=»on») будет работать только тогда, когда в браузерных настройках конкретного пользователя включен режим автосохранения (обычно в целях общей безопасности у большинства юзеров эта опция не активирована). Например, в веб-браузере Google Chrome он запускается так («Настройки» — «Пользователи» — «Пароли»):

5. Checked (нет значений) — устанавливает флажки (галочки) для чекбоксов (type=»checkbox») и радиокнопок, или переключателей (type=»radio»). Причем, в пределах одной вебформы можно отметить сколь угодно много чекбоксов (множественный выбор):

И только один переключатель (единичный выбор):

6. Formaction [HTML5] — работает исключительно в связке с type=»image» или type=»submit» тега input (кнопка отправки) и указывает путь до файла, который обрабатывает занесенные в веб-форму данные. Этот путь (URL) служит значением данного атрибута, который по своему действию аналогичен action для тега form, но имеет перед ним приоритет. То есть, при наличии различных параметров обоих атрибутов учитываться будет значение formaction:

Для этого примера вся информация будет обрабатываться именно скриптом, относительный путь до которого (formdata-y) описывается именно атрибутом formaction тега input. При этом элемент action=»formdata» игнорируется веб-браузером.

Еще 4 атрибута (7-10) для input, действия которых тождественны аналогичным элементам для основного тега

Введите ваше имя:

13. List [HTML5] — выводит варианты, которые можно выбирать из списка. Параметром является имя идентификатора id (глобальный атрибут) тега , который служит контейнером для набора тэгов option, каждый из которых определяет свой пункт списка:


14. Max [HTML5] — определяет максимальное значение при вводе числа либо даты, которые выступают в роли параметров. Используются целые положительные и отрицательные числа для атрибутов type=»number», type=»range», а также календарные даты в формате YYYY.MM.DD (год, месяц и день) для type=»date».

15. Min [HTML5] — устанавливает минимально возможное для выбора число или дату. В отношении значений действуют те же правила, что и для атрибута max.

Совместное использование этих двух выше названных атрибутов дает возможность установить диапазон доступных к выбору значений:

Начало события (с 5 по 10 ноября 2020 г.):

Конец события (с 11 по 20 ноября 2020 г.):

Выберите число (от -5 до 5):

Действия следующих 6 атрибутов (пп. 16-21) тега input тождественны или почти совпадают с их воздействием применительно к тегу select.

16. Autofocus [HTML5] (параметры отсутствуют) — логический атрибут, который устанавливает фокус в поле сразу при загрузке вебстраницы, в результате чего можно вводить данные без щелчка по нему кнопкой мышки. Не может быть применен только к input type=»hidden».

17. Disabled (без значений) — отключает для пользователя тот элемент формы, к которому он добавлен. Чаще всего применяется совместно со скриптами, где прописываются условия, при выполнении которых недоступный элемент будет активирован.

18. Form [HTML5] — связывает элемент с формой, когда он располагается вне контейнера . Для связки к тэгу form добавляется глобальный атрибут ).

19. Multiple [HTML5] (параметров нет) — устанавливает возможность множественного выбора для пользователя и применяется только совместно с type=»file» и type=»email».

В случае использования поля для файловой загрузки возможно выбрать сразу несколько файлов с компьютера, задействовав клавиши Ctrl или Shift. Если же выводится поле для ввода адреса электронной почты (type=»email»), то вводить эмейлы следует через запятую.

20. Required [HTML5] (значения отсутствуют) — активирует обязательность внесения данных пользователем. Поэтому браузер блокирует отправку вебформы, если обязательное поле остается пустым и выводит соответствующее сообщение о необходимости его заполнения.

Данный атрибут не используется для графических и стандартных кнопок (type=»button | image»), а также для скрытого поля ввода (type=»hidden»).

21. Size — определяет ширину текстового поля в знаках (подходит лишь для элементов type с параметрами «email | password | search | tel | text | url»). Значение по умолчанию 20 символов.

Следующие четыре атрибута (22-25) для тега input несут практически тот же функционал, что и для многострочного поля textarea, но для полноты картины вкратце упомяну и их.

22. Maxlength [HTML5] — налагает лимит на максимальное количество символов, которое можно вводить при заполнении текстового поля. В случае попытки превысить это ограничение последует блокировка дальнейшего ввода. Этот атрибут применим исключительно для текстовых элементов с type=»email | password | search | tel | text | url».

23. Minlength [HTML5] — накладывает ограничение на минимальное число символов, требуемых ввести в текстовую область. Если последует попытка отправить данные, содержащие меньшее количество знаков, то появится коротенькое сообщение, в котором указано на необходимость дополнить содержание формы и будет дана информация о количестве уже введенных знаков. Условия использования точно такие же, как и в случае с maxlength.

24. Placeholder [HTML5] — можно поместить подсказку (она и будет служить параметром) прямо в текстовое поле, которая пропадет в тот момент, когда пользователь начнет вводить символы. Только для полей, которые формируются посредством параметров email, password, search, text, tel, url атрибута type тэга input.

25. Readonly (параметры отсутствуют) — указывает на то, что предварительно введенный в поле текст доступен только для чтения и копирования. Обычно применяется вместе со скриптами, где прописываются условия, выполнение которых может активировать этот элемент формы.

И в завершение еще несколько атрибутов, дополняющих функционал различных элементов форм:

26. Pattern [HTML5] — в роли своего значения отражает регулярное выражение, на основании которого задаются правила ввода информации. При этом рекомендуется дополнительно добавить глобальный атрибут title, параметром которого внести разъяснительный текст для помощи юзерам при заполнении полей. Pattern применяется только для элементов email, password, search, text, tel, url. Разберемся на примере. Вот код упрощенной формы регистрации (с логином и паролем):

Для поля логина (type=»text») в качестве значения pattern прописано регулярное выражение [A-Za-z]<5,>, которое подразумевает использование знаков латинского алфавита, причем введено должно быть не менее пяти символов.

В отношении текстовой области для пароля (type=»password») задано значение [A-Za-z0-9]<8,>, определяющее ввод исключительно латиницы в любом регистре (большие и маленькие буквы), а также цифр, при этом общее количество всех знаков не должно быть меньше восьми.

При нарушении заданных условий ввода браузер не позволит отправить данные и выведет соответствующее предупреждение:

27. Src — определяет путь до изображения (URL, который является его значением) для отображения графической кнопки «image» (см.таблицу параметров input type выше).

28. Step [HTML5] — устанавливает шаг для элементов, предусматривающих выбор числовых значений (input type=»date | datetime-local | month | number | range | tel | time | week.»).

В качестве параметра может принимать любое целое или дробное число. По умолчанию step=»1″. Чтобы установить конечный диапазон ввода, можно опять-таки использовать атрибуты min и max, упомянутые чуть выше. Для наглядности в тестовую форму включим 2 элемента type=»number». Для первого выставим step=»2″, в для второго step=»0,1″:

Введите значение от -10 до 10:

Введите значение от 0 до 1:

29. Value — устанавливает значение элемента формы, которое будет передано обработчику. На сервер посылается пара «имя-параметр», где имя определяется атрибутом name тега input, а параметр — атрибутом value. При этом для различных элементов формы value будет играть разные роли:

  • для type=»button | reset | submit» — устанавливает текстовую надпись на кнопках;
  • для type=»checkbox | radio | image» — идентифицирует каждый чекбокс, переключатель или графическую кнопку при отправке и обработке данных на сервере;
  • для type=»password | text» — сразу при загрузке формы в поле выводит предварительный текст, который может быть изменен или полностью удален пользователем;
  • для type=»file» (загрузка файлов) не применяется, поскольку не влияет на этот элемент.

Пример использования для каждого из выше перечисленных вариантов:

Выберите CMS: WP Joomla

Здесь значение атрибута value определяет следующие составляющие каждого из элементов: выводит текстовый фрагмент для поля type=»text» («Ваше имя»), идентифицирует каждый из переключателей («1» и «2»), установленных с помощью type=»radio», а также активирует надпись на кнопке («Отправить»).

Пример создания красивой HTML формы

Далее попробую представить вам образец вебформы, в состав кода которой вошли не только сочетания input type с разными значениями, образующие стандартные текстовые поля и кнопки, но и, например, теги label, которые позволяют инициировать наведение фокуса на элемент не только прямым щелчком мышки, но и кликом по тексту.

Обратите внимания, что для получения уникального оформления отдельные компоненты формы помещены в контейнеры div, к каждому из которых добавлены классы с наборами CSS свойств:

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

Более полная информация по созданию данной конкретной формы на этой странице (к слову, там же вы можете не только проверить функциональность отдельных текстовых областей, введя в них данные, но и поэкспериментировать с вебформой, отредактировав HTML-код или/и свойства CSS, полностью либо частично изменив ее внешний вид).

Моей целью было познакомить вас с алгоритмом использования различных значений атрибута type и тега form для создания разнообразных HTML форм на сайте. Надеюсь, задача выполнена. В любом случае, делитесь своими соображениями по этой многообразной теме в комментариях.

Естественно, в последующих публикациях продолжу описание основных тегов гипертекстовой разметки, поэтому не забывайте подписываться на обновление блога посредством e-mail. Также посмотрите для закрепления еще один урок Евгения Попова о создании контактной формы:

HTML-формы. Взгляд бэкенд-разработчика

При подготовке материала по Symfony Form я решил уделить некоторое внимание теоретической части по работе с формами со стороны клиента – что они из себя представляют, как ведут себя браузеры при отправке, в каком формате путешествуют, в каком виде поступают на сервер.

Вводная часть несколько растянулась и в итоге вылилась в отдельную небольшую статью, которая, по моему мнению, может быть интересна и другим бэкенд-разработчикам (не только PHP или Symfony).

В тексте будут использоваться два похожих термина: поле формы и элемент формы. Оба в большинстве случаев взаимозаменяемы и обозначают некоторую часть формы. Но для удобства и порядка полями чаще будут называться части, которые содержат непосредственно значения и, вероятно, будут отправлены на сервер, а элементами – декоративные части формы.

Раньше работа с формами была в каком-то смысле проще: в том виде, в котором форма приходила к пользователю, в том же она отправлялась и обратно, но уже с заполненными полями. Бэкенд-разработчики точно знали какой набор данных им следует ожидать, всё было легко и предсказуемо. С широким распространением JS всё изменилось: сегодня уже никого не удивляет поведение приложения, при котором форма приходит с одним набором полей, а отправляется с совершенно иным, когда громоздкие формы имеют в своём составе небольшие динамические подформы, которые независимо от основной могут отправляться на сервер для обработки, когда выбранные файлы загружаются в фоновом режиме, в то время как пользователь заполняет остальную часть формы. Таким образом, всё большее количество логики переносится на сторону клиента, и это отлично, в первую очередь, конечно же, для пользователя. Для разработчика процесс работы с формами несколько усложнился. Но как бы тяжело ему не было, игнорировать развитие технологий сегодня невозможно, поэтому необходимо уметь эффективно их использовать.

Бэкенд против Фронтенда

Мы постоянно стремимся к автоматизации всего, с чем нам приходится работать, особенно рутинных задач, при этом пытаемся привнести в эти процессы некий порядок. Поэтому многих разработчиков несколько пугает динамичность на клиентский стороне, которая часто воспринимается ими как неконтролируемый хаос. Можно подумать, что у фронтенд-разработчиков развязаны руки, и они могут творить подобно художникам и скульпторам, их действия ничем не ограничены, а нам потом разбирать на сервере полёты их фантазии. Нередко так и случается, но это ошибочный, тупиковый путь. Это можно сравнить со schemaless-хранилищами данных: никто вас не ограничивает жёсткой структурой хранения данных, каждый из разработчиков в рамках одного проекта может придумать свой формат хранения, потом поменять его в зависимости от настроения, что в конечном счёте, скорее всего, приведёт к печальным последствиям. Если же вы ожидаете от своего продукта гибкости, легкой расширяемости и динамичного развития, вам необходимо будет придерживаться определённых правил, которые помогут поддерживать порядок в вашем приложении. То же самое вы в праве требовать и от фронтенд-разработчиков – творите, но придерживайтесь правил.

Итак, что вам, как бэкенд-разработчику, необходимо понять и принять:

    Перестаньте бояться динамики на серверной стороне.
    Мир и технологии не стоят на месте, и если вы не будете успевать под них подстраиваться, вы проиграете. Сегодня неотъемлемая часть нашей жизни, и вам придётся с этим смириться, хотите вы этого или нет. Теперь при работе с формами необходимо ориентироваться не только и не столько на заранее определенную разработчиком жёсткую структуру полей, сколько на пришедшие от пользователей данные.

  • Не вините во всём фронтенд-разработчиков.
    Установите в компании, команде, проекте правила, и тогда у фронтенд-разработчиков будет не меньшая ответственность при работе с формами чем у вас. А ещё лучше, если кроме правил между всеми разработчиками будут доверительные отношения, а все решения будут приниматься в сотрудничестве.
  • Отправляем форму

    Отлично, мы каким-то образом сгенерировали HTML для некоторой формы и отправили её пользователю. Заполнив поля и, возможно, изменив структуру формы, пользователю необходимо отправить её на сервер для обработки. Каким образом он может это сделать? Есть разные способы, большинство из которых потребует выполнения скриптов. Рассмотрим основные:

    1. Нажатие на кнопку отправки формы.
    2. Вызов метода submit() у объекта формы.
    3. Сериализация полей формы.
    4. Создание и формирование произвольного запроса.

    Способы в списке расположены в порядке возрастания прикладываемых фронтенд-разработчиком усилий, необходимых для отправки формы на сервер. Также можно условно разделить их на две группы: первые два способа составляют группу, в которой формированием и отправкой запроса занимается браузер, вторая группа включает последние два способа, при которых эти действия выполняет JS.

    Пусть работает браузер

    Для начала рассмотрим первую группу, оба способа которой мало чем отличаются друг от друга. В этом случае всю работу и ответственность на себя берёт браузер пользователя, причем действует он достаточно прямолинейно:

    1. Определяет форму, поля которой необходимо отправить.
    2. Определяет набор полей, которые подлежат отправке. В этот набор входят следующие элементы формы: button, input, keygen, object, select, textarea.
    3. Генерирует пары ключ=значение, где ключом является имя поля (атрибут name), а значением – содержимое данного поля.
    4. Создает и формирует запрос, который будет выполнен методом, указанным в атрибуте тега формы method и тело которого будет закодировано в зависимости от значения атрибута enctype.
    5. Отправляет запрос на сервер по адресу, указанному в атрибуте тега формы action.

    Определение отправляемой формы зависит от рассматриваемых нами способов. Если это нажатие на кнопку, форма определяется атрибутом form нажимаемой кнопки, а при его отсутствии – родительским для кнопки тегом form. Если же это вызов метода submit(), отправляемой является форма, связанная с объектом, для которого вызывается данный метод.

    Атрибуты formmethod, formenctype и formaction нажимаемой кнопки переопределяют соответственно значения атрибутов method, enctype и action родительской формы.

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

    Из всего списка наиболее интересен третий пункт – генерация пар ключ=значение. Каждый элемент формы должен иметь атрибут name, который будет использован браузером в качестве ключа. Рассмотрим на примере. Имеется следующая форма:

    В этом случае браузер сформирует две пары ключ=значение: nickname=ghost и password=123456. При отправке они будут склеены с помощью символа амперсанда (&), и в результате на сервер будет отправлен запрос, тело которого содержит строку:

    Получив такой запрос, PHP начнёт его разбор, примерный алгоритм которого можно посмотреть в описании функции parse_str. В результате разбора будут определены два поля и их значения, они будут помещены в суперглобальный массив $_POST, который примет следующий вид:

    На что в этом процессе следует обратить внимание:

      Вся поступающая к вам информация будет представлена в виде текстовых значений.
      Какой бы сложной ни была клиентская часть работы с формой, вы в любом случае получите всю информацию в текстовом (строковом) виде. Если это работа с картографическими сервисами, результатом будут координаты. Если это WYSIWYG-редактор, то в зависимости от типа редактора результатом будет либо HTML-код, либо текст в markdown-разметке, либо текст в любом другом заранее известном вам формате. Это важный пункт, осознание которого поможет побороть страх перед громоздкими сложными формами. Разумеется, это не относится к загружаемым файлам.

  • Не все поля, которые содержатся в форме, будут отправлены в запросе.
    Например, есть типы полей, которые не будут включены в запрос, если они не были выбраны или не имеют введённого значения. Такими являются, например, следующие:
    • radio
    • checkbox
    • select с атрибутом multiple

    На данном правиле основан известный хак с полем типа hidden, которое размещается вместе с полем типа checkbox, для корректного определения его состояния при отправке формы. К концу данного списка станет понятно, где надо размещать скрытое поле и почему этот хак работает.

    Также в запрос не будут включены значения кнопок, как обычных, так и submit, которые не участвуют в отправке формы, т.е. те кнопки, по которым не было совершено нажатие. Таким образом, если отправка выполняется методом submit(), в запрос не будет включена ни одна кнопка.

    Не будут отправлены также поля, находящиеся в отключённом состоянии (имеющие атрибут disabled).

    Браузер никак не изменяет имена полей формы при генерации пар ключ=значение.
    Значение ключа в паре зависит исключительно от самого поля, а точнее от его атрибута name, и никакие родительские теги на нёго никак не влияют. Таким образом, не имеет значения, содержит ваш тег form атрибут name или нет. Это также важно для понимания.

    Браузер никак не разрешает конфликты имён у нескольких полей внутри формы.
    И это важный пункт, о котором многие не знают или думают, что знают, но ошибаются.
    Представим, что у нас есть такая форма:

    Многие предполагают, что браузер каким-то образом должен решить, какое одно из двух полей необходимо отправлять в запросе. Логика подсказывает, что отправлять необходимо последнее (в данном случае второе), которое перекрывает все предшествующие поля с тем же именем. Это предположение неверно!
    Браузер вообще не волнует, есть в форме какие-то конфликты имён или их нет. Непустое имя поля не является критерием исключения данного поля из отправляемого запроса. Другими словами, для браузера оба поля являются корректными и оба будут включены в набор отправляемых полей, причем в том порядке, в котором они представлены в форме.
    Таким образом, приведённая выше форма при отправке на сервер примет следующий вид:

    Именно такой запрос и придёт на наш сервер. Вы можете проверить это, прочитав значение php://input. Что же с этим запросом будет делать PHP? Всё как обычно – разбирает строку и формирует массив $_POST. Но, как мы знаем, ключи в массивах уникальны, поэтому первоначальное значение «John Doe» будет перезаписано значением «Mike Ross». В итоге мы получим следующий результат:

    Теперь должно стать понятно, как работает хак со скрытым полем для checkbox. Посмотрим на следующую форму:

    Видим два поля с одинаковыми именами. Если checkbox будет выбран, в запрос будут добавлены оба поля в том порядке, в котором они представлены в форме, а значит значение «0» поля hidden будет перезаписано значением «1» поля checkbox. Если же checkbox выбран не будет, то согласно пункту 2 его значение не отправляется, а значит в запросе будет только поле hidden со значением «0», которое и будет получено на сервере и помещено в массив $_POST.

    Разрешать конфликты имён полей должен разработчик.
    Этот пункт вытекает из предыдущего. Взглянем еще раз на рассмотренный нами пример формы с двумя полями fullname. Представим, что первое поле – это имя менеджера, второе – разработчика. На сервере нам нужны оба значения, но так как PHP перезаписывает одно значение другим, нам необходимо каким-то образом ему помочь корректно разобрать пришедшие данные. Логика подсказывает, что надо менять имена полей. Есть несколько вариантов:

      manager_fullname и developer_fullname – самый простой и очевидный. Имена полей теперь уникальны и не вызовут конфликта при записи в массив $_POST.

    manager[fullname] и developer[fullname] – в этом случае имена также уникальны, но разбор подобных ключей в PHP будет отличаться от первого варианта: если PHP встречает в ключе парные квадратные скобки, он интерпретирует их как массив.
    После разбора $_POST будет выглядеть следующим образом:

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

    fullname[] – интересный вариант: имена полей будут одинаковы, но так как в них содержатся квадратные скобки, PHP поймёт, что перед ним массив значений, и в этом случае поместит все значения в массив $_POST.
    Запрос в этом случае будет выглядеть так:

    Примерный алгоритм разбора такого запроса в PHP:

    Таким образом, массив $_POST будет содержать следующие значения:

    Этот вариант удобно использовать для набора значений неопределенного размера. Например, набор полей типа checkbox.

    Поле с атрибутом multiple передается в запросе как N отдельных полей с одинаковыми именами, где N – количество выбранных значений данного поля.
    Предположим, что у нас имеется следующая форма:

    Форма содержит список, в котором мы можем выбрать несколько вариантов. Допустим, мы выбирали Movies, Cooking и Golf. Можно предположить, что при отправке поля будет использован некий разделитель значений. На самом же деле запрос будет выглядеть следующим образом:

    Т.е. в браузере мы отправляем одно поле с тремя значениями, но серверная сторона видит это как отправку трех полей, которые содержат по одному значению. Очевидно, что согласно пункту 4 массив $_POST будет содержать только одно последнее значение golf, которое перезапишет первые два. Для решения этой проблемы необходимо воспользоваться советом из пункта 5 и изменить имя тега select на «hobbies[]».

  • Поля типа radio с одинаковым именем (атрибутом name) в пределах одной формы будут объединены в группу.
    В этом случае никаких конфликтов имён не будет, т.к. в группе можно выбрать/отметить только одно поле, значение которого и будет отправлено в запросе в паре с именем группы (атрибутом name выбранного поля). Все остальные поля данной группы отмечены не будут, а значит согласно пункту 2 не включаются в отправляемый запрос.
  • За всё ответит разработчик

    Кратко также рассмотрим вторую группу способов отправки форм. Эта группа отличается от первой тем, что созданием, формированием и отправкой запроса занимается непосредственно разработчик. Данная группа имеет лишь отдалённое отношение к рассматриваемой нами теме, так как не имеет жёсткой привязки к HTML-формам: разработчик может включать в запрос и исключать из него любые данные. Способ сериализации полей отличается от полностью произвольного запроса наличием в широко распространённых JS-фреймворках готовых алгоритмов, которые берут на себя большую часть работы. Эти способы удобны при отправке данных форм с использованием Ajax.

    Рассмотрим небольшой пример использования JS-библиотеки jQuery для формирования и отправки формы таким способом.

    Всю основную работу выполняет метод serialize(), который, используя имена и значения полей формы, генерирует следующую строку:

    Почему из пяти полей формы в запрос включаются только два? Поле email не включается, т.к. находится в отключённом состоянии (атрибут disabled), а поля photo и submit – т.к. метод serialize() данной JS-библиотеки не включает файлы и кнопки в набор полей при формировании строки запроса.

    Далее создаём Ajax-запрос с определёнными параметрами и отправляем нашу форму в виде полученной ранее строки. Тут важно понять, что при использовании данного способа от HTML-формы требуется только набор полей с их именами и значениями, все остальные параметры запроса определяет непосредственно разработчик. Таким образом, атрибуты action, method и enctype тега form игнорируются: при вызове метода ajax() мы явно указываем, что данные будут переданы методом POST в обработчик «server.php», а кодирование полей в данном методе по умолчанию – «application/x-www-form-urlencoded».

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

    При использовании этой группы способов формирования и отправки запросов фронтенд-разработчик практически ничем не ограничен. Клиентская часть приложения может, например, передать в запросе лишь некоторую часть формы или передать эту форму в формате JSON, серверная же часть должна уметь корректно обрабатывать такие данные, поэтому для решения подобных задач взаимодействие и координация работы бэкенд и фронтенд-разработчиков должны быть усилены.

    К чему вся эта статья?

    Работа с формами считается одной из самых сложных задач в веб-разработке. Но если чётко понимать, как работают формы, найти удобные, функциональные и гибкие инструменты как для клиентской, так и для серверной части, наладить взаимодействие между бэкенд и фронтенд-разработчиками, задача намного упрощается.

    Эта статья не отвечает на все существующие вопросы, многие не без оснований отметят, что всё описанное — это общеизвестные факты, но надеюсь, что предоставленная информация покажется кому-то полезной и заставит пересмотреть своё отношение к работе с формами, а возможно даже поможет побороть фобию перед ними.

    Атрибут formmethod в HTML

    Внимательно прочитав описания атрибутов, заметим, что большинство из них актуальны при обработке данных формы серверным сценарием. Три атрибута имеют значения по умолчанию (что, вообще говоря, нехарактерно для HTML).

    Все вышеперечисленные атрибуты формально необязательны, однако

    • при работе на стороне клиента необходимо задавать имя формы name , чтобы иметь возможность обращаться к элементам формы из сценария JavaScript;
    • отправка данных формы на сервер требует, как минимум, указания атрибута action , определяющего серверный сценарий обработки.

    Смысл, по крайней мере, двух атрибутов необходимо пояснить более подробно.

    Атрибут method

    Атрибут method имеет два основных возможных значения: get (по умолчанию) и post.

    Смысл этих значений следующий. При передаче данных методом get данные формы отправляются на сервер в заголовке запроса, а при использовании метода post – в теле запроса. Передача текстовых данных может осуществляться любым из этих методов. А вот бинарные данные могут быть отправлены только методом post. Это происходит в случае загрузки файла не сервер (всем понятный пример – приложение к электронному письму). Кстати, в этом случае необходимо указать enctype=”multipart/form-data” (см. далее примечения к атрибуту enctype).

    Итак, за исключением случая передачи бинарных данных, равным образом можно применять оба возможных метода. На сложность разработки серверного сценария, принимающего данные из формы, это никоим образом не влияет. Какой же метод предпочтителен? Имеет смысл внимательно рассмотреть имеющиеся в сети ресурсы и убедиться, что в подавляющем большинстве случаев применяется метод get (например, в поисковых системах). Можно ли считать это негласным эмпирическим правилом? Для ответа на этот вопрос следует сравнить методы get и post по крайней мере в трех аспектах: объем передаваемых данных, безопасность и удобство пользователя.

    1. Необходимо учитывать, что максимальный объем данных, передаваемых методом get , ограничен, в зависимости от настроек протокола, и в любом случае не может превышать 8192 Кб.
    2. Передача конфиденциальной информации методом get, несомненно, представляет определенную угрозу безопасности, так как get-строка остается в журналах всех промежуточных серверов и прокси-сервера.
    3. С другой стороны, можно задуматься, какой вариант удобнее пользователю информационного ресурса.

    При передаче методом get пользователь имеет удовольствие видеть данные формы в адресной строке. Символы, отличные от стандартной латиницы кодируются. Например, пробелу соответствует код %20 . Каждый из нас постоянно наблюдает такую ситуацию, работая с поисковыми системами. Зададим, например в Яndex ключевое словосочетание «язык HTML» и увидим в адресной строке:

    Слово «язык» закодировано последовательностью %FF%E7%FB%EA, а «HTML» передается как есть. Получив такой запрос, соответствующая серверная программа обратится к базе данных и, в конечном счете, сгенерирует и отправит браузеру список результатов поиска. Приятно ли смотреть на такую адресную строку? Нет. Зато пользователь может сохранить уникальную закладку на сгенерированную страницу.

    При передаче методом post данные формы также отправляются на сервер. При этом пользователь не видит в адресной строке ничего «лишнего». Зато появляются другие проблемы: попытка обновить страницу вызывает маловразумительное для большинства пользователей сообщение: «… обновление страницы невозможно без повторной отправки данных…». И закладку не сохранить.

    Резюме. По-видимому, в большинстве типичных задач следует выбирать заданный по умолчанию метод get во всех случаях, кроме передачи на сервер:

    • бинарных данных,
    • конфиденциальной информации,
    • данных большого объема.

    Атрибут enctype

    Этот атрибут имеет два возможных значения:

    • application/x-www-form-urlencoded (по умолчанию)
    • multipart/form-data

    Первое значение используется в абсолютном большинстве случаев. Нет смысла указывать его явно – оно и так предполагается по умолчанию. Второй же тип кодировки ( multipart/form-data ) указывается в единственном случае: при загрузке на сервер бинарного файла. При этом обязательно задание атрибута method=”post” .

    Контактные формы в HTML, тег form и его основные атрибуты

    Здравствуйте, уважаемые читатели сайта Uspei.com. В этом уроке успеем рассмотреть создание контактной формы при помощи html.

    Мы знаем, что html – это язык разметки, он всего лишь указывает браузеру, что и как нужно отображать. А вот что касается отправки данных или их обработки, здесь html бессилен. Он не может обрабатывать данные. Для этого предназначены специальные серверные языки программирования. Например, язык PHP. Поэтому форма регистрации HTML как-то должна быть связана с серверным обработчиком, который и будет данные из формы обрабатывать.

    Принципы работы формы HTML

    Давайте рассмотрим схему работы формы в HTML. Когда человек заходит на сайт и заполняет форму для сайта, получается примерно следующее:

    Т.е. человек заполнил три поля (Имя, e-mail и сообщение) и далее нажимает кнопку «отправить». В этот момент данные отправляются у нас некоему обработчику. Назовем этот обработчик formdata.php Обратите внимание на расширение файла! Он написан на языке php, и именно этот файл будет у нас заниматься обработкой данных, отправленных с формы. Что будет происходить с данными, зависит от того, что за код написан в файле-обработчике. Если, допустим, владелец сайта хочет, чтобы данные отправлялись в виде письма на его электронный ящик, то он прописывает специальную инструкцию в formdata.php для отправки данных на e-mail.

    Но можно, например, создать такую инструкцию, чтобы данные заносились в базу данных.

    Основные теги и атрибуты форм HTML

    В рамках данного урока мы займемся созданием html формы связи, а в следующих уроках коснемся создания обработчика на языке php. Форму для сайта в html мы будем создавать в новом файле, чтобы не путаться в коде. Давайте перейдем в notepad++ и создадим новый документ и сразу вставим в него шаблон html документа.

    Скачайте шаблон html документа html_page_template.

    Дадим документу название формы и сохраним файл под именем form.html.

    Формы создаются с помощью парного тега form примерно так же, как таблицы. У тега form есть обязательные атрибуты, которые мы должны указать.

    Во-первых, это тот самый обработчик, куда мы должны отправлять все данные. Поэтому нам надо его прописать. Атрибут называется action. Для этого атрибута пропишем название файла обработчика formdata.php

    И еще один важный атрибут – это атрибут method. Он отличает за то, каким способом будут отсылаться данные. Способов может быть два. О них мы поговорим в следующих уроках. А пока просто напишем значение POST.

    Также добавим форме имя. За это отвечает атрибут name. Дадим имя форме – form1.

    Теперь наша форма готова. В браузере конечно мы ничего пока не увидим, так как мы еще не добавили ни один элемент формы, но каркас у нас уже готов.

    Создание текстовых полей (тег )

    Продолжим урок с создания простого текстового поля. Если вы обратили внимание, в нашей HTML форме было два таких текстовых поля для ввода имени и e-mail адреса. Как же они создаются?

    Они создаются при помощи тега Input. Запомните этот тег. С помощью него создается большинство элементов формы в HTML. Input переводится как ввод и, чтобы указать конкретный элемент, здесь нужно использовать атрибут type. В данном случае у нас будет обычный элемент для ввода текста. Также для элемента нужно задать имя. В нашем случае назовем это поле name.

    Для нашего поля необходимо дать описание, чтобы посетителю было понятно, что необходимо ввести в поле. Для этого заключим наш тег input в абзац и в тег . Тег label сделает наше описание активным и таким образом, щелкнув на описание, у нас произойдет активация Input и курсор будет переключаться на него. Вот так наша строка будет выглядеть в HTML коде:

    Давайте разберем еще атрибуты для тега input. Следующий атрибут – это size. Без этого атрибута наше поле input имеет фиксированный стандартный размер в 20 символов. Если мы хотим сделать поле более широким, то необходимо указать атрибут size.

    Еще следует отметить такой атрибут, как ограничение на количество символов, которое можно ввести в поле. Допустим, мы хотим ограничить поле для ввода имени 10 символами. Чтобы это реализовать, мы добавляем атрибут maxlength.

    Теперь несмотря на то, что ширина поля позволяет ввести больше символов, мы не сможем превысить размер в 10 знаков.

    Далее давайте пройдем поле для ввода пароля. Оно практически ничем не отличается, за исключением атрибута type. Для пароля type будет password. Поэтому скопируем предыдущую строку и введем необходимые изменения.

    Отличие поля password заключается в том, что вместо символов при вводе в поле выводятся круглые маркеры.

    Вот так будет выглядеть код, который мы набрали:

    А вот так будет выглядеть результат в браузере:

    До встречи! Успевайте всё и всегда на страницах блога Uspei.com

    Помоги проекту — подпишись на наш Яндекс.Дзен канал!

    Илон Маск рекомендует:  Как очистить содержимое canvas'а
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL