Как структурировать html-формы

Что такое форма?

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

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

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

Атрибут formmethod

Html тег

Ввод атрибута определяет HTTP метод для отправки данных формы на URL адрес действия.

Примечание: Этот атрибут переопределяет атрибут method объекта элемента.

Атрибут работает со следующими типами входных данных: submit и image.

Данные формы могут быть отправлены в виде переменных URL адреса (method=»get») или как HTTP post транзакция (method=»post»).

Примечание метод «get»:

Этот метод добавляет данные формы к URL адресу парами имя/значение
Этот метод полезен для отправки форм, когда пользователь хочет добавить результат в закладки
Существует ограничение на количество данных, которые вы можете разместить в URL адресе (зависит от браузера),
поэтому вы не можете быть уверены, что все данные формы будут правильно переданы
Никогда не используйте метод «get» для передачи конфиденциальной информации!
(пароль или другая конфиденциальная информация будет видна в адресной строке браузера)

Примечание метод «post»:

Этот метод отправляет данные формы в виде транзакции HTTP post
Отправленные формы с помощью метода «post» не могут быть помечены закладками
Метод «post» является более надежным и безопасным, чем «get», и не имеет ограничений по размеру

Пример

Форма с двумя кнопками отправки. Первый отправляется данные формы с помощью method=»get».
Второй отправляется данные формы с помощью method=»post»:

<form action=»/action_page.php» method=»get»>
<label for=»fname»>Имя:</label>
<input type=»text» id=»fname» name=»fname»><br><br>
<label for=»lname»>Фамилия:</label>
<input type=»text» id=»lname» name=»lname»><br><br>
<input type=»submit» value=»Отправить GET»>
<input type=»submit» formmethod=»post» value=»Отправить POST»></form>

HTML Tags

Html атрибут target

<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>

Синтаксис¶

Выпадающий список html

Элемент <form> парный, содержимое размещается между открывающим (<form>) и закрывающим (</form>) тегами.

Элемент <form> содержит другие HTML теги, которые определяют способы ввода данных.

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

The Action Attribute

The attribute defines the action to be performed when the form is submitted.

Usually, the form data is sent to a file on the server when the user clicks on the submit button.

In the example below, the form data is sent to a file called «action_page.php».
This file contains a server-side script that handles the form data:

Example

On submit, send form data to «action_page.php»:

<form action=»/action_page.php»> <label for=»fname»>First
name:</label><br> <input type=»text» id=»fname» name=»fname»
value=»John»><br> <label for=»lname»>Last name:</label><br>
<input type=»text» id=»lname» name=»lname» value=»Doe»><br><br>
<input type=»submit» value=»Submit»></form>

Tip: If the attribute is omitted, the action is set to the current page.

HTML Tutorial

HTML HOMEHTML IntroductionHTML EditorsHTML BasicHTML ElementsHTML AttributesHTML HeadingsHTML ParagraphsHTML StylesHTML FormattingHTML QuotationsHTML CommentsHTML Colors
Colors
RGB
HEX
HSL

HTML CSSHTML Links
Links
Link Colors
Link Bookmarks

HTML Images
Images
Image Map
Background Images
The Picture Element

HTML Tables
HTML Tables
Table Borders
Table Sizes
Table Headers
Padding & Spacing
Colspan & Rowspan
Table Styling
Table Colgroup

HTML Lists
Lists
Unordered Lists
Ordered Lists
Other Lists

HTML Block & InlineHTML ClassesHTML IdHTML IframesHTML JavaScriptHTML File PathsHTML HeadHTML LayoutHTML ResponsiveHTML ComputercodeHTML SemanticsHTML Style GuideHTML EntitiesHTML SymbolsHTML EmojisHTML CharsetHTML URL EncodeHTML vs. XHTML

List of All Attributes

Attribute	Description
accept-charset	Specifies the character encodings used for form submission
action	Specifies where to send the form-data when a form is submitted
autocomplete	Specifies whether a form should have autocomplete on or off
enctype	Specifies how the form-data should be encoded when submitting it to the server (only for method=»post»)
method	Specifies the HTTP method to use when sending form-data
name	Specifies the name of the form
novalidate	Specifies that the form should not be validated when submitted
rel	Specifies the relationship between a linked resource and the current document
target	Specifies where to display the response that is received after submitting the form

❮ Previous
Next ❯

Атрибуты

accept-charset:

