Содержание

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
3.0+1.0+4.0+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

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

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

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

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

http://www.htmlbook.ru/cgi-bin/handler.cgi?nick=%C2%E0%ED%FF+%D8%E0%EF%EE%F7%EA%E8%ED&page=5

Параметры перечисляются после вопросительного знака, указанного после адреса CGI-программы и разделяются между собой символом амперсанда (&). Нелатинские символы преобразуются в шестнадцатеричное представление (в форме %HH, где HH — шестнадцатеричный код для значения ASCII-символа), пробел заменяется на плюс (+).

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

Синтаксис

 
<form action="URL">
  ...
</form>

Атрибуты

accept-charset

Устанавливает кодировку, в которой сервер может принимать и обрабатывать данные.
action
Адрес программы или документа, который обрабатывает данные формы.
autocomplete
Включает автозаполнение полей формы.
enctype
Способ кодирования данных формы.
method
Метод протокола HTTP.
name
Имя формы.
novalidate
Отменяет встроенную проверку данных формы на корректность ввода.
target
Имя окна или фрейма, куда обработчик будет загружать возвращаемый результат.

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

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег FORM</title>
 </head>
 <body>

 <form action="handler.php">
  <p><b>Как по вашему мнению расшифровывается аббревиатура &quot;ОС&quot;?</b></p>
  <p><input type="radio" name="answer" value="a1">Офицерский состав<Br>
  <input type="radio" name="answer" value="a2">Операционная система<Br>
  <input type="radio" name="answer" value="a3">Большой полосатый мух</p>
  <p><input type="submit"></p>
 </form>

 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид элементов формы в окне браузера

— Веб-технологии для разработчиков

Резюме

Элемент HTML form (<form>) представляет (собой) раздел документа, содержащий интерактивные элементы управления, которые позволяют пользователю отправлять информацию на веб-сервер.

Можно использовать :valid и :invalid CSS псевдоклассы для стилизации <form> элемента, в зависимости от того, валиден или нет конкретный элемент 

elements внутри формы.

Контекст Использования

Категория содержимогоFlow content
Разрешённое содержимоеFlow content, но не содержащий <form> элементов
Пропуск тегаНет. И открывающий и закрывающий тег должны быть.
Нормативный документHTML5, section 4.10.3 (HTML4.01, section 17.3)

Атрибуты

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

accept HTML 4
Список типов содержимого, разделенных запятой, которые принимает сервер.
Примечание об использовании: Этот атрибут был удалён в HTML5 и его не следует больше использовать. Взамен, используйте accept атрибут заданного <input> элемента.
accept-charset
Разделенные пробелами символьные кодировки, которые принимает сервер. Браузер использует их в том порядке, в котором они перечислены. Значение по умолчанию означает ту же кодировку что и у страницы.
(В предыдущей версии HTML, различные кодировки могли быть разделены запятыми.)
action
URI-адрес программы, которая обрабатывает информацию переданную через форму. Это значение может быть переписано с помощью атрибута
formaction на <button> или <input> элементе.
autocomplete HTML5
Указывает, могут ли элементы управления автоматически быть дописаны в форме браузером. Эта настройка может быть переписана с помощью атрибута autocomplete на элементе формы. Возможные значения:
  • off: Пользователь должен явно ввести значение в каждое поле или документ предоставит свой собственный метод автодополнения; браузер автоматически не дополняет записи.
  • on: Браузер может автоматически дополнить значения, основанные на значениях, которые пользователь уже вводил, в течение предыдущего использования формы.

Примечание: Если вы установили значение off для autocomplete атрибута ​​​​​формы, из-за того, что документ предоставляет своё собственное автодополнение, то вам следует также установить значение off для autocomplete каждого <input> элемента формы, которые документ может автоматически дополнить. Подробнее, смотрите Google Chrome notes.

enctype
Когда значение атрибута method равно
post, атрибут — MIME тип содержимого, которое используется, чтобы передать форму на сервер. Возможные значения:
  • application/x-www-form-urlencoded: Значение по умолчанию, если атрибут не задан.
  • multipart/form-data: Используйте это значение, если пользуетесь элементом <input> атрибутом type установленным в «file».
  • text/plain (HTML5)

Это значение может быть переписано атрибутом formenctype на элементе <button> или <input>.

method
HTTP метод, который браузер использует, для отправки формы. Возможные значения:
  • post: Соответствует HTTP POST методу ; данные из формы включаются в тело формы и посылаются на сервер.
  • get: Соответствует GET методу; данные из формы добавляются к URI атрибута action, их разделяет ‘?’, и полученный URI посылается на сервер. Используйте этот метод, когда форма содержит только ASCII символы и не имеет побочного эффекта.

Это значение может быть переписано атрибутом formmethod на <button> или <input> элементе.

name
Имя формы. В HTML 4 его использование запрещено (id следует использовать взамен). Оно должно быть уникальным и не пустым среди всех форм в документе в HTML 5.
novalidate HTML5
Это Boolean атрибут показывает, что форма не проверяется на валидность, когда отправляется серверу. Если атрибут пропущен (и поэтому форма проверяется), эта настройка по умолчанию, может быть переписана атрибутом formnovalidate на <button> или <input> элементе, принадлежащем форме.
target
Имя или ключевое слово, показывающее где отображать ответ, который будет получен, после отправки формы. В HTML 4, это имя или ключевое слово для фрейма. В HTML5, это имя или ключевое слово, контекста
просмотра (например, вкладка, окно, или линейный фрейм). Следующие ключевые слова имееют специальное значение:
  • _self: Загружает ответ в том же самом фрейме HTML 4 (или HTML5 контексте просмотра) как текущий. Это значение по умолчанию, если атрибут не указан.
  • _blank: Загружает ответ в новом безымянном окне HTML 4 или HTML5 контексте просмотра.
  • _parent: Загружает ответ HTML 4 в родительском наборе фрейма для текущего фрейма или HTML5 родительский контекст просмотра для текущего просмотра. Если нет предка, эта опция действует точно так же как as _self.
  • _top: HTML 4: Загружает ответ в полное, оригинальное окно, закрывая все другие фреймы. HTML5: Загружает ответ в верхний уровень контекста просмотра (т.е., контекст просмотра это предок текущего и не имеет других предков). Если нет предка, эта опция действует точно так же как as _self.

HTML5: Это значение может быть перезаписано formtarget атрибутом на <button> или <input> элементе.

DOM_interface

Этот элемент реализует HTMLFormElement интерфейс.

Примеры

<!-- Простая форма, которая пошлёт GET запрос -->
<form action="">
  <label for="GET-name">Name:</label>
  <input type="text" name="name">
  <input type="submit" value="Save">
</form>

