Перейти к содержанию

Учим формы

Курс о HTML-формах, который поможет вам повысить квалификацию веб-разработчика.

Добро пожаловать в раздел "Учим формы"

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

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

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

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

Предварительные условия

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

Демонстрации

Для большинства демонстраций мы используем CodePen.

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

Элементы управления и поля формы

Элемент управления формой - это элемент, обеспечивающий взаимодействие с пользователем, ввод или выбор данных: <input>, <select>, <textarea> или <button>.

Иногда поле формы используется для обозначения элементов управления формой, в частности, элементов для ввода текста: <input> и <textarea>.

Начало работы с формами

Общие рекомендации

Тестирование и мониторинг

  • Как тестировать формы на удобство

    Узнайте, как провести тестирование на удобство использования и убедиться, что ваша форма подходит для всех пользователей.

    Как тестировать формы на удобство

  • Тестирование форм на различных устройствах

    Убедитесь, что ваша форма работает на различных устройствах, в браузерах, на платформах и в различных контекстах.

    Тестирование форм на различных устройствах

  • Сбор данных

    Узнайте, как измерять и анализировать свою форму.

    Сбор данных

Элементы и атрибуты

  • Углубленное изучение элемента формы

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

    Углубленное изучение элемента формы

  • Подробно о полях формы

    Узнайте о различных полях формы, которые можно использовать, и о том, как выбрать подходящий элемент формы.

    Подробно о полях формы

  • Подробно об атрибутах формы

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

    Подробно об атрибутах формы

CSS

  • Стилизация форм

    Стилизовать формы с помощью CSS, обеспечивая при этом их удобство и читаемость для всех.

    Стилизация форм

  • Стилизация элементов формы

    Узнайте, как реализовать элементы управления формами с помощью CSS.

    Стилизация элементов формы

Javascript

  • JavaScript

    Узнайте, как использовать JavaScript для улучшения форм.

    JavaScript

Специфические типы форм

  • Идентификация

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

    Идентификация

  • Формы оплаты

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

    Формы оплаты

  • Формы адреса

    Помогите пользователям быстро и легко заполнять формы адресов.

    Формы адреса

Авторы

Этот курс написан и отредактирован экспертами сообщества форм: Michael Scharnagl, Sam Dutton и Rachel Andrew. Rob Dodson и Jiwoong Lee руководили UX и производственной сборкой, а также помогали Ewa Gasperowicz и Sam Thorogood.

Перевод

Перевод этого учебника сделан благодаря подписчикам на Бусти.

Источник — Learn Forms

Комментарии