---
title: Руководство по HTML-формам
slug: Learn/Forms
tags:
  - HTML
  - Web
  - Начинающие
  - Руководство
  - Формы
translation_of: Learn/Forms
original_slug: Learn/HTML/Forms
---
<p>{{LearnSidebar}}</p>

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

<h2 id="Необходимые_условия">Необходимые условия</h2>

<p>Перед началом этого модуля вам следует изучить хотя бы <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML">Введение в HTML</a>. На данный момент у вас не должно возникнуть сложностей с пониманием <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Forms#%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D1%8B%D0%B5_%D1%80%D1%83%D0%BA%D0%BE%D0%B2%D0%BE%D0%B4%D1%81%D1%82%D0%B2%D0%B0_2">Основных руководств</a> и использованием нашего руководства по <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Forms/%D0%A1%D1%82%D0%B0%D0%BD%D0%B4%D0%B0%D1%80%D1%82%D0%BD%D1%8B%D0%B5_%D0%B2%D0%B8%D0%B4%D0%B6%D0%B5%D1%82%D1%8B_%D1%84%D0%BE%D1%80%D0%BC">Стандартным виджетам форм</a>.</p>

<p>Остальные части модуля немного сложнее — легко поместить виджет формы на страницу, но вы не сможете много сделать без использования продвинутых особенностей форм, CSS и JavaScript. Поэтому, перед тем как вы перейдёте к другим частям модуля, мы рекомендуем изучить немного CSS и JavaScript.</p>

<div class="blockIndicator note">
<p><strong>Примечание:</strong>Если компьютер/планшет/другое устройство, на котором вы работаете, не позволяет вам самостоятельно создавать файлы, то приводимые здесь примеры кода можно посмотреть в онлайновых программах для кодирования, например <a href="http://jsbin.com/">JSBin</a> или <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
</div>

<h2 id="Основные_руководства_2"> Основные руководства<a id="Основные_руководства" name="Основные_руководства"></a></h2>

<dl>
 <dt><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Forms/Ваша_первая_HTML_форма">Ваша первая HTML-форма</a></dt>
 <dd>Первая статья в серии дает вам начальный опыт в создании HTML-форм, включая разработку простой формы, её реализация при помощи элементов HTML, стилизация при помощи CSS и то, как данные отправляются на сервер.</dd>
 <dt><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">Как структурировать HTML-форму</a></dt>
 <dd>Изучив основы, рассмотрим более подробно элементы, используемые для структурирования и придания смысла различным частям HTML-форм.</dd>
</dl>

<h2 id="Какие_виджеты_форм_доступны">Какие виджеты форм доступны?</h2>

<dl>
 <dt><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Forms/%D0%A1%D1%82%D0%B0%D0%BD%D0%B4%D0%B0%D1%80%D1%82%D0%BD%D1%8B%D0%B5_%D0%B2%D0%B8%D0%B4%D0%B6%D0%B5%D1%82%D1%8B_%D1%84%D0%BE%D1%80%D0%BC">Стандартные виджеты форм</a></dt>
 <dd>Рассмотрим подробнее функционал различных виджетов форм; какие варианты доступны для сбора различных типов данных.</dd>
</dl>

<h2 id="Валидация_и_подтверждение_данных_форм">Валидация и подтверждение данных форм</h2>

<dl>
 <dt><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Forms/%D0%9E%D1%82%D0%BF%D1%80%D0%B0%D0%B2%D0%BA%D0%B0_%D0%B8_%D0%9F%D0%BE%D0%BB%D1%83%D1%87%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D1%85_%D1%84%D0%BE%D1%80%D0%BC%D1%8B">Отправка данных форм </a></dt>
 <dd>Данная статья рассматривает что происходит, когда пользователь подтверждает форму — куда отправляются данные и как мы их там обрабатываем. Мы также рассмотрим некоторые проблемы безопасности, связанные с отправкой данных формы.</dd>
 <dt><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Forms/%D0%92%D0%B0%D0%BB%D0%B8%D0%B4%D0%B0%D1%86%D0%B8%D1%8F_%D1%84%D0%BE%D1%80%D0%BC%D1%8B">Валидация данных форм</a></dt>
 <dd>Одной отправки данных не достаточно — нам нужно убедиться что данные, введенные пользователем в формы, в правильном формате и не испортят наши приложения. Мы также хотим помочь пользователям правильно заполнить формы и не разочароваться при использовании наших приложений. Валидация форм поможет нам в достижении этих целей — эта статья расскажет вам всё, что нужно знать.</dd>
</dl>

<h2 id="Продвинутые_руководства"> Продвинутые руководства</h2>

<dl>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">Как создавать собственные виджеты форм</a></dt>
 <dd>В некоторых случая стандартные виджеты форм не предоставляют того, что вам нужно, например из-за стиля или функционала. В таких случаях вам придётся создать собственный виджет формы из чистого HTML. В этой статье(с практическим примером) объясняется, как вы это сделаете, а также особенности, на которые необходимо обратить внимание.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Отправка форм при помощи JavaScript</a></dt>
 <dd>В этой статье рассматриваются способы использования формы для сборки HTTP-запроса и отправки его через пользовательский JavaScript вместо стандартного представления формы. А также почему вы захотите это сделать и способы реализации (см. использование объектов FormData).</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML-формы в старых браузерах</a></dt>
 <dd>Статья раскрывает особенности обнаружения и т.д. (см. <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Кросс-браузерное тестирование</a> для более глубокого понимания)</dd>
</dl>

<h2 id="Руководства_по_стилизации_форм">Руководства по стилизации форм</h2>

<dl>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Стилизация HTML-форм</a></dt>
 <dd>Вступительная статья по стилизации форм с помощью CSS, включая все необходимые основы.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Продвинутая стилизация HTML-форм</a></dt>
 <dd>В этой статье мы рассмотрим продвинутые техники стилизации форм, которые необходимо использовать при работе с некоторыми более сложными для стилизации элементами.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Таблица совместимости свойств для виджетов форм</a></dt>
 <dd>Последняя статья содержит удобный справочник, позволяющий узнать, с какими элементами формы совместимы свойства CSS.</dd>
</dl>

<h2 id="Смотри_также">Смотри также</h2>

<ul>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Forms">Ссылка на элементы HTML-форм</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input">Ссылка на виды HTML-элемента &lt;input&gt;</a>  </li>
</ul>