path: root/files/ru/learn/forms/your_first_form/index.html

---
title: Ваша первая HTML форма
slug: Learn/Forms/Your_first_form
tags:
  - HTML-форма
  - Веб-форма
  - Форма
translation_of: Learn/Forms/Your_first_form
original_slug: Learn/HTML/Forms/Ваша_первая_HTML_форма
---
<div>{{LearnSidebar}}{{NextMenu("Learn/HTML/Forms/How_to_structure_an_HTML_form", "Learn/HTML/Forms")}}</div>

<p class="summary">Первая статья в данной главе предоставит вам первый опыт создания веб-форм, в том числе проектирование простой формы, её реализацию с использованием HTML-элементов управления формой и других HTML-элементов, добавление стилей через CSS и описание того, как данные из формы отсылаются на сервер. Мы более подробно остановимся на каждой из этих подтем далее в статье.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Необходимые знания:</th>
   <td>Базовое представление о компьютерах и <a href="/ru/docs/Learn/HTML/Введение_в_HTML">базовое понимание HTML</a>.</td>
  </tr>
  <tr>
   <th scope="row">Цель:</th>
   <td>Ознакомиться с веб-формами, узнать, для чего они используются, как их проектировать, и какие базовые HTML-элементы могут понадобиться в простых ситуациях.</td>
  </tr>
 </tbody>
</table>

<h2 id="Что_такое_Веб-форма">Что такое Веб-форма?</h2>

<p><strong>Веб-формы</strong> являются одним из основных элементов взаимодействия между пользователем и сайтом или приложением. Формы позволяют пользователю ввести данные, которые затем отправляются на сервер для их дальнейшей обработки и хранения или используются на стороне клиента для обновления интерфейса (например, добавление нового элемента в список или открытие и закрытие элемента интерфейса).</p>

<p><strong>Веб-формы</strong> — их также часто называют <strong>HTML-формы</strong> — состоят из одного или нескольких <strong>элементов управления форм</strong> (иногда их также называют <strong>виджетами</strong>) и некоторых дополнительных элементов для структурирования формы. Элементами управления могут быть однострочные или многострочные текстовые поля, выпадающие списки, кнопки, чекбоксы, радио-баттоны, большинство из которых создаются через html-элемент {{htmlelement("input")}}, однако есть и другие элементы, о которых тоже стоит узнать.</p>

<p>В элементах управления форм можно задать правила, указывающие на определенный формат данных или значений, которые могут быть введены (<strong>валидация форм</strong>), а также к ним могут быть добавлены текстовые строки, описывающие эти элементы для зрячих и незрячих пользователей.</p>

<h2 id="Проектирование_формы">Проектирование формы</h2>

<p>Перед тем, как начать программировать, всегда лучше остановиться и подумать о вашей форме. Создание быстрого наброска поможет определить верный набор данных, которые вы хотите получить от пользователя. С точки зрения UX, удобства использования интерфейса, важно помнить о том, что чем длиннее ваша форма, тем больше риск потерять пользователей. Сделайте форму краткой и лаконичной: спрашивайте только о той информации, которая вам действительно необходима.</p>

<p>Проектирование форм является важным этапом при создании сайта или приложения. Удобство использования форм (UX) выходит за рамки данной статьи, однако если вы хотите углубиться в эту тему, то вам следует прочитать следующие статьи:</p>

<ul>
 <li>На Smashing Magazine есть <a href="https://www.smashingmagazine.com/2018/08/ux-html5-mobile-form-part-1/" rel="external" title="http://uxdesign.smashingmagazine.com/tag/forms/">хорошие статьи на тему UX в HTML-формах</a>, включая старую, но всё ещё актуальную статью <a href="https://www.smashingmagazine.com/2011/11/extensive-guide-web-form-usability/" rel="external" title="http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/">Extensive Guide To Web Form Usability</a>.</li>
 <li>Также есть UXMatters — хороший ресурс с полезными советами от <a href="http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php" rel="external" title="http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php">базовых лучших практик</a> до сложных решений, таких как <a href="http://www.uxmatters.com/mt/archives/2010/03/pagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php" title="http://www.uxmatters.com/mt/archives/2010/03/pagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php">мультистраничные формы</a>.</li>
</ul>

<p>В этой статье мы создадим простую контактную форму. Давайте сделаем набросок.</p>