Указывает кодировку символов или список кодировок, разделенных пробелами, для введенных в форму данных, переданных на сервер для обработки. Если данные включают в себя символы, не поддерживающиеся указанной кодировкой, то браузер пытается определить соответствующую для них кодировку. Если соответствующая кодировка не может быть определена, то символы кодируются в числовые коды.
Значением по умолчанию является зарезервированная строка «UNKNOWN» (браузеры интерпретируют это значение как кодировку символов идентичную кодировке документа, содержащего элемент <form>).

action:

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

autocomplete:

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

on: браузер автоматически показывает значения вводимые ранее пользователем (значение по умолчанию).
off: пользователь должен сам вводить значения для каждого поля при каждом использовании формы. Ранее вводимые значения показываться не будут.

Примечание: атрибут autocomplete не поддерживается браузером Opera.

enctype:

Указывает способ кодирования данные формы при отправке на сервер. Может использоваться только совместно с атрибутом method=»post». Возможные значения:

application/x-www-form-urlencoded: значение по умолчанию: все символы кодируются перед отправкой (пробелы преобразуются в символ «+», а специальные символы в значения ASCII HEX).
multipart/form-data: символы не кодируются. Используется для элементов <input>, у которых в атрибуте type установлено значение «file».
text/plain: пробелы преобразуются в символ «+», но не кодирует в шестнадцатеричные значения спецсимволы, такие как апострофы.

method:

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

get: данные передаются в адресной строке браузера в виде пар «имя=значение» путём их добавления в конце URL-адреса. В качестве разделителя между основным URL-адресом и передаваемыми данными используется знак вопроса (?), для разделения передаваемых данных между собой используется символ амперсанда (&). Данный метод применяется при отправке данных небольшого размера.
post: данные передаются не как часть URL, а в качестве содержимого запроса браузера. Данный метод применяется для отправки данных большого объёма.

Если атрибут method не указан, по умолчанию будет использоваться метод GET.

name:

Определяет имя формы. Имя может быть использовано в JavaScript для ссылки на элемент по имени или для ссылки на данные формы после ее отправки. Если в одном документе используется несколько форм, то их имена не должны повторяться, так же нельзя в качестве значения атрибута оставлять пустую строку.

novalidate:

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

<form novalidate>
<form novalidate="novalidate">
<form novalidate="">

Примечание: атрибут novalidate не поддерживается в IE9 и более ранних версиях, и в Safari.

target:

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

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

Тег <form> так же поддерживает Глобальные атрибуты и События

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

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. Теперь советую перейти к следующему уроку.

Ссылка на следующий урок: Урок 9. HTML тег div — подробное описание с примерами

Attributes

Attribute	Value	Description
accept-charset	character_set	Specifies the character encodings that are to be used for the form submission
action	URL	Specifies where to send the form-data when a form is submitted
autocomplete	onoff	Specifies whether a form should have autocomplete on or off
enctype	application/x-www-form-urlencoded multipart/form-data text/plain	Specifies how the form-data should be encoded when submitting it to the server (only for method=»post»)
method	get post	Specifies the HTTP method to use when sending form-data
name	text	Specifies the name of a form
novalidate	novalidate	Specifies that the form should not be validated when submitted
rel	externalhelplicensenextnofollownoopener noreferreropenerprevsearch	Specifies the relationship between a linked resource and the current document
target	_blank _self _parent _top	Specifies where to display the response that is received after submitting the form

The Method Attribute

The attribute specifies the HTTP
method to be used when submitting the form data.

The form-data can be sent as URL variables (with )
or as HTTP post transaction (with ).

The default HTTP method when submitting form data is GET.

Example

This example uses the GET method when submitting the form data:

Example

This example uses the POST method when submitting the form data:

Notes on GET:

Appends the form data to the URL, in name/value pairs
NEVER use GET to send sensitive data! (the submitted form data is visible in the URL!)
The length of a URL is limited (2048 characters)
Useful for form submissions where a user wants to bookmark the result
GET is good for non-secure data, like query strings in Google

Notes on POST:

Appends the form data inside the body of the HTTP request (the submitted
form data is not shown in the URL)
POST has no size limitations, and can be used to send large amounts of data.
Form submissions with POST cannot be bookmarked

Tip: Always use POST if the form data contains sensitive or personal information!

Фокус

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

Пользователю можно помочь в этом, установив фокус на нужном начальном поле автоматически. Это можно сделать с помощью JavaScript, вызывая метод focus() требуемого элемента <input>. Но этот подход требует лишней строки кода и иногда может вызывать раздражающие неувязки.

