Как сделать окно ввода в html

Обновлено: 02.05.2024

Элемент HTML используется для создания интерактивных элементов управления в веб-формах для получения данных от пользователя; в зависимости от устройства и user agent, доступен широкий выбор типов входных данных и виджетов управления. Из-за огромного количества возможных сочетаний типов ввода и атрибутов это один из самых мощных и сложных элементов HTML.

Flow content, listed, submittable, resettable, form-associated element, phrasing content.
If the type has not the hidden value, labellable element, palpable content.
None, it is an empty element.
Must have a start tag and must not have an end tag.
Any element that accepts phrasing content.
HTMLInputElement

Атрибуты

Расширение файла, начинающееся с символа точки (U+002E). Наприм., '.jpg, .jpg, .doc)
Валидный тип MIME без расширения
audio/* для аудиофайлов HTML5
video/* для видеофайлов HTML5
image/* для файлов с изображениями HTML5

min : 0
max : 100
value : min + ( max - min )/2, or min if max is less than min
step : 1

off : Пользователь должен каждый раз полностью вводить значение в поле или документ предусматривает свой собственный метод автозаполнения; браузер не делает автоматического заполнения записи.
on : Браузер автоматически заканчивает значение поля, основываясь на значениях, которые вводились пользователем ранее.

Если не атрибут autocomplete не указан в , тогда браузер использует атрибут autocomplete формы, которая является родительской для данной формы. The form owner is either the form element that this element is a descendant of or the form element whose id is specified by the form attribute of the input element. For more information, see the autocomplete attribute in .

application/x-www-form-urlencoded : The default value if the attribute is not specified.
multipart/form-data : Use this value if you are using an element with the type attribute set to file .
text/plain

If this attribute is specified, it overrides the enctype attribute of the element's form owner.

post : The data from the form is included in the body of the form and is sent to the server.
get : The data from the form are appended to the form attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.

If specified, this attribute overrides the method attribute of the element's form owner.

_ self : Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.
_blank : Load the response into a new unnamed browsing context.
_parent : Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as _self .
_top : Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as _self .

verbatim : Alphanumeric, non-prose content such as usernames and passwords.
latin : Latin-script input in the user's preferred language with typing aids such as text prediction enabled. For human-to-computer communication such as search boxes.
latin-name : As latin, but for human names.
latin-prose : As latin, but with more aggressive typing aids. For human-to-human communication such as instant messaging for email.
full-width-latin : As latin-prose, but for the user's secondary languages.
kana : Kana or romaji input, typically hiragana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.
katakana : Katakana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.
numeric : Numeric input, including keys for the digits 0 to 9, the user's preferred thousands separator character, and the character for indicating negative numbers. Intended for numeric codes, e.g. credit card numbers. For actual numbers, prefer using
tel : Telephone input, including asterisk and pound key. Use if possible instead.
email : Email input. Use if possible instead.
url : URL input. Use if possible instead.

HTML5 This attribute is ignored if the value of the type attribute is hidden , range , color , checkbox , radio , file , or a button type.

required HTML5 This attribute specifies that the user must fill in a value before submitting a form. It cannot be used when the type attribute is hidden , image , or a button type ( submit , reset , or button ). The :optional and :required CSS pseudo-classes will be applied to the field as appropriate. selectionDirection HTML5 The direction in which selection occurred. This is "forward" if the selection was made from left-to-right in an LTR locale or right-to-left in an RTL locale, or "backward" if the selection was made in the opposite direction. This can be "none" if the selection direction is unknown. size The initial size of the control. This value is in pixels unless the value of the type attribute is text or password , in which case, it is an integer number of characters. Starting in HTML5, this attribute applies only when the type attribute is set to text , search , tel , url , email , or password ; otherwise it is ignored. In addition, the size must be greater than zero. If you don't specify a size, a default value of 20 is used. spellcheck HTML5 Setting the value of this attribute to true indicates that the element needs to have its spelling and grammar checked. The value default indicates that the element is to act according to a default behavior, possibly based on the parent element's own spellcheck value. The value false indicates that the element should not be checked. src If the value of the type attribute is image , this attribute specifies a URI for the location of an image to display on the graphical submit button; otherwise it is ignored. step HTML5 Works with the min and max attributes to limit the increments at which a numeric or date-time value can be set. It can be the string any or a positive floating point number. If this attribute is not set to any , the control accepts only values at multiples of the step value greater than the minimum. tabindex element-specific in HTML 4 , global in HTML5 The position of the element in the tabbing navigation order for the current document. usemap HTML 4 only, Вышла из употребления с версии HTML5 The name of a element to as an image map. value The initial value of the control. This attribute is optional except when the value of the type attribute is radio or checkbox .
Note that when reloading the page, Gecko and IE will ignore the value specified in the HTML source, if the value was changed before the reload. width HTML5 If the value of the type attribute is image , this attribute defines the width of the image displayed for the button. x-moz-errormessage Non-Standard This Mozilla extension allows you to specify the error message to display when a field doesn't successfully validate.

Notes

File inputs

Note: Starting in Gecko 2.0 , calling the click() method on an element of type "file" opens the file picker and lets the user select files. See Using files from web applications for an example and more details.

You can't set the value of a file picker from a script; doing something like the following has no effect:

Error messages

If you want Firefox to present a custom error message when a field fails to validate, you can use the x-moz-errormessage attribute to do so:

Note, however, that this is not standard and will not have an effect on other browsers.

Тег в HTML определяет элемент формы. В зависимости от выбранного типа, элемент input может принимать вид поля для ввода текста, кнопки, переключателя, чек-бокса и т.д.

Атрибут type HTML элемента input указывает на его тип. Тип элемента определяет его вариант отображения и функционал. Типы тега input (например, input type="text" - текстовое поле, input type="submit" - кнопка отправки, input type="radio" - переключатель, input type="checkbox" - чек-бокс, input type="hidden" - скрытое поле, input type="password" - пароль и т.д.) подробно описаны ниже.

Тег HTML является элементом формы. Подробно о создании форм описано в статье: Все про формы и поля в HTML. Создание и работа с формами.

Синтаксис

Input type button - простая кнопка

Тип button соответствует простой кликабельной кнопке. Действия, которые будут происходить по нажатию кнопки, определяются через JavaScript.

HTML код input type="button" :

Input type checkbox - чек-бокс, флажок, галочка

Тип checkbox представляет собой поле, которое пользователь может отметить (чек-бокс). У поля checkbox есть только 2 состояния - отмечен или не отмечен. При отправке формы на сервер, данные передаются только для отмеченных чек-боксов.

Если для чек-бокса не задан атрибут value , как значение будет использовано значение по умолчанию - "on". Часто чек-боксы используются вместе с тегом , где указывается подпись чек-бокса.

Обычно чек-бокс отображается в виде квадрата, внутри которого находится галочка, если чек-бокс отмечен.

HTML код input type="checkbox" :

Input type color - выбор цвета

Тип color представляет собой поле, в котором пользователь может выбрать цвет. Цвет задается в формате HEX.

HTML код input type="color" :

Input type date - поле для ввода даты

Тип date представляет собой поле, в которое пользователь может ввести дату. Дата включает в себя год, месяц и число.

Стандартный формат даты YYYY-MM-DD, например, "2005-01-20" (соответствует 20 января 2005г.). Подробнее о дате в HTML.

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

HTML код input type="date" :

Input type datetime - дата и время

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

Этот тип поля устарел, использовать его не рекомендуется. Используйте вместо него.

Input type datetime-local - локальное время

Тип datetime-local представляет собой поле, в которое пользователь может ввести дату и время (без указания временной зоны).

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

HTML код input type="datetime-local" :

Input type email - поле для ввода адреса электронной почты

HTML код input type="email" :

Input type file - поле для загрузки файла

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

При использовании в HTML форме поля с типом file нужно установить значение multipart/form-data для атрибута enctype родительской формы.

HTML код input type="file" :

Input type hidden - скрытое поле

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

HTML код input type="hidden" :

Input type image - кнопка-картинка

Тип image представляет собой картинку-кнопку. По нажатию на картинку (изображение) происходит отправка связанной формы. Адрес файла картинки определяется в атрибуте src .

HTML код input type="image" :

Input type month - поле для ввода месяца

Тип month представляет собой поле, в которое пользователь может ввести месяц (месяц конкретного года).

Формат значения, отправляемого на сервер: YYYY-MM, например, "2001-11" (соответствует ноябрю 2001г.).

HTML код input type="month" :

Input type number - поле для ввода чисел

Тип number представляет собой поле, в котором можно вводить только числа. Ограничение на вводимые числа можно задавать с помощью атрибутов max - максимальное значение, min - минимальное значение, step - шаг (подробнее в таблице атрибутов ниже).

HTML код input type="number" :

Input type password - поле для ввода пароля

Тип password представляет собой поле, предназначенное для ввода пароля. Значение, введенное в такое поле, будет показано под маской (обычно в виде точек, количество которых отражает количество введенных символов).

HTML код input type="password" :

Input type radio - переключатель

Тип radio представляет собой переключатель (также используется название радио кнопка).

Для создания переключателя используют несколько тегов input type="radio" , имеющих одинаковые значения атрибута name . Таким образом создается группа, где каждый тег соответствует одному положению переключателя. Одновременно выбранным может быть только один из элементов группы.

При отправке формы на сервер, данные передаются только у выбранного (отмеченного) тега радио-кнопки.

Для удобства использования, рядом с радио-кнопками обычно размещают подпись .

HTML код переключателя из input type="radio" :

Input type range - диапазон, ползунок HTML

Тип range представляет собой ползунок, с помощью которого можно выбрать значение в указанном диапазоне. Диапазон значений определяется с помощь атрибутов max - максимальное значение, min - минимальное значение. Атрибут step - устанавливает значение шага для ползунка.

HTML код input type="range" :

Input type reset - кнопка сброса, очистки полей

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

HTML код input type="reset" :

Input type search - поле для ввода поискового запроса

Тип search представляет собой поле, которое предназначено для ввода поискового запроса.

HTML код input type="search" :

Input type submit - кнопка отправки формы

Тип submit соответствует кнопке отправки формы. По нажатию на кнопку типа submit будет вызвано событие отправки (submit) связанной HTML формы.

К одной HTML форме может быть привязано несколько кнопок отправки. На сервер будут переданы данные только той кнопки, которая вызвала событие submit.

HTML код input type="submit" :

Input type tel - поле для ввода номера телефона

Тип tel представляет собой поле, которое предназначено для ввода номера телефона. По умолчанию шаблон ввода не установлен и поле может принимать любые текстовые значения. Указать шаблон можно с помощью атрибута pattern . Другой вариант - использование JavaScript библиотек для установки формата поля.

HTML код input type="tel" :

Input type text - текстовое поле HTML

Тип text представляет собой текстовое поле для ввода. Текст в input с типом text вводится в одну строку.

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

HTML код input type="text" :

Input type time - поле для ввода времени

Тип time представляет собой поле, в котором пользователь может ввести время.

Стандартный формат: hh:mm, например, "14:45". Подробнее о времени в HTML.

HTML код input type="time" :

Input type url - поле для ввода URL адреса

HTML код input type="url" :

Input type week - поле для выбора недели

Тип week представляет собой поле, в которое пользователь может ввести неделю (например, отметить с помощью календаря, который выводит браузер при вводе в поле).

Стандартный формат: YYYY-Wxx, где "хх" - номер недели, начиная от начала года. Например, "2011-W12" (соответствует 12-й неделе в 2011 году).

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

HTML код input type="week" :

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

Тег
	Да	Да	Да	Да	Да

Атрибуты тега input

audio/*
video/*
image/*
расширение файла
media_type

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

Используется только для полей с типом file.

audio/* - аудио файлы;
video/* - видео файлы;
image/* - файлы изображений;
расширение файла - файлы, имеющие конкретные расширения (например, ".jpg", ".jpg");
media_type - файлы указанного медиа типа.

Альтернативный текст. Используется только для полей с типом image.

Содержит текст, который будет выведен в случае, если изображение невозможно отобразить, а также прочитан программой - скрин-ридером.

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

on - автозаполнение включено (значение по умолчанию);
off - автозаполнение выключено.

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

Логический атрибут. Если указан, при загрузке документа фокус будет переведен на элемент ввода.

Логический атрибут. Используется только для полей с типами checkbox и radio.

Если указан, то чек-бокс (для checkbox) считается отмеченным или значение переключателя (для radio) выбранным.

Логический атрибут. Если указан, отключает возможность изменить состояние поля (ввести текст, поменять выбранное значение переключателя (для radio), отметить чек-бокс и т.п).

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

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

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

URL адрес документа - обработчика формы. Используется для input с типом image и submit.

Если указан, форма будет отправлена по URL адресу, указанному в этом атрибуте, игнорируя атрибут action тега .

Способ кодирования информации. Используется для input с типом image и submit.

Указывает как именно нужно кодировать информацию при отправке на сервер, вызванной нажатием кнопки, содержащей этот атрибут.

application/x-www-form-urlencoded - все символы кодируются перед отправкой в шестнадцатеричные значения (HEX) ASCII, пробелы заменяются на "+". Значение по умолчанию;
multipart/form-data - символы не кодируются. Значение обязательно нужно использовать в форме с полем input type="file" (при использовании файлов в форме);
text/plain - символы не кодируются, пробелы заменяются символом "+".

Атрибут используется только в случае отправки формы методом POST.

Этот атрибут переопределяет значение, указанное в атрибуте enctype тега .

Используется только для input с типом image и submit.

Этот атрибут переопределяет значение, указанное в атрибуте method тега .

Логический атрибут. Браузер не будет выполнять проверку правильности заполнения формы перед отправкой, вызванной нажатием input, содержащей этот атрибут. По умолчанию браузер проверяет наличие значения в обязательных полях (required), соответствие значений стандарту (например, для поля с типом email) и т.п.

Используется только для input с типом image и submit.

Этот атрибут переопределяет значение, указанное в атрибуте novalidate тега .

Определяет где будет открыт результат обработки формы (ответ сервера), при отправке по нажатию кнопки с этим атрибутом:

_blank - в новой вкладке или окне;
_parent - в родительском окне;
_self - в текущем окне (используется по умолчанию);
_top - на весь экран.

Используется только для input с типом image и submit.

Этот атрибут переопределяет значение, указанное в атрибуте target тега .

Высота изображения в пикселях.

Используется только для input с типом image.

Прикрепляет к полю список предопределенных вариантов .

Максимальное значение для поля.

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

Используется только для input с типом date, datetime, datetime-local, month, number, range, time и week.

Максимальное количество символов, допустимое для ввода в поле input.

Минимальное значение для поля.

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

Используется только для input с типом date, datetime, datetime-local, month, number, range, time и week.

Логический атрибут. Если указан, позволяет указывать в поле более одного объекта.

Используется только для input с типом email и file.

При использовании с input type="file" позволяет прикрепить несколько файлов.

При использовании с input type="email" позволяет ввести несколько адресов email через запятую.

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

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

Используется только для input с типом date, email, password, search, tel, text, url.

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

Используется только для input с типом email, password, search, tel, text, url.

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

Логический атрибут. Если указан, поле будет определено как обязательное для заполнения. Форма не будет отправлена на сервер, если такое поле не будет заполнено.

Используется только для input с типом checkbox, date,datetime, datetime-local, email, file, month, number, password, radio, search, tel, text, url, week.

Определяет ширину поля в символах. Ширина поля будет подобрана таким образом, чтобы в поле одновременно было видно количество символов, указанное в атрибуте.

Значение атрибута соответствует количеству символов только для моноширинных шрифтов.

Используется только для input с типом email, password, search, tel, text, url.

URL адрес файла изображения. Обязательный для заполнения.

Используется только для input с типом image.

Шаг изменения значения.

Значение по умолчанию: "1".

При указании числового значения в поле можно будет использовать только значения кратные указанному числу. Например, при указании "5" в поле можно будет ввести числа 0, 5, -5, 25, -155 и т.п., но нельзя будет ввести 1, -3, 28, 156 и т.п. (так как они не кратны числу "5"); при указании "2.5" в поле можно будет вводить 0, 2.5, 5, 7.5 и т.п., но нельзя будет 1, 2.4, 6.2, 8 и т.п. (так как они не кратны числу "2.5").

При указании "any" поле будет принимать любые числа.

Используется только для input с типом date, datetime, datetime-local, month, number, range, time и week.

Тип элемента. Определяет отображение и функционал элемента.

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

button - простая кликабельная кнопка. Действие по нажатию кнопки определяется с помощью скриптов. Подробнее
checkbox - чек-бокс (флажок, галочка). Подробнее
color - окно выбора цвет. Подробнее
date - поле для ввода даты. Подробнее
datetime - поле для ввода даты и времени с указанием временной зоны. Этот тип поля является устаревшим. Подробнее
datetime-local - поле для ввода локального времени (даты и времени). Подробнее
email - поле для ввода адреса электронной почты. Подробнее
file - поле, к которому можно прикрепить файлы в качестве значения. Подробнее
hidden - скрытое поле. Подробнее
image - кнопка-картинка, нажатие по которой вызывает событие отправки формы. Подробнее
month - поле для ввода месяца и года (например, "декабрь, 2010г."). Подробнее
number - поле для ввода числа. Подробнее
password - поле для ввода пароля. Подробнее
radio - переключатель (одно из значений переключателя). Подробнее
range - диапазон (ползунок). Подробнее
reset - кнопка сброса введенных значений в форме. Подробнее
search - поле для введения поискового запроса. Подробнее
submit - кнопка, нажатие по которой вызывает событие отправки формы. Подробнее
tel - поле для ввода телефона. Подробнее
text - текстовое поле. Подробнее
time - поле для ввода времени. Подробнее
url - поле для ввода URL адресов. Подробнее
week - поле для ввода недели (недели определенного года, например, "неделя 12, 2017г."). Подробнее

Значение элемента, которое будет отправлено на сервер.

На сервер отправляется переменная, имеющая название, указанное в атрибуте name элемента и значение, указанное в этом атрибуте.

В HTML для создания форм используются теги группы form. К ним относятся:

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

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

На этой странице описана практика создания и работы с HTML формами с примером исходного кода и описанием на русском языке.

Создание формы в HTML

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

Элементы формы (другое название - поля) формируются с помощью тегов группы form. Основные типы элементов описаны ниже на этой странице. Подробное описание всех типов полей форм находится на страницах тегов соответствующих элементов.

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

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

Рассмотрим подробно код формы.

Атрибут action содержит URL обработчика формы - по этому адресу будет отправлена форма после наступления события submit (submit - событие отправки формы).

Каждый элемент cодержит атрибут name . При отправке формы, значения введенные пользователем будут переданы в переменных с именами указанными в этом атрибуте. Атрибут type определяет тип элемента . Атрибут required делает элемент обязательными для заполнения. Форма не будет отправлена, пока пользователь не заполнит все обязательные элементы.

Стилевое оформление формы

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

Код CSS для базового оформления HTML формы обратной связи из примера выше:

Элементы (поля) формы html. Основные типы полей

В таблице ниже представлены основные типы элементов формы (полей). Подробную информацию о каждом элементе вы можете просмотреть на отдельной странице тега.

По умолчанию текстовое поле может принимать любые текстовые значение. Дополнительные ограничения могут быть установлены в теге (атрибут pattern), либо с помощью JavaScript.

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

Существует несколько типов полей, содержащих данные о дате и времени:

date - дата (число, месяц, год);
datetime-local - дата и время (число, месяц, год, часы, минуты);
month - месяц конкретного года (например: январь, 2004г);
week - неделя конкретного года (например: неделя 32, 2001г).

Поле для ввода пароля:

В поле типа password введенное значение будет заменено символьной маской.

Поле для ввода чисел:

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

Поля с указанным типом содержимого:

email - поле для ввода адреса электронной почты;
number - поле для ввода чисел;
password - поле для ввода пароля;
search - поле для ввода поискового запроса;
tel - поле для ввода номера телефона;
url - поле для ввода URL адреса.

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

Чек-бокс представляет собой поле, в котором можно сделать отметку.

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

При клике на список пользователю откроются доступные для выбора варианты.

Пользователь может выбрать сразу несколько вариантов из этого списка.

С помощью этого элемента пользователь может прикрепить к форме файл.

Для создания кликабельной кнопки можно использовать тег либо тег .

Отличие в возможности формировать название кнопки, сделанной тегом , с помощью HTML тегов.

Типы кнопок (определяются атрибутом type):

button - простая кнопка. Действие, которое будет выполнено при нажатии кнопки, определяется через JavaScript;
submit - кнопка отправки формы;
reset - кнопка очистки полей формы.

Обработка HTML формы на сервере

После отправки формы данные передаются на сервер в виде параметров запроса.

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

Для создания обработчика понадобится один из доступных языков программирования. Распространенным вариантом является использование PHP обработчиков.

В случае использования PHP обработчика данные формы будут доступны в суперглобальных массивах $_GET и $_POST . Например, данные поля с именем "message", отправленные методом POST, будут доступны как $_POST['message'] .

Работа с формами на сервере - это отдельная обширная тема. Об обработке HTML форм на сервере читайте в справочнике по выбранному языку программирования.

Ниже представлен простейший PHP обработчик для формы обратной связи, приведенной выше. Данный обработчик отправляет данные формы на указанный email.

Этот код необходимо разместить на сервере в корневом каталоге сайта в файле feedback.php (в файле, указанном как обработчик формы).

Тег в HTML используется для создания многострочного поля для ввода, другими словами, текстовой области.

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

Размеры textarea HTML регулируются с помощью атрибутов rows и cols . Атрибут тега rows регулирует высоту области, задавая количество строк, выводимых на экран без прокрутки (скроллинга). Атрибут тега cols регулирует ширину текстовой области, рассчитывается в пикселях, как средняя ширина символа, умноженная на значение атрибута.

По умолчанию изменять размер textarea можно растягивая текстовую область за правый нижний край. Если нужно сделать фиксированного размера, следует использовать CSS-правило resize: none; . Это отключит возможность растягивать область ввода.

Синтаксис

Примеры использования в HTML коде

HTML код текстовой области

с фиксированным размером (no resize textarea)

По умолчанию пользователь может изменять размер текстовой области (растягивать область ввода за край).

Для того, чтобы запретить изменение размера используйте CSS свойство resize . Значение none поставит запрет на изменение размеров текстовой области, как ширины, так и высоты.

Если необходимо, чтобы у textarea была фиксированная ширина, установите значение у CSS свойства resize в vertical, при этом высоту области можно будет изменить. Если нужно иметь возможность изменять ширину при фиксированной высоте, используйте значения horizontal.

Отображение в браузере:

HTML код с фиксированной шириной и высотой

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

Тег
	Да	Да	Да	Да	Да

Атрибуты тега textarea

Логический атрибут. Если указан, при загрузке документа фокус будет переведен на текстовую область.

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

Логический атрибут. Если указан, делает текстовую область неактивной.

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

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

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

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

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

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

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

Логический атрибут. Если указан, текстовая область будет определена как обязательная для заполнения. Форма не будет отправлена на сервер, если текстовая область не будет заполнена.

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

Определяет правила переноса строк:

Значение hard: символы переноса строки будут добавлены в конце каждой строки в текстовой области. Таким образом, введенный текст из текстовой области переданный на сервер будет иметь ширину не больше, чем ширина . Для использования этого значения необходимо указать атрибут cols.

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

Тег (от англ. input — ввод) является одним из разносторонних элементов формы и позволяет создавать разные части интерфейса и обеспечивать взаимодействие с пользователем.

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

Основной атрибут , определяющий вид элемента — type . Он позволяет задавать следующие элементы формы: текстовое поле ( text ), поле с паролем ( password ), переключатель ( radio ), флажок ( checkbox ), скрытое поле ( hidden ), кнопка ( button ), кнопка для отправки формы ( submit ), кнопка для очистки формы ( reset ), поле для отправки файла ( file ), кнопка с изображением ( image ) и др. Для каждого элемента существует свой список атрибутов, которые определяют его вид и характеристики. Кроме того, в HTML5 добавлено ещё более десятка новых атрибутов.

Синтаксис¶

Закрывающий тег не требуется.

Атрибуты¶

Также для этого элемента доступны универсальные атрибуты.

accept¶

Применяется к полю для отправки файла ( ).

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

Синтаксис

Значения

Имя MIME-типа в любом регистре, несколько значений перечисляются через запятую.

В HTML5 также допустимо в качестве значения указывать audio/* для выбора всех звуковых файлов, video/* для видеофайлов и image/* для всех графических файлов.

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

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

Синтаксис

Значения

Любая подходящая текстовая строка.

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

autocomplete¶

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

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

Автозаполнение конкретного поля формы привязывается к его атрибуту name и при смене значения теряется.

Синтаксис

Значения

on Включает автозаполнение текста. off Отключает автозаполнение. Это значение обычно используется для отмены сохранения в браузере важных данных (паролей, номеров банковских карт), а также редко вводимых или уникальных данных (капча).

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

Зависит от настроек браузера.

autofocus¶

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

Синтаксис

Значения

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

По умолчанию атрибут autofocus не установлен.

checked¶

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

Синтаксис

Значения

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

По умолчанию этот атрибут выключен.

dirname¶

При наличии атрибута dirname на сервер отправляется пара имя/значение, где имя задаётся атрибутом dirname , а значение подставляется браузером. Для текста, идущего слева направо, значение будет ltr , а для текста справа налево (иврита, к примеру) значение будет rtl .

Синтаксис

Значения

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

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

disabled¶

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

Синтаксис

Значения

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

По умолчанию этот атрибут выключен.

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

Синтаксис

Значения

Идентификатор формы (значение атрибута id элемента ).

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

formaction¶

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

Синтаксис

Значения

formenctype¶

Устанавливает способ кодирования данных формы при их отправке на сервер. Обычно явно указывается в случае, когда используется поле для отправки файла ( input type="file" ). Этот атрибут по своему действию аналогичен атрибуту enctype элемента , при совместном использовании formenctype и enctype последний игнорируется.

Синтаксис

Значения

application/x-www-form-urlencoded Вместо пробелов ставится + , символы вроде русских букв кодируются их шестнадцатеричными значениями (например, %D0%9F%D0%B5%D1%82%D1%8F вместо Петя ). multipart/form-data Данные не кодируются. Это значение применяется при отправке файлов. text/plain Пробелы заменяются знаком + , буквы и другие символы не кодируются.

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

formmethod¶

Атрибут сообщает браузеру, каким методом следует передавать данные формы на сервер.

Синтаксис

Значения

Различают два метода — GET и POST , которые задаются ключевыми словами get и post .

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

formnovalidate¶

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

Синтаксис

Значения

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

По умолчанию этот атрибут выключен.

formtarget¶

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

Синтаксис

Значения

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

_blank Загружает страницу в новую вкладку браузера. _self Загружает страницу в текущую вкладку. _parent Загружает страницу во фрейм-родитель; если фреймов нет, то это значение работает как _self . _top Отменяет все фреймы и загружает страницу в полном окне браузера; если фреймов нет, то это значение работает как _self .

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

Синтаксис

Значения

Имя идентификатора элемента .

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

Устанавливает верхнее значение для ввода числа или даты в поле формы.

Синтаксис

Значения

Целое положительное или отрицательное число (для type="number" , type="range" ).

Дата в формате ГГГГ-ММ-ДД (например: 2012-12-22) для type="date" .

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

maxlength¶

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

Синтаксис

Значения

Любое целое положительное число.

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

Ввод символов не ограничен.

Устанавливает нижнее значение для ввода числа или даты в поле формы.

Синтаксис

Значения

Целое положительное или отрицательное число (для type="number" , type="range" ).

Дата в формате ГГГГ-ММ-ДД (например: 2012-12-22) для type="date" .

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

minlength¶

Синтаксис

Значения

Любое целое положительное число.

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

multiple¶

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

Синтаксис

Значения

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

По умолчанию атрибут multiple выключен.

Определяет уникальное имя элемента формы. Как правило, это имя используется при отправке данных на сервер или для доступа к введённым данным поля через скрипты.

Синтаксис

Значения

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

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

pattern¶

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

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

Синтаксис

Значения

Некоторые типовые регулярные выражения перечислены в табл. 1.

Табл. 1. Регулярные выражения

Выражение	Описание
\d 3	Одна цифра от 0 до 9.
\D [^0-9]	Любой символ кроме цифры.
\s	Пробел.
[A-Z]	Только заглавная латинская буква.
[A-Za-z]	Только латинская буква в любом регистре.
[А-Яа-яЁё]	Только русская буква в любом регистре.
[A-Za-zА-Яа-яЁё]	Любая буква русского и латинского алфавита.
9	Три цифры.
[A-Za-z]	Не менее шести латинских букв.
3	Не более трёх цифр.
4	От пяти до десяти цифр.
^[a-zA-Z]+$	Любое слово на латинице.
^[А-Яа-яЁё\s]+$	Любое слово на русском включая пробелы.
^[ 0-9]+$	Любое число.
7	Почтовый индекс.
\d+(,\d)?	Число в формате 1,34 (разделитель запятая).
\d+(\.\d)?	Число в формате 2.10 (разделитель точка).
\d\.\d\.\d\.\d	IP-адрес

placeholder¶

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

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

Синтаксис

Значения

Текстовая строка. Если внутри строки предполагается пробел, её необходимо брать в двойные или одинарные кавычки.

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

readonly¶

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

Синтаксис

Значения

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

По умолчанию этот атрибут выключен.

required¶

Синтаксис

Значения

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

По умолчанию атрибут required выключен.

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

Синтаксис

Значения

Любое целое положительное число.

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

Адрес графического файла, который будет отображаться на веб-странице в поле с изображением. Наиболее популярны файлы в формате PNG и JPEG.

Синтаксис

Значения

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

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

Устанавливает шаг изменения числа для ползунков и полей ввода чисел.

Синтаксис

Значения

Любое целое или дробное число.

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

Сообщает браузеру, к какому типу относится элемент формы.

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

email , tel , url :

date , time , datetime :

Синтаксис

Значения

button Кнопка. checkbox Флажки. Позволяют выбрать более одного варианта из предложенных. file Поле для ввода имени файла, который пересылается на сервер. hidden Скрытое поле. Оно никак не отображается на веб-странице. image Поле с изображением. При нажатии на рисунок данные формы отправляются на сервер. password Обычное текстовое поле, но отличается от него тем, что все символы показываются звездочками. Предназначено для того, чтобы никто не подглядел вводимый пароль. radio Переключатели. Используются, когда следует выбрать один вариант из нескольких предложенных. reset Кнопка для возвращения данных формы в первоначальное значение. submit Кнопка для отправки данных формы на сервер. text Текстовое поле. Предназначено для ввода символов с помощью клавиатуры.

В HTML5 добавлены новые значения:

color Виджет для выбора цвета. date Поле для выбора календарной даты. datetime Указание даты и времени. datetime-local Указание местной даты и времени. email Для адресов электронной почты. number Ввод чисел. range Ползунок для выбора чисел в указанном диапазоне. search Поле для поиска. tel Для телефонных номеров. time Для времени. url Для веб-адресов. month Выбор месяца. week Выбор недели.

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

value¶

Определяет значение элемента формы, которое будет отправлено на сервер или получено с помощью клиентских скриптов. На сервер отправляется пара « имя=значение », где имя задаётся атрибутом name элемента , а значение — атрибутом value .

Читайте также: