Главная HTML Форма

Форма

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

Парный тег <form>...</form> устанавливает форму на веб-странице.

Синтаксис: 
<form атрибуты>
   элементы формы
</form>

Атрибуты тега <form>

Атрибут Значение Описание
action = URL
(полный или относительный путь к файлу на сервере)

Серверный файл содержит сценарий на стороне сервера, обрабатывающий данные формы.

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

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

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


<form action= "mailto:vasya@pupkin.ru" enctype="text/plain">
  <input type="submit" value="Отправить письмо">
</form>
method 		= get (по умолчанию) - Означает, что передаваемые данные будут присоединены к URL-адресу через разделитель в виде символа "?" в адресной строке. Этот метод используют при передаче небольших объемов данных.
(<form action="" method="get">)

Пример адресной строки:
https://www.google.ru/search?q=%D1%82%D0%B5%D0%B3&ie=utf-8
или
https://www.google.ru/search?q=тег&ie=utf-8

Это - строка запроса "тег" в Google.
Данные формы видны в адресной строке.
= post
 - Этот метод применяется для пересылки данных больших объемов, в частности, сообщений электронной почты, а также конфиденциальной информации и паролей. Данные, отправляемые с помощью этого метода, не видны в заголовке URL, так как они содержатся в теле сообщения.
Различия между методами GET и POST
GET POST
Ограничение на объём 4 Кб Ограничения задаются сервером.
Передаваемые данные Видны сразу всем. Видны только при просмотре через расширения браузера или другими методами.
Кэширование Страницы с разными запросами считаются различными, их можно кэшировать как отдельные документы. Страница всегда одна.
Закладки Страницу с запросом можно добавить в закладки браузера и обратиться к ней позже. Страницы с разными запросами имеют один адрес, запрос повторить нельзя.

enctype 		Метод кодирования данных, передаваемых на сервер.
Используется для указания MIME-типа данных.

MIME - стандарт, описывающий передачу различных типов данных по электронной почте.
= "application/x-www-form-urlencoded" Все символы кодируются перед отправкой формы.
Вместо пробелов ставится +, символы вроде русских букв кодируются их шестнадцатеричными значениями.
(Значение по умолчанию)
= "multipart/form-data" Данные не кодируются. Это значение применяется при отправке файлов.
= "text/plain" Пробелы заменяются знаком +, буквы и другие символы не кодируются.
Для текстовых данных.
Рекомендуется для передачи данных по электронной почте.
= "text/html" Данные HTML.
name = имя - Имя формы, которое будет использоваться для доступа к элементам формы через сценарии.
novalidate novalidate Отключает проверку в кнопке для отправки формы. Атрибут используется без указания значения.
target = _parent,
= _blank,
= _top,
= _self (по умолчанию).		 - Имя окна или фрейма, в котором следует показать форму. (Определяет, где показать ответ, полученный после отправки формы).

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

<iframe name="area" width="300" height="100"></iframe>
<form action="test.php" method="post" target="area">
. . .
</form>

Элементы формы:

  • Тег <input> определяет пользовательское поле для ввода информации.
  • Тег <textarea> определяет поле формы для создания области многострочного ввода.
  • Тег <button> используется для размещения кнопки внутри формы.
  • Тег <select> устанавливает элемент управления для создания раскрывающегося (выпадающего) списка.
  • Тег <option> определяет пункты раскрывающегося списка, установленного тегом <select>.
  • Тег <optgroup> используется для группировки связанных данных в раскрывающемся списке, установленного тегом <form>.
  • Тег <label> устанавливает текстовую метку для элемента <input>.
  • Тег <fieldset> используется для группирования связанных элементов в форме. Рисует прямоугольник вокруг связанных элементов.
  • Тег <legend> определяет заголовок для элемента <fieldset>.

Форма обратной связи

Для отправки формы на сервер используется кнопка Submit.

Когда форма отправляется на сервер, управление данными передается программе, заданной атрибутом action тега <form>. Программа обработки формы может быть написана на любом серверном языке вроде PHP, Python, C# и др.

Паред отправкой формы браузер подготавливает информацию в виде
пары «имя=значение», где
«имя» определяется атрибутом name тега <input>;
«значение» = значению, введенному пользователем в поле формы.


Форма обратной связи 
<body>
                    
<form action="form.php" method="post" target="_blank">
<fieldset>
  <legend>Форма обратной связи</legend>
  <p><input type="text" name="username" required placeholder="Ваше имя"></p>
  <p><input type="text" name="email" required placeholder="Ваш e-mail"></p>
  <p>Сообщение:<br>
  <textarea name="message" rows=2 cols=20>
  </textarea></p>
  <p><input type="submit" value="Отправить">
  <input type="reset" value="Очистить"></p>
</fieldset>
</form>

</body>

"form.php" —> файл обработчика формы.

Форма обратной связи

Результат

Форма обратной связи

Сообщение: