MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-Learn-Section-Survey

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

Необходимые условия

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

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

Примечание:Если компьютер/планшет/другое устройство, на котором вы работаете, не позволяет вам самостоятельно создавать файлы, то приводимые здесь примеры кода можно посмотреть в онлайновых программах для кодирования, например JSBin или Thimble.

 Основные руководства

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

Какие виджеты форм доступны?

Стандартные виджеты форм
Рассмотрим подробнее функционал различных виджетов форм; какие варианты доступны для сбора различных типов данных.

Валидация и подтверждение данных форм

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

 Продвинутые руководства

Как создавать собственные виджеты форм
В некоторых случая стандартные виджеты форм не предоставляют того, что вам нужно, например из-за стиля или функционала. В таких случаях вам придётся создать собственный виджет формы из чистого HTML. В этой статье(с практическим примером) объясняется, как вы это сделаете, а также особенности, на которые необходимо обратить внимание.
Отправка форм при помощи JavaScript
В этой статье рассматриваются способы использования формы для сборки HTTP-запроса и отправки его через пользовательский JavaScript вместо стандартного представления формы. А также почему вы захотите это сделать и способы реализации (см. использование объектов FormData).
HTML-формы в старых браузерах
Статья раскрывает особенности обнаружения и т.д. (см. Кросс-браузерное тестирование для более глубокого понимания)

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

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

Смотри также

Метки документа и участники

Внесли вклад в эту страницу: Zekkler, mdnwebdocs-bot, neizerth, PWasiliy, SeryiMysh, chrisdavidmills, GaidaiAndrii, bracket, Dmitrij
Обновлялась последний раз: Zekkler,