Например, особо проворные пользователи могут опередить вызов метода focus(), щелкнуть в каком-либо другом поле и начать вводить в нем, а когда метод, наконец, вызовется, пользователь грубо выдвинется из выбранного им поля и переместится в поле, выбранное методом. Но если управлять фокусом может браузер, он может быть несколько более смышленым и перемещать фокус только в том случае, если пользователь еще не выбрал другое поле.

На этой идее основан новый HTML5-атрибут autofocus, который можно вставить в элемент <input> или <textarea> (но только в один элемент формы), как показано в следующем примере:

Уровень поддержки браузерами атрибута autofocus примерно такой же, как и атрибута placeholder, и означает, что практически все браузеры поддерживают его, за исключением Internet Explorer. Но опять же, эта проблема легко решается. Проверить поддержку атрибута autofocus конкретным браузером можно с помощью инструмента Modernizr (который мы обсуждали в статье «Поддержка браузерами HTML5») и, если необходимо, запускать собственный код для автоматического фокуса.

More Examples

Example

An HTML form with checkboxes:

Example

An HTML form with radiobuttons:

<form action=»/action_page.php» method=»get»>
<input type=»radio» id=»html» name=»fav_language» value=»HTML»> <label
for=»html»>HTML</label><br> <input type=»radio» id=»css» name=»fav_language»
value=»CSS» checked=»checked»> <label for=»css»>CSS</label><br>
<input type=»radio» id=»javascript» name=»fav_language» value=»JavaScript»>
<label for=»javascript»>JavaScript</label><br><br> <input
type=»submit» value=»Submit»></form>

Пример 1. Форма html с кнопками

Преобразуется на странице в следующее:

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

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

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

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

HTML Reference

HTML by AlphabetHTML by CategoryHTML Browser SupportHTML AttributesHTML Global AttributesHTML EventsHTML ColorsHTML CanvasHTML Audio/VideoHTML Character SetsHTML DoctypesHTML URL EncodeHTML Language CodesHTML Country CodesHTTP MessagesHTTP MethodsPX to EM ConverterKeyboard Shortcuts

Добавление подсказок

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

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

Подстановочный текст для поля создается с помощью атрибута placeholder:

Браузеры, не поддерживающие подстановочный текст, просто не обращают внимания на атрибут placeholder; особенно грешит этим Internet Explorer. К счастью, это не такая уж и большая проблема, т.к. подстановочный текст — всего лишь приятная примочка, не обязательная для функционирования формы.

В настоящее время не существует стандартного, единообразного способа изменить внешний вид подстановочного текста, например, выделить его курсивом или шрифтом определенного цвета. Со временем разработчики браузеров создадут требуемые для этого обработчики. Но пока либо нужно применять специфические для браузера CSS-псевдоклассы (а именно -webkit-input-placeholder и -moz-placeholder), либо смириться с таким порядком вещей.

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

HTML Exercises

List of All <form> Attributes

Attribute	Description
accept-charset	Specifies the character encodings used for form submission
action	Specifies where to send the form-data when a form is submitted
autocomplete	Specifies whether a form should have autocomplete on or off
enctype	Specifies how the form-data should be encoded when submitting it to the server (only for method=»post»)
method	Specifies the HTTP method to use when sending form-data
name	Specifies the name of the form
novalidate	Specifies that the form should not be validated when submitted
rel	Specifies the relationship between a linked resource and the current document
target	Specifies where to display the response that is received after submitting the form

❮ Previous
Next ❯

HTML Учебник

HTML ГлавнаяHTML ВведениеHTML РедакторHTML ОсновныеHTML ЭлементыHTML АтрибутыHTML ЗаголовкиHTML ПараграфыHTML СтилиHTML ФорматированиеHTML ЦитированиеHTML КомментарииHTML Цвет
Цвет
RGB
HEX
HSL

HTML с CSSHTML Ссылки
Ссылки
Ссылки цветные
Ссылки закладки

HTML Изображение
Изображение
Изображение карта
Изображение фон
Элемент картинки

HTML ТаблицыHTML Списки
Списки
Неупорядоченный список
Упорядоченный список
Другие списки

HTML БлокиHTML КлассыHTML ИдентификаторыHTML ФреймыHTML с JavaScriptHTML Путь к файлуHTML Мета тегиHTML Методы версткиHTML Адаптивный дизайнHTML Компьютерный кодHTML5 СемантикаHTML5 СинтаксисHTML СущностьHTML СимволыHTML ЭмодзиHTML КодировкаHTML URL КодировкаHTML в XHTML