<p><img alt="The form to build, roughly sketch" src="/files/4579/form-sketch-low.jpg" style="border-style: solid; border-width: 1px; display: block; height: 352px; margin: 0px auto; width: 400px;"></p>

<p>Наша форма будет состоять из трёх текстовых полей и одной кнопки. Мы узнаём у пользователя его имя, e-mail и сообщение, которое он хочет отправить. После нажатия на кнопку данные будут отправлены на веб-сервер.</p>

<h2 id="Активное_обучение_Реализация_HTML-формы">Активное обучение: Реализация HTML-формы</h2>

<p>Итак, теперь мы готовы обратиться к HTML и создать нашу форму. Для этого мы будем использовать следующие HTML-элементы: {{HTMLelement("form")}}, {{HTMLelement("label")}}, {{HTMLelement("input")}}, {{HTMLelement("textarea")}} и {{HTMLelement("button")}}.</p>

<p>Прежде, чем продолжить, скопируйте <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">простой HTML-шаблон</a> — вы будете создавать свою форму внутри него.</p>

<h3 id="Элемент_HTMLelementform">Элемент {{HTMLelement("form")}}</h3>

<p>Создание форм начинается с элемента {{HTMLelement("form")}}:</p>

<pre class="brush:html; notranslate">&lt;form action="/my-handling-form-page" method="post"&gt;

&lt;/form&gt;</pre>

<p>Этот элемент формально определяет форму. Он является элементом-контейнером, как HTML-элементы {{HTMLelement("div")}} или {{HTMLelement("p")}}, но при этом он поддерживает некоторые специфические атрибуты для настройки поведения формы. Все атрибуты являются опциональными, но в стандартной практике принято указывать атрибуты <code>action</code> и <code>method</code>:</p>

<ul>
 <li>Атрибут <code>action</code> определяет адрес, куда должны быть посланы данные после отправки формы.</li>
 <li>Атрибут <code>method</code> указывает, какой HTTP-метод будет использован при передаче данных (это может быть "get" или "post").</li>
</ul>

<div class="note">
<p><strong>Примечание</strong>: Мы детальнее разберём работу этих атрибутов далее в статье <a href="/ru/docs/Learn/HTML/Forms/Отправка_и_Получение_данных_формы" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data">Отправка данных формы</a>.</p>
</div>

<p>Теперь добавьте указанный выше код с элементом {{htmlelement("form")}} внутрь тега {{htmlelement("body")}} в вашем HTML.</p>

<h3 id="Элементы_HTMLelementlabel_HTMLelementinput_и_HTMLelementtextarea">Элементы {{HTMLelement("label")}}, {{HTMLelement("input")}} и {{HTMLelement("textarea")}}</h3>

<p>Наша контактная форма несложная: часть, в которую будут вводиться данные, состоит из трёх текстовых полей, каждое их которых связано с HTML-элементом {{HTMLelement("label")}}:</p>

<ul>
 <li>Поле ввода для имени — {{HTMLelement("input/text", "single-line text field")}}</li>
 <li>Поле ввода для e-mail — {{HTMLelement("input/email", "input of type email")}}: однострочное текстовое поле, которое принимает только e-mail адреса.</li>
 <li>Поле ввода для сообщения — {{HTMLelement("textarea")}}, многострочное текстовое поле.</li>
</ul>

<p>В терминах HTML нам нужен код наподобие представленного ниже, чтобы добавить виджеты форм:</p>

<pre class="brush:html; notranslate" dir="rtl">&lt;form action="/my-handling-form-page" method="post"&gt;
  &lt;ul&gt;
    &lt;li&gt;
      &lt;label for="name"&gt;Name:&lt;/label&gt;
      &lt;input type="text" id="name" name="user_name"&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;label for="mail"&gt;E-mail:&lt;/label&gt;
      &lt;input type="email" id="mail" name="user_mail"&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;label for="msg"&gt;Message:&lt;/label&gt;
      &lt;textarea id="msg" name="user_message"&gt;&lt;/textarea&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/form&gt;</pre>

<p>Добавьте в вашу форму код, чтобы она выглядела так же, как форма выше.</p>

