Руководство по HTML-формам
Данное руководство представляет собой серию статей, которые помогут вам освоить HTML-формы. HTML формы являются очень мощным инструментом для взаимодействия с пользователями; однако, в силу исторических и технических причин, не всегда очевидно, как использовать их в полной мере. В этом руководстве мы рассмотрим все аспекты HTML-форм, от структуры к стилизации, от обработки данных до пользовательских виджетов. Вы научитесь пользоваться Великой силой, которую они предлагают!
Необходимые условия
Перед началом этого модуля вам следует изучить хотя бы Введение в HTML. На данный момент у вас не должно возникнуть сложностей с пониманием Основных руководств и использованием нашего руководства по Стандартным виджетам форм.
Остальные части модуля немного сложнее — легко поместить виджет формы на страницу, но вы не сможете много сделать без использования продвинутых особенностей форм, CSS и JavaScript. Поэтому, перед тем как вы перейдёте к другим частям модуля, мы рекомендуем изучить немного CSS и JavaScript.
**Примечание:**Если компьютер/планшет/другое устройство, на котором вы работаете, не позволяет вам самостоятельно создавать файлы, то приводимые здесь примеры кода можно посмотреть в онлайновых программах для кодирования, например JSBin или Glitch.
Основные руководства
- Ваша первая HTML-форма
-
Первая статья в серии даёт вам начальный опыт в создании HTML-форм, включая разработку простой формы, её реализация при помощи элементов HTML, стилизация при помощи CSS и то, как данные отправляются на сервер.
- Как структурировать HTML-форму
-
Изучив основы, рассмотрим более подробно элементы, используемые для структурирования и придания смысла различным частям HTML-форм.
Какие виджеты форм доступны?
- Стандартные виджеты форм
-
Рассмотрим подробнее функционал различных виджетов форм; какие варианты доступны для сбора различных типов данных.
Валидация и подтверждение данных форм
- Отправка данных форм
-
Данная статья рассматривает что происходит, когда пользователь подтверждает форму — куда отправляются данные и как мы их там обрабатываем. Мы также рассмотрим некоторые проблемы безопасности, связанные с отправкой данных формы.
- Валидация данных форм
-
Одной отправки данных не достаточно — нам нужно убедиться что данные, введённые пользователем в формы, в правильном формате и не испортят наши приложения. Мы также хотим помочь пользователям правильно заполнить формы и не разочароваться при использовании наших приложений. Валидация форм поможет нам в достижении этих целей — эта статья расскажет вам всё, что нужно знать.
Продвинутые руководства
- Как создавать собственные виджеты форм
-
В некоторых случая стандартные виджеты форм не предоставляют того, что вам нужно, например из-за стиля или функциональности. В таких случаях вам придётся создать собственный виджет формы из чистого HTML. В этой статье (с практическим примером) объясняется, как вы это сделаете, а также особенности, на которые необходимо обратить внимание.
- Отправка форм при помощи JavaScript
-
В этой статье рассматриваются способы использования формы для сборки HTTP-запроса и отправки его через пользовательский JavaScript вместо стандартного представления формы. А также почему вы захотите это сделать и способы реализации (см. использование объектов FormData).
- HTML-формы в старых браузерах
-
Статья раскрывает особенности обнаружения и т.д. (см. Кросс-браузерное тестирование для более глубокого понимания)
Руководства по стилизации форм
- Стилизация HTML-форм
-
Вступительная статья по стилизации форм с помощью CSS, включая все необходимые основы.
- Продвинутая стилизация HTML-форм
-
В этой статье мы рассмотрим продвинутые техники стилизации форм, которые необходимо использовать при работе с некоторыми более сложными для стилизации элементами.
- Таблица совместимости свойств для виджетов форм
-
Последняя статья содержит удобный справочник, позволяющий узнать, с какими элементами формы совместимы свойства CSS.