<!-- Простая форма, которая пошлёт POST запрос -->
<form action="" method="post">
  <label for="POST-name">Name:</label>
  <input type="text" name="name">
  <input type="submit" value="Save">
</form>

<!-- Форма с fieldset, legend, и label -->
<form action="" method="post">
  <fieldset>
    <legend>Title</legend>
    <input type="radio" name="radio"> <label for="radio">Click me</label>
  </fieldset>
</form>

Совместимость браузера

FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0[1]1.0 (1.7 или ранее)(Да)(Да)(Да)
novalidate attribute1.04.0 (2.0)Нет??
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support(Да)1.0 (1.0)(Да)(Да)(Да)
novalidate attribute?4.0 (2.0)???

[1] Интерфейс для автодополнений в Google Chrome может меняться при запросе, в зависимости от утверждения установлен ли autocomplete со значеним off на <input> элементах формы, так же как и на самой форме. С одной стороны, когда autocomplete со значеним off установлен для формы, но при этом не установлен для её <input> элементов, при запросе пользователя автоматически заполнить поля формы, Chrome может отобразить сообщение «autocomplete has been disabled for this form.» С другой стороны, если и форма и её input элементы имеют autocomplete со значеним off, браузер не отобразит это сообщение. По этой причине, вам следует устанавливать атрибуту autocomplete значение off для каждого <input> у которого стоит нестандартное автодополнение.

Смотрите также

  • Другие элементы, которые используются для создания форм: <button>, <datalist>, <fieldset>, <input>,<keygen>, <label>, <legend>, <meter>, <optgroup>, <option>, <output>, <progress>, <select>, <textarea>.

Тег | HTML справочник

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

Описание

HTML тег <form> создаёт HTML форму, которая используется для отправки введённых пользователем данных на сервер.

Так как сама форма не предоставляет никаких средств для пользовательского ввода данных, внутри элемента <form> располагают другие элементы, цель которых предоставить пользователю различные способы ввода данных:

Помимо этих элементов, внутри формы можно использовать и любые другие HTML-элементы.

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

Атрибуты

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> так же поддерживает Глобальные атрибуты и События

Стиль по умолчанию


form {
    display: block;
    margin-top: 0em;
}

Пример


<form action="demo_form.asp">
  Имя: <input type="text" name="fname" value="Mickey"><br>
  Фамилия:<input type="text" name="lname" value="Mouse"><br>
  <input type="submit" value="Submit">
</form>

Результат данного примера в окне браузера:

Пример использования тега <form>

HTML Формы

Формы предназначены для пересылки данных от пользователя к веб-серверу. Формы в HTML могут состоять из текстовых полей и текстовых областей, флажков и переключателей, а также раскрывающихся списков. Все это — элементы формы. Каждый элемент служит для того, чтобы передать какое-либо значение сайту.
По своей сути HTML-форма — это веб-страница на которой вы видите области для ввода своей информации. После того, как вы заполните форму и нажмете кнопку отправить, информация из формы упаковывается и отсылается веб-серверу для обработки серверным сценарием (файлом-обработчиком). После обработки к вам возвращается в качестве ответа другая веб-страница. Следующий рисунок наглядно демонстрирует как работает форма:

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

Пример: Простая HTML-форма

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Простая форма</title>
</head>
<body>
<form action="action_form.php" method="POST">
  <p>Моя первая форма:<br>
    Имя: <input type="text" name="firstname" value=""><br>
    Фамилия:  <input type="text" name="lastname" value=""><br>
    <input type="submit">
  </p>
</form>
</body>
</html>

Элемент <form>

Формы вставляются на веб-страницы посредством элемента <form>. Он представляет собой контейнер для всего содержимого формы, включая такие элементы, как текстовые поля и кнопки, а также любые другие теги языка HTML. Однако он не может содержать в себе другой элемент <form>.
Для отправки формы на сервер используется кнопка «Submit», того же результат получится, если нажать клавишу «Enter» в пределах формы. Если кнопка «Submit» отсутствует в форме, клавиша «Enter» может быть использована для отправки.
Большинство атрибутов элемента <form> влияют на обработку формы, а не на ее дизайн. Наиболее распространёнными из которых являются action и method. Атрибут action содержит URL, на который информация в форме будет отправлена для обработки сервером. Атрибут method является методом HTTP, который должны использовать браузеры для отправки данных формы.

Элемент <input>

Практически все поля для формы создается с помощью элемента <input> (от англ. input — ввод). Внешний вид элемента <input> меняются в зависимости от значения его атрибута type:

<input type="значение">

Вот некоторые значения атрибута type:

ЗначениеОписание
textввод одной строки текста
radioэлемент-переключатель (иногда их называют радио-кнопками)
passwordтекстовое поле для ввода пароля, в котором все вводимые символы заменяются звездочкой
checkboxполе для установки флажка, который можно установить или сбросить
submitкнопка, при нажатии которой происходит отправка данных, введенных в форму
resetкнопка, при нажатии которой вся форма очищается. Точнее сказать, все элементы формы получают значения по умолчанию
buttonобычная командная кнопка

Ввод текста и пароля

Одним из самых простых типов элементов формы является текстовое поле, предназначенное для ввода текста из одной строки. Данный тип ввода текста установлен по умолчанию, а следовательно, именно однострочное поле отобразится, если вы забудете указать атрибут type. Для добавления однострочного поля ввода текста в форму следует внутри элемента <input> прописать атрибут type со значением text:

<input type="text">

Поле ввода пароля является разновидностью обычного текстового поля. Оно поддерживает те же атрибуты, что и однострочное текстовое поле. Атрибут name устанавливает имя поля ввода пароля, которое будет отправлено на сервер вместе с паролем, введенным пользователем. Чтобы создать поле для ввода пароля, необходимо задать значение password атрибуту type (password (англ.) — пароль):

<input type="password">

Пример создания формы с полем для ввода пароля:

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<form action="action_form.php" method="POST">
  <p>Ваш логин: 
  <input type="text" name="login" size="15" maxlength="30" value="Ваше имя">  
  </p> 
  <p>Пароль: <input type="password" name="password" size="15" maxlength="30">  
  </p>
  <input type="submit"> 
</form>
</body>
</html>

Вместе с этим атрибутом можно использовать атрибут maxlenght, значение которого определяет максимальное количество символов, которые можно ввести в данную строку. Можно также задать длину поля ввода, используя атрибут size. По умолчанию, в большинстве браузеров ширина текстового поля ограничена 20 символами. Для управления шириной элементов новых форм, вместо атрибута size, рекомендуется использовать средства каскадных таблиц стилей (CSS).
Атрибут value задает значение, которое по умолчанию отображается в текстовом поле в момент загрузки формы. Введя в поле значение по умолчанию, можно пояснить пользователю, какие именно данные и в каком формате вы хотите, чтобы пользователь сюда занес. Это как образец, ведь пользователю гораздо удобнее заполнять форму, видя перед собой пример.