<p>Здесь элементы {{HTMLelement("li")}} используются для структурирования кода и облегчения стилизации (будет разобрано далее в статье). Для доступности и удобства использования мы указали определённый текст-подсказку для каждого элемента управления. Обратите внимание на использование атрибута <code>for</code> на каждом элементе {{HTMLelement("label")}}, который принимает в качестве значение <code>id</code> элемента управления формы, с которым он связан — этот подход позволяет привязать тексты-подсказки к форме.</p>

<p>Такой подход полезен тем, что позволяет пользователям с мышью, трекпадом и сенсорным устройством кликнуть на текст-подсказку для активации связанного с ним виджета формы, а также обеспечивает читабельное имя для пользователей скрин-ридеров. Вы найдёте более детальный разбор текстов-подсказок в статье <a href="/ru/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form" title="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form">Как структурировать HTML-форму</a>.</p>

<p>В HTML-элементе {{HTMLelement("input")}} самым важным атрибутом является атрибут <code>type</code>. Этот атрибут чрезвычайно важен, потому что он определяет внешний вид и поведение элемента {{HTMLelement("input")}}. Вы найдёте больше информации об этом далее в статье <a href="/ru/docs/Learn/HTML/Forms/Стандартные_виджеты_форм" rel="external" title="/en-US/docs/HTML/Forms/The_native_forms_widgets">Стандартные виджеты форм</a>.</p>

<ul>
 <li>В нашем простом примере мы используем {{HTMLelement("input/text")}} для первого поля ввода — значение по умолчанию для данного атрибута. Оно представляет однострочное текстовое поле, которое может принимать любые значения.</li>
 <li>Для второго поля ввода мы используем тип {{HTMLelement("input/email")}}, который представляет собой однострочное текстовое поле, которое принимает в качестве значения корректно составленный e-mail адрес. Он делает простое текстовое поле "умным", позволяя проверять введёные пользователем данные на корректность. Также это позволяет открывать более подходящие для ввода e-mail адреса клавиатуры (например, с символом @ при базовой раскладке) на устройствах с динамической клавиатурой, таких как смартфоны. Вы найдёте более подробную информацию про валидацию форм далее в статье <a href="/ru/docs/Learn/HTML/Forms/Валидация_формы" title="/en-US/docs/HTML/Forms/Data_form_validation">Валидация формы</a>.</li>
</ul>

<p>Последнее, но не менее важное, обратите внимание на разницу синтаксиса у HTML-элементов <code>&lt;input&gt;</code> и <code>&lt;textarea&gt;&lt;/textarea&gt;</code>. Это одна из странностей HTML. Тег <code>&lt;input&gt;</code> — это пустой элемент, то есть он не нуждается в закрывающем теге.  {{HTMLElement("textarea")}} — это непустой элемент, что говорит о том, что ему необходим закрывающий тег. Это важно при использовании одного из свойств форм: определения значения по умолчанию. Для определения начального значения для HTML-элемента {{HTMLElement("input")}} вам необходимо использовать атрибут <code>value</code> следующим образом:</p>

<pre class="brush:html; notranslate">&lt;input type="text" value="по умолчанию в этом элементе находится этот текст" /&gt;</pre>

<p>Если вы хотите определить значение по умолчанию для HTML-элемента {{HTMLElement("textarea")}}, вам просто нужно поместить это начальное значение между открывающим и закрывающим тегами:</p>

<pre class="brush:html; notranslate">&lt;textarea&gt;
по умолчанию в этом элементе находится этот текст
&lt;/textarea&gt;</pre>

<h3 id="Элемент_HTMLelementbutton">Элемент {{HTMLelement("button")}}</h3>

<p>Разметка нашей формы почти готова, но нам ещё необходимо добавить кнопку, которая позволит пользователю отправлять или "представлять" информацию после заполнения формы. Это делается с помощью HTML-элемента {{HTMLelement("button")}}. Необходимо добавить следующий код перед закрывающим тегом <code>&lt;/form&gt;</code>:</p>

<pre class="brush:html; notranslate">&lt;li class="button"&gt;
  &lt;button type="submit"&gt;Send your message&lt;/button&gt;
&lt;/li&gt;</pre>

<p>HTML-элемент {{HTMLelement("button")}} также принимает атрибут <code>type</code>, который может быть равен одному из трёх значений: <code>submit</code>, <code>reset</code> или <code>button</code>.</p>