Переключатели (radio)

Элемент <input> типа radio создает переключатели, которые используют принцип логического «ИЛИ», позволяя выбрать только одно из нескольких значений: если вы выбираете одно положение, то все остальные становятся неактивными. Основной синтаксис элемента-переключателя:

<input type="radio" name="имя _переменной" value="значение">

Атрибут name для переключателей обязателен и играет важную роль в объединении нескольких элементов-переключателей в группу. Для объединения переключателей в группу необходимо установить одинаковое значение атрибута name и разное значение атрибута value. Атрибут vаluе устанавливает значение выбранного переключателя, которое будет отправлено серверу. Значение каждого элемента-переключателя должно быть уникальным внутри группы, для того, чтобы сервер знал, какой вариант ответа выбрал пользователь.
Наличие атрибута checked (с англ. — установлен) у элемента-переключателя указывает на то, какой из предлагаемых вариантов должен быть выбран по умолчанию при загрузке страницы, если это необходимо. Данный атрибут может быть установлен только у одного элемента-переключателя из группы:

Пример: Использование переключателей

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<form action="action_form.php" method="POST">
  <p>Сколько Вам лет?</p>
  <ol>
    <li><input type="radio" name="age" value="18" checked>младше 18</li>
    <li><input type="radio" name="age" value="18-24">от 18 до 24</li>
    <li><input type="radio" name="age" value="25-34">от 25 до 35</li>
    <li><input type="radio" name="age" value="35-50">более 35</li>
  </ol>
  <input type="submit"<
</form>
</body>
</html>

Флажки (checkbox)

Элемент <input> типа checkbox создает флажки, которые напоминают переключатели тем, что дают пользователю возможность выбирать из предложенных вами вариантов. Главным отличием от переключателей является то, что посетитель может выбрать сразу несколько вариантов, а сами флажки обозначаются квадратиками, а не кружочками. Как и в случае с переключателями, группа флажков создается путем назначения каждому пункту одного и того же значения атрибута name, однако каждый флажок имеет собственное значение. Основной синтаксис флажка:

<input  type="checkbox"  name="имя _переменной"  value="значение">

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

Пример: Использование переключателей

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<form action="action_form.php" method="POST">
<p>Какие музыкальные жанры Вы любите?</p>
<ol>
  <li><input type="checkbox" name="musik" value="juze" checked>Джаз</li>
  <li><input type="checkbox" name="musik" value="bluse" checked>Блюз</li>
  <li><input type="checkbox" name="musik" value="rock">Рок</li>
  <li><input type="checkbox" name="musik" value="shanson">Шансон</li>
  <li><input type="checkbox" name="musik" value="kantry">Кантри</li>
</ol>
<input type="submit"<
</form>
</body>
</html>

Кнопки подтверждения (submit) и очистки (reset)

Элемент <input> типа submit создает кнопку, при нажатии которой происходит отправка браузером серверному сценарию на обработку данных, введенных пользователем в форму. Если создаем кнопку, очищающую форму, то присваиваем атрибуту type значение «reset». Элементу <input> типа submit может быть присвоен необязательный атрибут name. Атрибут vаluе используется в данном элементе для указания текста, обозначающего надпись на кнопке. По умолчанию в браузерах на кнопке пишется «Отправить» (Submit), если вас данная надпись не устраивает — введите ее самостоятельно. Поскольку в разных браузерах стили кнопок подтверждения могут отличаться, поэтому лучше самостоятельно настроить стиль кнопки, воспользовавшись средствами CSS либо использовать графические кнопки.
Создание кнопок подтверждения и очистки:

Пример: Использование submit и reset

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<form action="action_form.php" method="POST">
 <p>Подпишись на рассылку новостей:</p> 
  <input type="text" name="email">
  <input type="submit" name="podpisatsya" value="Подписаться">
  <input name="reset" type="reset" value="Очистить">
</form>
</body>
</html>

Атрибут action.

Главным для элемента <form> является атрибут action, который указывает обработчик данных для формы. Обработчик данных — это файл, описывающий, что нужно делать с данными формы. В качестве результата этой обработки выдается новая HTML-страница, которая возвращается браузеру. Другими словами в атрибуте action указывается URL-путь к файлу-обработчику на сервере (иногда называемого страницей сценария) для обработки формы. Синтаксис следующий:

<form action="http://mytestserver.com/namefolder/obrabotchik.php">…    </form>

Файл обработки находится на сервере mytestserver.com в папке namefolder и название серверного сценария, который будет обрабатывать данные — obrabotchik.php. Именно ему и будут переданы все данные, введенные вами в форму на веб-странице. Расширение .php указывает на то, что указанная форма обрабатывается сценарием написанном на языке PHР. Сам обработчик может быть написан на другом языке, например это может быть язык сценариев Python, Ruby и др.
Желательно всегда задавать значение атрибута action. Если форма должна передать значения на ту же страницу, где она расположена в качестве значения атрибута action укажите пустую строку: action=»».

Атрибут method

Атрибут method задает то, каким образом информация должна быть передана на сервер. Выбор метода отправки формы зависит от данных, которые необходимо отправить вместе с ней. Здесь основную роль играет объем этих данных. Наиболее популярными являются два метода передачи исходных данных вашей формы из браузера на сервер: GET и POST. Метод устанавливается любой на выбор, и если вы его не указали, по умолчанию будет использоваться GET. Рассмотрим применение каждого из них.

Метод POST

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

Метод GET

Как вы уже знаете основная работа браузера — это получать веб-страницы от сервера. Так вот, когда вы используете метод GET, ваш браузер просто получает веб-страницу, как делает это всегда. Метод GET также упаковывает данные формы, но, прежде чем отправить запрос серверу, присоединяет их в конец URL-адреса. Чтобы понять, как работает метод GET, давайте посмотрим его в действии. Откройте в блокноте (например Notepad++) первый пример из этого урока (Пример: Простая HTML-форма) и внесите в HTML-код небольшое изменение:

<form action="" method="GET">

т.е. замените POST на GET.
Сохраните файл под именем file_name.html и обновите страницу браузера (F5), затем заполните форму, например Вася Пупкин, и нажмите кнопку «Отправить». В адресной строке браузера Вы увидите что-то типа этого:

...file_name.html?firstname=Вася&lastname=Пупкин

Теперь вы видите имя каждого элемента формы, а также его значение, прямо здесь, в URL-адресе.
URL-адрес отделяется от остальных данных формы символом знака вопроса, а имена и значения переменных разделяются знаком амперсанд (&).
Этот метод нужно использовать, если вы не передаете больших объемов информации.
Этот метод не подойдет, если данные в вашей форме являются конфиденциальными, например хранят номер банковской карты или пароль.
Кроме того, метод GET непригоден, если вместе с формой вы хотите переслать на сервер файлы.

Группировка элементов формы

Элементы формы, связанные по смыслу, можно сгруппировать между тегами <fieldset> и </fieldset>. Браузер отобразит <fieldset> в виде рамки вокруг группы элементов формы. Внешний вид рамки может быть изменен с помощью каскадных таблиц стилей (CSS).
Чтобы добавить заголовок для каждой группы, понадобится элемент <legend>, который задает встраиваемый в рамку текст заголовка группы:

Пример: Использование тега <fieldset>

Задачи



Формы HTML уроки для начинающих академия


Пример HTML-формы

Элемент <form>

Элемент HTML <form> определяет форму, которая используется для сбора данных пользователя:

<form>
.
form elements
.
</form>

HTML-форма содержит элементы формы.

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

Элемент < input >

Элемент <input> является наиболее важным элементом формы.

<input>элемент может отображаться несколькими способами в зависимости от атрибута Type .

Вот несколько примеров:

ТипОписание
<input type=»text»>Определяет однострочное текстовое поле ввода
<input type=»radio»>Определяет переключатель (для выбора одного из множества вариантов)
<input type=»submit»>Определяет кнопку отправки (для отправки формы)

Далее в этом учебнике вы узнаете намного больше о типах ввода.

Ввод текста

<input type="text"> Определяет однострочное поле ввода для text input:

Пример

<form>
  First name:<br>
  <input type=»text» name=»firstname»><br>
  Last name:<br>
  <input type=»text» name=»lastname»>
</form>

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

Имя:

Фамилия:

Примечание: Сама форма не видна. Также обратите внимание, что ширина текстового поля по умолчанию составляет 20 символов.

Входной сигнал переключателя

<input type="radio"> Определяет переключатель.

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

Пример

<form>
  <input type=»radio» name=»gender» value=»male» checked> Male<br>
  <input type=»radio» name=»gender» value=»female»> Female<br>
  <input type=»radio» name=»gender» value=»other»> Other
</form>

Полное руководство по элементам HTML-формы

Создание HTML-формы – неотъемлемая часть сайта и важный навык веб-разработчиков. Используйте это руководство для изучения элементов HTML-форм.


Введение

HTML-формы требуются для сбора данных от посетителей сайта. Например, при регистрации на Uber, Netflix или Facebook пользователь вводит свое имя, почту и пароль.

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

Элемент Form

Элемент Form (<form></form>) оборачивает все элементы внутри HTML-формы.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <form action="index.html" method="post">
      
      </form>
    </body>
</html>

Атрибуты:

  • action – это веб-адрес (URL) программы, которая обрабатывает данные формы.
  • Method – это HTTP метод, который используется браузером для отправки формы.
  • Возможные значения: POST или GET. POST – отправляет данные формы на сервер.
    GET – данные отправляются внутри URL, параметры разделяются знаком «?».

Примечание: Нельзя создать форму внутри формы. То есть использование элемента <form> внутри другого элемента <form> недопустимо.

Элемент Input

Это самый популярный элемент HTML-формы. Используется для создания текстовых полей, в которые пользователь вводит информацию (например: пароль, адрес почты и т. д.).

Создадим текстовое поле, в которое пользователь сможет ввести свое имя.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <form action="index.html" method="post">
          <input type="text" name="student_name">
      </form>
    </body>
</html>

В примере выше над тегом input были добавлены три атрибута.

type

Указывает на тип ввода. При значении text пользователь должен вводить текстовые данные. У этого атрибута имеется множество значений, например, email, tel (для номера телефона), password и т. д.

Пример: при попытке зайти в свой профиль на сайте (Amazon/Netflix) необходимо указать почту и пароль. Для этих целей используется элемент input. Атрибуты type будут иметь значения email и password соответственно.

id

Это не обязательное, но весьма полезное поле HTML-формы. Например, для определения элементов в CSS/JavaScript. Идентификаторы используются для сопоставления меток с нужными элементами управления формой.

name

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

placeholder

Атрибут подсказывает пользователю, что именно необходимо ввести в поле ввода HTML-формы. Исчезает, как только пользователь начинает печатать в поле.

Примечание: Использование разных значений в атрибуте type выводит разный результат:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <form action="index.html" method="post">
          <input type="text" name="student_name">
          <input type="email" name="student_email">
          <input type="password" name="student_password">
      </form>
    </body>
</html>

Элементы input без placeholder:

Элементы input с placeholder:

Элемент textarea

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

Элемент <textarea> не является самозакрывающимся тегом, поэтому требует открывающей и закрывающей скобки.

Атрибуты:

  • id – см. <input/>.
  • name – см. <input/>.
  • cols – задает видимую ширину текстовой области.
  • rows – задает видимое количество строк в текстовой области.
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <form action="index.html" method="post">
          <textarea name="student_bio"></textarea>
      </form>
    </body>
</html>

Примечание: В большинстве браузеров можно изменять размер элемента.

Элемент button

Один из важнейших элементов HTML-формы. Без кнопки вы не сможете отправить и обработать данные формы на сервере.

В элементе задается атрибут type, который может принимать три разных значения: submit, reset и button.

Атрибуты:

  • type=”reset” – при нажатии очищает все данные формы.
  • type=”button” –  в нем нет какого-то стандартного поведения. В основном используется в JavaScript для программирования настраиваемого поведения.
  • type=”submit” – стандартное поведение кнопки «Отправить», т. е. передача данных на сервер.
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <form action="index.html" method="post">
        
          <input type="text" name="student_name">
          <input type="email" name="student_email">
          <input type="password" name="student_password">
          
          <textarea name="student_bio"></textarea>
          
          <button type="submit">Submit</button>
        
      </form>
    </body>
</html>

Элемент label

Пока что пользователь не сможет понять, для чего нужен каждый элемент HTML-формы. Вы не можете предугадать, куда вводить адрес почты, а куда – пароль. Формы смотрятся недоделанными и непонятными.

Каждую строку HTML-формы можно отметить элементом label.

Наиболее популярным атрибутом label является for.

Атрибуты:

for – связывает метку строки с определенным элементом формы. Соответствие проверяется по ID. Значением атрибута ID для элемента input в примере выше является email. Оно совпадает со значением атрибута for для элемента label. Таким образом, оба элемента связаны.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <form action="index.html" method="post">
          <label for="name">Name</label>
          <input type="text" name="student_name">

          <label for="mail">Email</label>
          <input type="email" name="student_email">

          <label for="password">Password</label>
          <input type="password" name="student_password">

          <label for="bio">Biography</label>
          <textarea name="student_bio"></textarea>

          <button type="submit">Submit</button>
      </form>
    </body>