<ul>
 <li>Клик по кнопке <code>submit</code> (значение по умолчанию) отправляет данные из формы на страницу, определённую в атрибуте <code>action</code> элемента {{HTMLelement("form")}}.</li>
 <li>Клик по кнопке <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">reset</span></font> сбрасывает значения всех элементов управления формы к их начальному значению. С точки зрения UX, это считается плохой практикой.</li>
 <li>Клик по кнопке <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">button</span></font> не делает ничего! Звучит странно, но на самом деле это очень удобно использовать для создания собственных кнопок — вы можете определить их поведение через JavaScript.</li>
</ul>

<div class="note">
<p><strong>Примечание</strong>: Вы также можете использовать HTML-элемент {{HTMLElement("input")}} с соответствующим атрибутом <code>type</code> , чтобы создать кнопку:  <code>&lt;input type="submit"&gt;</code>. Главным преимуществом HTML-элемента {{HTMLelement("button")}} в сравнении с элементом {{HTMLelement("input")}} заключается в том, что {{HTMLelement("input")}} может принимать в себя только простой текст, в то время как {{HTMLelement("button")}} позволяет использовать весь HTML для создания более стилизованного текста внутри кнопки.</p>
</div>

<h2 id="Базовая_стилизация_формы">Базовая стилизация формы</h2>

<p>Теперь после того, как вы закончили писать HTML-код формы, сохраните его и откройте в браузере. Вы увидите, что на данный момент форма выглядит достаточно не красиво.</p>

<p><img alt="" src="/files/4049/form-no-style.png" style="display: block; height: 170px; margin: 0px auto; width: 534px;"></p>

<div class="note">
<p><strong>Примечание</strong>: Если вам кажется, что ваш HTML-код работает не правильно, попробуйте сравнить его с нашим примером — посмотрите <a href="https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form.html">first-form.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html">также можно посмотреть код вживую</a>).</p>
</div>

<p>Красиво стилизовать формы достаточно сложно. Эта тема выходит за рамки этой статьи, поэтому на данный момент мы просто добавим некоторый CSS-код для приведения формы в нормальный вид.</p>

<p>Сначала необходимо добавить HTML-элемент {{htmlelement("style")}} на вашу страницу внутрь тега <code>head</code> в HTML. Это должно выглядить следущим образом:</p>

<pre class="brush: html notranslate">&lt;style&gt;

&lt;/style&gt;</pre>

<p>Внутри тега стилей добавьте следующий код:</p>