</html>

Примечание: если навести мышкой на метку (название строки), то активируется поле ввода, связанное с данной меткой Это стандартное поведение элемента.

Меню select

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

Для экономии места в интерфейсе рекомендуется выносить все списки длиннее 4-5 пунктов в меню select.

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

Элементу <select> нужны открывающие и закрывающие теги.

<select> отображает выпадающее меню с заданными значениями. Сам по себе элемент select не выполняет никаких действий, т.к. ему нужны дополнительные теги (элементы option). Здесь можно провести параллель с тегом <ul>, которому необходимы элементы <li>.

Атрибуты:

  • name – см. <input/>.
  • <option> – вариант выбора из меню select. Использует атрибут value.

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <form action="index.html" method="post">
          <h3>Your basic info</h3>

          <label for="name">Name</label>
          <input type="text" name="student_name">

          <label for="mail">Email</label>
          <input type="email" name="student_email">

          <label for="password">Password</label>
          <input type="password" name="student_password">

          <h3>Your profile</h3>

          <label for="bio">Biography</label>
          <textarea name="student_bio"></textarea>

          <label for="courses">Select Courses</label>
          <select name="student_courses">
              <option value="computer_engineering">Computer Science Engineering</option>
              <option value="slectrical_engineering">Electrical Engineering</option>
              <option value="mechanical_engineering">Mechanical Engineering</option>
              <option value="civil_engineering">Civil Engineering</option>
              <option value="chemical_engineering">Chemical Engineering</option>
          </select>
          
        <button type="submit">Submit</button>
      </form>
    </body>
</html>

Для формы выбора курса также задается элемент label. Кроме того, списки можно упорядочить по логическим группам. Для этих целей используется элемент <optgroup>.

Атрибуты:

label: – название группы опций (вариантов). В примере ниже варианты выбора делятся на две группы с меткой Engineering (Проектирование) и Management (Управление).

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <form action="index.html" method="post">
          <h3>Your basic info</h3>

          <label for="name">Name</label>
          <input type="text" name="student_name">

          <label for="mail">Email</label>
          <input type="email" name="student_email">

          <label for="password">Password</label>
          <input type="password" name="student_password">

          <h3>Your profile</h3>

          <label for="bio">Biography</label>
          <textarea name="student_bio"></textarea>

          <label for="courses">Select Courses</label>
          <label for="courses">Select Courses</label>
          <select name="student_courses">
            <optgroup label="Engineering">
              <option value="computer_engineering">Computer Science</option>
              <option value="electrical_engineering">Electrical</option>
              <option value="mechanical_engineering">Mechanical</option> 
              <option value="chemical_engineering">Chemical</option>
              <option value="civil_engineering">Civil</option>
            </optgroup>
            <optgroup label="Management">
              <option value="finance_management">Finance Management</option>
              <option value="technology_management">Technology</option>
              <option value="marketing_management">Marketing</option>
              <option value="business_administration">Business</option>     
            </optgroup>
          </select>

        <button type="submit">Submit</button>
      </form>
    </body>
</html>

Радиокнопки

Меню select – это идеальное решение для HTML-формы с объемным списком. Однако при наличии 5 и менее вариантов выбора, лучше реализовать их через радиокнопки.

В отличие от меню select, радиокнопки (radio button) сразу показывают все доступные опции. Пользователь по-прежнему может выбрать только один вариант.

Атрибуты:

  • name – см. <input/>.
  • value – определение значений заданных вариантов.

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <form action="index.html" method="post">
          <h3>Your basic info</h3>

          <label for="name">Name</label>
          <input type="text" name="student_name">

          <label for="mail">Email</label>
          <input type="email" name="student_email">

          <label for="password">Password</label>
          <input type="password" name="student_password">

          <label>Age:</label>
          <input type="radio" value="under_16" name="user_age"><label for="under_16">Under 16</label><br>
          <input type="radio" value="over_16" name="user_age"><label for="over_16">16 or Older</label>

          <h3>Your profile</h3>

          <label for="bio">Biography</label>
          <textarea name="student_bio"></textarea>

          <label for="courses">Select Courses</label>
          <select name="student_courses">
            <optgroup label="Engineering">
              <option value="computer_engineering">Computer Science Engineering</option>
              <option value="slectrical_engineering">Electrical Engineering</option>
              <option value="mechanical_engineering">Mechanical Engineering</option>
              <option value="civil_engineering">Civil Engineering</option>
              <option value="chemical_engineering">Chemical Engineering</option>
            </optgroup>
            <optgroup label="Management">
              <option value="finance_management">Finance Management</option>
              <option value="technology_management">Technology Management</option>
              <option value="marketing_management">Marketing Management</option>
              <option value="business_administration">Business Administration</option>
            </optgroup>
          </select>

        <button type="submit">Submit</button>
      </form>
    </body>
</html>

Примечание: Внутри одной группы радиокнопок атрибут name должен быть одинаковым.

Чекбоксы

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

Атрибуты:

  • name – см. <input/>.
  • value – определение значений заданных вариантов.
  • checked – отметка о предвыборе данного варианта, т.к. по умолчанию у чекбоксов нет выбранного значения. Важно помнить, что это логический атрибут (boolean).
<input type="checkbox" checked value="abhishek" name="user_name" />

В примере ниже каждый отдельный вариант использовался с метками (элементом label). Для объединения чекбоксов и меток внутри HTML-формы использовался атрибут for для label и атрибут id для checkbox.

Примечание: поскольку кликать по маленьким чекбоксам неудобно, лучше оборачивать элемент <label>  вокруг каждого чекбокса. Тогда при клике в области метки выделение чекбокса будет добавляться или сниматься. Однако в примере ниже этого не сделано.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <form action="index.html" method="post">
          
          <h3>Your basic info</h3>
          
          <label for="name">Name</label>
          <input type="text" name="student_name">

          <label for="mail">Email</label>
          <input type="email" name="student_email">

          <label for="password">Password</label>
          <input type="password" name="student_password">

          <label>Age:</label>
          <input type="radio" value="under_16" name="user_age"><label for="under_16">Under 16</label><br>
          <input type="radio" value="over_16" name="user_age"><label for="over_16">16 or Older</label>

          <h3>Your profile</h3>
          
          <label for="bio">Biography</label>
          <textarea name="student_bio"></textarea>

          <label for="courses">Select Courses</label>
          <select name="student_courses">
            <optgroup label="Engineering">
              <option value="computer_engineering">Computer Science Engineering</option>
              <option value="slectrical_engineering">Electrical Engineering</option>
              <option value="mechanical_engineering">Mechanical Engineering</option>
              <option value="civil_engineering">Civil Engineering</option>
              <option value="chemical_engineering">Chemical Engineering</option>
            </optgroup>
            <optgroup label="Management">
              <option value="finance_management">Finance Management</option>
              <option value="technology_management">Technology Management</option>
              <option value="marketing_management">Marketing Management</option>
              <option value="business_administration">Business Administration</option>
            </optgroup>
          </select>

          <label>Interests:</label>
          <input type="checkbox" value="interest_engineering" name="user_interest"><label for="engineering">Engineering</label><br>
          <input type="checkbox" value="interest_business" name="user_interest"><label for="business">Business</label><br>
          <input type="checkbox" value="interest_law" name="user_interest"><label for="law">Law</label>
        
        <button type="submit">Submit</button>
      </form>
    </body>