<pre class="brush:css; notranslate">form {
  /* Расположим форму по центру страницы */
  margin: 0 auto;
  width: 400px;
  /* Определим контур формы */
  padding: 1em;
  border: 1px solid #CCC;
  border-radius: 1em;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

form li + li {
  margin-top: 1em;
}

label {
  /* Определим размер и выравнивание */
  display: inline-block;
  width: 90px;
  text-align: right;
}

input,
textarea {
  /* Убедимся, что все поля имеют одинаковые настройки шрифта
     По умолчанию в textarea используется моноширинный шрифт */
  font: 1em sans-serif;

  /* Определим размер полей */
  width: 300px;
  box-sizing: border-box;

  /* Стилизуем границы полей */
  border: 1px solid #999;
}

input:focus,
textarea:focus {
  /* Дополнительная подсветка для элементов в фокусе */
  border-color: #000;
}

textarea {
  /* Выровним многострочные текстовые поля с их текстами-подсказками */
  vertical-align: top;

  /* Предоставим пространство для ввода текста */
  height: 5em;
}

.button {
  /* Выровним кнопки с их текстами-подсказками */
  padding-left: 90px; /* same size as the label elements */
}

button {
  /* Этот дополнительный внешний отступ примерно равен расстоянию
     между текстами-подсказками и текстовыми полями */
  margin-left: .5em;
}</pre>

<p>Теперь наша форма выглядит намного лучше.</p>

<p><img alt="" src="/files/4051/form-style.png" style="height: 260px; width: 900px;"></p>

<div class="note">
<p><strong>Примечание</strong>: Вы можете найти код на GitHub в <a href="https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form-styled.html">first-form-styled.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form-styled.html">также можно посмотреть код вживую</a>).</p>
</div>

<h2 id="Отправка_данных_на_сервер">Отправка данных на сервер</h2>

<p>Последняя и, наверно, самое сложное — это обработка данных формы на стороне сервера. HTML-элемент {{HTMLelement("form")}} определяет куда и каким способом отправить данные благодаря атрибутам <code>action</code> и <code>method</code>.</p>

<p>Мы определяем имя <code>name</code> для каждого виджета формы. Указание имён важно как для браузера, так и для сервера: браузер узнаёт, какие имена дать каждой части данных, а сервер может получить эти данные, обратясь к ним по заданному имени. Данные форму отправляются на сервер в виде пары имя/значение.</p>

<p>Чтобы проименовать данные, вам необходимо использовать атрибут <code>name</code> на каждом виджете формы, который будет собирать определённую часть информации. Давайте взглянем на код нашей формы ещё раз:</p>

<pre class="brush:html; notranslate">&lt;form action="/my-handling-form-page" method="post"&gt;
  &lt;div&gt;
    &lt;label for="name"&gt;Name:&lt;/label&gt;
    &lt;input type="text" id="name" name="user_name" /&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;label for="mail"&gt;E-mail:&lt;/label&gt;
    &lt;input type="email" id="mail" name="user_email" /&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;label for="msg"&gt;Message:&lt;/label&gt;
    &lt;textarea id="msg" name="user_message"&gt;&lt;/textarea&gt;
  &lt;/div&gt;

  ...
</pre>

<p>В нашем примере форма отправит три куска данных с именами "<code>user_name</code>", "<code>user_email</code>" и "<code>user_message</code>". Эти данные будут отправлены на URL "<code>/my-handling-form-page</code>" через метод <a href="/ru/docs/Web/HTTP/Methods/POST">HTTP <code>POST</code></a>.</p>

<p>На стороне сервера скрипт, расположенный на URL "<code>/my-handling-form-page</code>" получит данные в виде списка из 3 элементов вида ключ/значение, содержащихся в HTTP-запросе. То, как скрипт будет обрабатывать данные, зависит от вас. Каждый язык серверного программирования (PHP, Python, Ruby, Java, C# и т.д.) имеет свой механизм обработки данных из формы. Эта тема выходит за рамки данной статьи, если вы хотите углубиться в неё, мы привели несколько примеров далее в статье <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/HTML/Forms/Отправка_и_Получение_данных_формы" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data">Отправка данных формы</a>.</p>

<h2 id="Заключение">Заключение</h2>

<p>Поздравляем! Вы создали свою первую HTML-форму. Вживую это выглядит так: </p>

<p>{{ EmbedLiveSample('A_simple_form', '100%', '240', '', 'Learn/HTML/Forms/Your_first_HTML_form/Example') }}</p>

<p>Однако это только начало — пришло время взглянуть глубже. HTML-формы намного мощнее, чем то, что мы видели здесь, и другие статьи этого раздела помогут освоить остальное.</p>

<p>{{NextMenu("Learn/HTML/Forms/How_to_structure_an_HTML_form", "Learn/HTML/Forms")}}</p>

<h2 id="В_этом_разделе">В этом разделе</h2>

<ul>
 <li><a href="/ru/docs/Learn/HTML/Forms/Ваша_первая_HTML_форма">Ваша первая HTML форма</a></li>
 <li><a href="/ru/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">Как структурировать HTML-формы</a></li>
 <li><a href="/ru/docs/Learn/HTML/Forms/Стандартные_виджеты_форм">Стандартные виджеты форм</a></li>
 <li><a href="/en-US/docs/Learn/Forms/HTML5_input_types">The HTML5 input types</a></li>
 <li><a href="/en-US/docs/Learn/Forms/Other_form_controls">Other form controls</a></li>
 <li><a href="/ru/docs/Learn/HTML/Forms/Styling_HTML_forms">Стили HTML-форм</a></li>
 <li><a href="/en-US/docs/Learn/Forms/Advanced_form_styling">Advanced form styling</a></li>
 <li><a href="/en-US/docs/Learn/Forms/UI_pseudo-classes">UI pseudo-classes</a></li>
 <li><a href="/ru/docs/Learn/HTML/Forms/Валидация_формы">Проверка данных формы</a></li>
 <li><a href="/ru/docs/Learn/HTML/Forms/Отправка_и_Получение_данных_формы">Отправка данных формы</a></li>
</ul>

<h3 id="Дополнительные_темы">Дополнительные темы</h3>

<ul>
 <li><a href="/ru/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">Как создавать пользовательские виджеты форм</a></li>
 <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li>
 <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li>
</ul>