</html>

Отличия чекбоксов от радиокнопок HTML-формы

Чекбокс может существовать сам по себе. Радикнопки появляются только в качестве группы (минимум 2 кнопки).
В отличие от радиокнопки выбор чекбокса не является обязательным.

Конечный результат

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

Вы можете добавить в эти примеры CSS и создать собственные формы.

Перевод статьи Abhishek Jakhar: A step-by-step guide to getting started with HTML forms

Формы и их составляющие (form, input) в HTML

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

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

Одним из простейших примеров формы может быть форма авторизации:
<form action="/index.php" method="POST">
   Пожалуйста, введите мэйл и пароль:<br>
   <input type="text" name="email" value="" placeholder="Ваш мэйл" required><br>
   <input type="password" name="password" value="" placeholder="Ваш пароль"><br>
   <input type="submit" value="Войти на сайт">
</form>
Если создать html файл и вставить в него код из примера выше, то в браузере такой файл отобразится как html страница со следующим содержанием: — в этой форме есть два поля для ввода и одна кнопка. Все эти элементы строятся самим браузером.

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

Рассмотрим построчно теги из примера.

<form> … </form> — этот тег формы. Внутри него могут находиться различные элементы: текстовые поля, поля для ввода пароля и т.п. Во время отправки формы все поля внутри формы передадут свои значения на страницу, адрес которой указан в атрибуте action=»…». Способ передачи данных указывается в атрибуте method=»…». Подробнее о передаче данных из формы на сайт можно прочитать в разделе по программированию, к примеру, на языке PHP. В этой статье рассмотрим только виды полей для вода информации.

<input> — этот тег может отображать различные элемены в зависимости от значения атрибута type=»…». На третьей строке он используется как поле для ввода текста type=»text». А на четвёртой стройке он используется для ввода пароляtype=»password». Отличие типов «text» от «password» в том, что в поле для ввода пароля все символы скрываются, заменяясь на звёздочки или точки.

В конце стретьей строки есть атрибут required. В переводе означает «обязательный». Если попытаться отправить форму (в нашем случае нажать на кнопку «Войти на сайт») без заполнения этого поля, то форма не отправится и выдаст предупреждение: На пятой строке <input> используется с атрибутом type=»submit». В результате чего браузер рисует кликабельную кнопку, которая запускает процесс отправки содержимого формы.

В атрибуте value=»…» задаётся значение, которое принимает элемент формы. К примеру, если в поле с атрибутом type=»text» задать value=»Это текст в форме», то после загрузки html страницы в этом текстовом поле будет стоять текст «Это текст в форме». В случае с полем type=»submit» значение в атрибуте value=»…» устанавливает надпись на кнопку отправки формы.

В примере все текстовые поля имеют атрибут value=»» (value равно пустоте, между двойными кавычками «» ничего нет). Поэтому на заднем фоне поля для ввода отображается текст-заглушка, которая сразу прячется, как только начинается ввод в поле. Текст этой заглушки можно задать через атрибут placeholder=»…».

Далее разберём подробнее какие ещё типы полей могут быть в формах. Рассмотрим самые востребованные.

input type=»radio»

Поле для ввода с атрибутом type=»radio» помогает сделать переключатель вариантов. К примеру, если пользователь должен выбрать только один вариант из списка, то код формы будет таким:
<form action="/index.php" method="POST">
Выберите сыр:<br>
<input name="cheese" type="radio" value="v1">Чеддер<br>
<input name="cheese" type="radio" value="v2" checked>Блю<br>
<input name="cheese" type="radio" value="v3">Камбоцола<br>
<input name="cheese" type="radio" value="v4">Морбье<br>
<input name="cheese" type="radio" value="v5">Смоленский<br>
<input name="cheese" type="radio" value="v6">Чечил<br>
</form>
На экране негобраузера форма будет выглядеть так: Обратите внимание, что все поля имеют атрибут name=»cheese» с одинаковым значением. Это необходимо, потому что на одной странице могут находится несколько форм с радиокнопками. Но переключатель будет работать только внутри группы радиокнопок с одинаковым значением атрибута name. А значение value=»…» должно быть разным. именно value у выбранного пункта будет передано во время отправки формы.

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

input type=»checkbox»

Если есть необходимость выбрать несколько пунктов из предложенных, то необходимо использовать type=»checkbox»:
<form action="/index.php" method="POST">
Выберите сыр:<br>
<input name="cheese" type="checkbox" value="v1">Чеддер<br>
<input name="cheese" type="checkbox" value="v2" checked>Блю<br>
<input name="cheese" type="checkbox" value="v3">Камбоцола<br>
<input name="cheese" type="checkbox" value="v4" checked>Морбье<br>
<input name="cheese" type="checkbox" value="v5" checked>Смоленский<br>
<input name="cheese" type="checkbox" value="v6">Чечил<br>
</form>
Браузер отрисует такие элементы как поля, в которых можно поставить галочку. Как и в случае с type=»radio» можно задать checked для тех пунктов, которые должны быть отмечены по умолчанию после загрузки страницы.

input type=»file»

Одним из самых востребованных типов вода полей является поле для выбора файла type=»file». HTML формы с кнопкой загрузки файла выглядит так:
<form action="/index.php" method="POST">
Загрузите фото сыра:<br><br>
<input type="file"><br><br>
<input type="submit" value="Загрузить">
</form>

В браузере форма из этого примера будет выглядеть так: При клике на кнопку выбора файла откроется окно, где пользователь сможет указать файл для загрузки. Кнопка «Загрузить» (она же <input type=»submit»>) начинает процесс отправки формы вместе с выбранным файлом.

<textarea>

Если необходимо получить от пользователя очень длинный текст, то записывать его через текстовое поле <input type=»text»> будет проблематично, потому что это поле вмещает только одну строку. К счастью, есть более удобное многострочное поле с возможностью изменения его размера. Такое поле создаётся с помощью тега <textarea>. Этот тег парный — он имеет открывающую и закрывающую часть. HTML код формы с этим полем выглядит так:
<form action="/index.php" method="POST">
Напишите стих про мышей:<br><br>
<textarea></textarea>
</form>
Браузер отобрасит поле для ввода текста в несколько строк с возможностью изменения размера за правый-нижний угол: В отличии от других input полей, у textarea нет атрибута value. Значение textarea находится непосредственно между тегами <textarea>…</textarea>. И если необходимо задать текст, который будет в этом поле после загрузки страницы, то нужно писать его именно между открывающимся и закрывающимся тегом <textarea>…</textarea>

HTML-форм

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

Элемент

Элемент HTML определяет форму, которая используется для собрать пользовательский ввод:

<форма>
,
элементы формы
,

HTML-форма содержит элементов формы .

Элементы формы — это различные типы элементов ввода, такие как: текстовые поля, флажки, радио кнопки, кнопки отправки и многое другое.

Элемент

Элемент является наиболее важным элементом формы.

Элемент отображается несколькими способами, в зависимости от типа атрибут.

Вот несколько примеров:

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

Вы узнаете намного больше о типах ввода позже в этом уроке.

Текстовые поля

определяет однострочное поле ввода для ввод текста .

Пример

Форма с двумя полями для ввода текста:

<форма>

Попробуй сам »

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

Примечание: Сама форма не видна.Также обратите внимание, что ширина по умолчанию поля ввода составляет 20 символов.

Элемент

Обратите внимание на использование элемента в пример выше.

Тэг определяет метку для многих элементы формы.

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

Элемент также помогает пользователям, которые имеют сложность нажатия на очень маленькие регионы (такие как переключатели или флажки) — потому что когда пользователь щелкает текст внутри элемента

Атрибут для тега

Радио кнопки

определяет радиокнопку .

Радиокнопки позволяют пользователю выбрать ОДИН из ограниченного числа вариантов.

Пример

Форма с переключателями:



Попробуй сам »

Вот как HTML-код выше будет отображаться в браузере:

Кобель
Женский
Другой

Кнопка «Отправить»

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

Обработчик форм — это обычно страница на сервере со скриптом для обработки входные данные.

Обработчик формы указан в действии формы атрибут.

Пример

Форма с кнопкой отправки:


Попробуй сам »

Вот как HTML-код выше будет отображаться в браузере:

Атрибут действия

Атрибут action определяет действие, которое будет выполнено при отправке формы.

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

В приведенном выше примере данные формы отправляются на страницу на сервере с именем «/action_page.php». Эта страница содержит серверный скрипт, который обрабатывает данные формы:

action = «/ action_page.php «>

Если атрибут action опущен, действие устанавливается на текущую страницу.

Целевой атрибут

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

Значением по умолчанию является « _self », что означает, что форма будет отправлена ​​в текущем окне.

Чтобы открыть результат формы на новой вкладке браузера, используйте значение « _blank ».

Пример

Здесь представленный результат откроется в новой вкладке браузера:

Попробуй сам »

Другими допустимыми значениями являются « _parent », « _top » или имя, представляющее имя iframe.

Атрибут метода

Атрибут метода указывает метод HTTP ( GET или POST ) для использования при отправке данных формы.

Пример

Используйте метод GET при отправке формы:

Попробуй сам »

или:

Пример

Используйте метод POST при отправке формы:

Попробуй сам »

Когда использовать GET?

Метод HTTP по умолчанию при отправке данных формы — GET.

Однако, когда используется GET, данные формы будут видимыми в адресе страницы поле :

/action_page.php?firstname=John&lastname=Doe

Примечания по GET:

  • Добавляет данные формы в URL в парах имя / значение
  • Длина URL-адреса ограничена (2048 символов)
  • Никогда не используйте GET для отправки конфиденциальных данных! (будет видно в URL)
  • Полезно для отправки форм, когда пользователь хочет добавить результат в закладки
  • GET лучше для незащищенных данных, таких как строки запросов в Google

Когда использовать POST?

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

Примечания по почте:

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

Атрибут имени

Каждое поле ввода должно иметь имя атрибут для отправки.

Если атрибут name опущен, данные этого поля ввода не будут отправлены вообще.

Пример

В этом примере не будет указано значение поля ввода «Имя»:


Попробуй сам »

HTML Упражнения

Вот список всех атрибутов:

Атрибут Описание
принять кодировку Указывает кодировку, используемую в отправленной форме (по умолчанию: страница набор символов).
Действие Указывает адрес (URL), куда следует отправить форму (по умолчанию: страница отправки).
автозаполнение Указывает, должен ли браузер автоматически заполнять форму (по умолчанию: включено).
энктип Указывает кодировку представленных данных (по умолчанию: URL-кодированная).
метод Указывает метод HTTP, используемый при отправке формы (по умолчанию: GET).
имя Указывает имя, используемое для идентификации формы (для использования DOM: document.forms.name).
Новалидат Указывает, что браузер не должен проверять форму.
цель Указывает цель адреса в атрибуте действия (по умолчанию: _self).

Подробнее об атрибутах формы вы узнаете в следующих главах.


,

типов ввода HTML

В этой главе описываются различные типы для элемента HTML .

Типы ввода HTML

Вот различные типы ввода, которые вы можете использовать в HTML:

Тип ввода текста

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

Пример

<форма>

Попробуй сам »

Вот как HTML-код выше будет отображаться в браузере:

Имя:

Фамилия:

Тип ввода Пароль

определяет поле пароля :

Пример

<форма>

Попробуй сам »

Вот как HTML-код выше будет отображаться в браузере:

Имя пользователя:

Пароль:

Символы в поле пароля маскируются (отображаются в виде звездочек или кружков).

Тип ввода Отправить

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

Обработчик форм — это обычно страница сервера со скриптом для обработки входные данные.

Обработчик формы указан в действии формы атрибут:

Пример


Попробуй сам »

Вот как HTML-код выше будет отображаться в браузере:

Если вы опустите атрибут значения кнопки отправки, кнопка получит текст по умолчанию:

Пример


Попробуй сам »

Тип входа Сброс

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

Пример


Попробуй сам »

Вот как HTML-код выше будет отображаться в браузере:

Если вы измените входные значения и затем нажмете кнопку «Сброс», данные формы будут сброшены до значений по умолчанию.

Тип входа Радио

определяет радиокнопку .

Радиокнопки позволяют пользователю выбрать ТОЛЬКО ОДИН из ограниченного числа вариантов:

Пример



Попробуй сам »

Вот как HTML-код выше будет отображаться в браузере:

Мужской
Женский
Другой

Тип входа Флажок

определяет флажок .

Флажки позволяют пользователю выбирать НОЛЬ или БОЛЬШЕ вариантов из ограниченного числа вариантов.

Пример



Попробуй сам »

Вот как HTML-код выше будет отображаться в браузере:

У меня есть велосипед
У меня есть машина
У меня есть лодка

Кнопка ввода типа

определяет кнопку :

Пример

Попробуй сам »

Вот как HTML-код выше будет отображаться в браузере:

Тип входа Цвет

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

В зависимости от поддержки браузера в поле ввода может отображаться палитра цветов.

Пример


Попробуй сам »

Тип ввода Дата

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

В зависимости от поддержки браузера в поле ввода может отображаться средство выбора даты.

Пример


Попробуй сам »

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

Пример


Попробуй сам »

Тип ввода Datetime-local

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

В зависимости от поддержки браузера в поле ввода может отображаться средство выбора даты.

Пример


Попробуй сам »

Тип входа Электронная почта

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

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

Некоторые смартфоны распознают тип электронной почты и добавляют «.com» к клавиатуре, чтобы соответствовать вводу электронной почты.

Пример


Попробуй сам »

Тип файла ввода

определяет поле выбора файла и кнопку «Обзор» для загрузки файла.

Пример


Попробуй сам »

Тип ввода Месяц

позволяет пользователю выбрать месяц и год.

В зависимости от поддержки браузера в поле ввода может отображаться средство выбора даты.

Пример


Попробуй сам »

Тип ввода Номер

определяет числовое поле ввода .

Вы также можете установить ограничения на то, какие номера принимаются.

В следующем примере показано числовое поле ввода, где вы можете ввести значение от 1 до 5:

Пример

<форма>
<метка для = "количество"> количество (от 1 до 5):
<тип ввода = "число" имя = "количество" min = "1" max = "5">

Попробуй сам »

Ограничения на ввод

Вот список некоторых общих ограничений ввода:

. Значение
Атрибут Описание
проверено Указывает, что поле ввода должно быть предварительно выбрано при загрузке страницы (для type = «checkbox» или type = «radio»)
инвалидов Указывает, что поле ввода должно быть отключено.
макс. Указывает максимальное значение для поля ввода
maxlength Указывает максимальное количество символов для поля ввода
мин Указывает минимальное значение для поля ввода
шаблон Задает регулярное выражение для проверки входного значения по сравнению с
только для чтения Указывает, что поле ввода доступно только для чтения (не может быть изменено)
требуется Указывает, что поле ввода является обязательным (должно быть заполнено).
размер Указывает ширину (в символах) поля ввода
шаг Указывает допустимые интервалы номеров для поля ввода
Указывает значение по умолчанию для поля ввода

Вы узнаете больше об ограничениях ввода в следующей главе.

В следующем примере показано числовое поле ввода, где вы можете ввести значение от 0 до 100 с шагом 10. Значение по умолчанию: 30:

Пример

<форма>
<метка для = "количество"> количество:
<вход тип = "число" имя = "количество" мин = "0" макс = "100" шаг = "10" значение = "30">

Попробуй сам »

Тип входного сигнала Диапазон

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

Пример


Попробуй сам »

Тип ввода Поиск

используется для полей поиска (поле поиска ведет себя как обычное текстовое поле).

Пример


Попробуй сам »

Тип входа Тел

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

Пример


Попробуй сам »

Тип ввода Время

позволяет пользователю выбрать время (без часового пояса).

В зависимости от поддержки браузера в поле ввода может отображаться указатель времени.

Пример


Попробуй сам »

Тип входа Url

используется для полей ввода, которые должны содержать URL-адрес.

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

Некоторые смартфоны распознают тип URL и добавляют «.com» к клавиатуре для соответствия URL-адрес.

Пример


Попробуй сам »

Тип ввода Неделя

позволяет пользователю выбрать неделю и год.

В зависимости от поддержки браузера в поле ввода может отображаться средство выбора даты.

Пример


Попробуй сам »

HTML Упражнения

Проверьте себя с помощью упражнений

Упражнение:

В приведенной ниже форме добавьте поле ввода для текста с именем «username».


<>


Отправить ответ »

Начните упражнение

Атрибут типа ввода HTML


,

HTML-тег формы


Пример

HTML-форма с двумя полями ввода и одной кнопкой отправки:

<форма действие = "/ action_page.php" method = "get">

Попробуй сам »

Ниже приведены примеры «Попробуйте сами».

Определение и использование

Тег используется для создания HTML-формы для пользовательского ввода.

Элемент может содержать один или несколько из следующих элементов формы:

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

Элемент
<форма> да да да да да

Атрибуты

Атрибут Значение Описание
принять кодировку набор символов Указывает кодировки символов, которые должны использоваться для отправки формы.
экшн URL Указывает, куда отправлять данные формы при отправке формы.
автозаполнение на
от		 Указывает, должна ли форма включать или отключать автозаполнение.
энктип заявка / x-www-form-urlencoded
multipart / form-data
текст / обычный		 Указывает, как данные формы должны быть закодированы при отправке их на сервер (только для method = «post»)
метод получить
пост		 Указывает метод HTTP, используемый при отправке данных формы
имя текст Указывает название формы
Новалидат Новалидат Указывает, что форма не должна проверяться при отправке
отн. внешняя
справка
лицензия
следующая
nofollow
noopener
noreferrer
открывалка
пред
поиск		 Определяет связь между связанным ресурсом и текущим документ
цель _blank
_self
_parent
_top		 Указывает, где отображать ответ, полученный после отправки формы

Глобальные атрибуты

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

Атрибуты события

Тег также поддерживает атрибуты событий в HTML.

Дополнительные примеры

Пример

HTML-форма с флажками:



Попробуй сам »

Пример

HTML-форма с радиокнопками:



<метка for = "male"> Male


<метка for = "female"> Female


<метка для = "другое"> другое



Попробуй сам »

Связанные страницы

Руководство по HTML

: формы HTML и ввод

HTML DOM ссылка: Форма объекта

Руководство по CSS: стилизация форм

Настройки CSS по умолчанию

Большинство браузеров отображают элемент со следующими значениями по умолчанию:

,

HTML Form Elements

В этой главе описываются все различные элементы формы HTML.

Элемент

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

Элемент может отображаться несколькими способами, в зависимости от типа атрибут.

Если атрибут type опущен, поле ввода получает тип по умолчанию: "текст".

Все Различные типы ввода рассматриваются в следующей главе: Типы ввода HTML.

Элемент определяет раскрывающийся список :

Пример

size = "3" >

Попробуй сам "

Разрешить множественный выбор:

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

Пример