Этот курс разбивает HTML-формы на простые для понимания части. В следующих нескольких модулях вы узнаете, как работают HTML-формы и как эффективно использовать их в своих проектах. Используйте панель меню рядом с логотипом Learn Forms для навигации по модулям.
Вы узнаете, как создать базовую HTML-форму, об элементах HTML-формы, стилизации форм, помощи пользователям в повторном вводе данных, обеспечении доступности и безопасности формы, о том, как тестировать формы, а также о конкретных типах форм.
Каждый модуль наполнен интерактивными демонстрациями и заданиями для самопроверки, позволяющими вам проверить свои знания.
Этот курс подходит для начинающих и продвинутых HTML-разработчиков. Первые несколько модулей помогут вам приступить к созданию HTML-форм, остальные модули дают более подробную информацию. Вы можете просмотреть серию от начала до конца, чтобы получить общее представление о HTML-формах, или выбрать конкретный модуль, о котором хотите узнать больше.
Предварительные условия
Прежде чем приступить к этому курсу, вы должны знать HTML. Для новичков в веб-разработке ознакомьтесь с вводным курсом HTML от MDN, чтобы узнать все о том, как писать разметку.
Демо
Для большинства демонстраций мы используем CodePen .
Глядя на демо-версии, вы можете задаться вопросом, откуда взялись эти стили. Мы используем общую таблицу стилей, включенную во все демонстрации, поэтому там показаны только соответствующие стили. В CodePen вы можете выбрать включенные файлы CSS в настройках.
Элементы управления формой и поля формы
Элемент управления формой — это элемент, который обеспечивает взаимодействие с пользователем и ввод или выбор данных: <input> , <select> , <textarea> или <button> .
Иногда поле формы используется для ссылки на элементы управления формы, в частности на элементы для ввода текста: <input> и <textarea> .
Вот что вы узнаете
Используйте формы для получения данных от пользователей
Изучите основы использования форм в Интернете, прочитав это введение в элемент формы.
Помогите пользователям вводить данные в формы
Обзор различных элементов формы, которые вы можете выбрать для создания формы.
Помогите пользователям избежать повторного ввода данных в формах.
Сделайте пользователям удобнее заполнение форм.
Помогите пользователям ввести правильные данные в формы
Узнайте, как проверять формы на внешнем интерфейсе.
Проверьте свои формы
Узнайте, как тестировать и анализировать свои формы.
Основы дизайна
Узнайте, как создавать удобные формы.
Доступность
Как создавать инклюзивные формы.
Интернационализация и локализация
Будьте готовы к международным форматам данных и узнайте, как спланировать форму для локализации.
Безопасность и конфиденциальность
Узнайте, как обеспечить безопасность форм и сохранить конфиденциальность данных пользователей.
Автозаполнение
Узнайте все об автозаполнении и атрибуте autocomplete.
Как проверить формы на удобство использования
Узнайте, как провести тестирование удобства использования и убедиться, что ваша форма хорошо работает для всех ваших пользователей.
Тестовые формы на разных устройствах и платформах
Убедитесь, что ваша форма работает с разными устройствами, браузерами, платформами и разными контекстами.
Сбор данных
Научитесь измерять и анализировать свою форму.
Подробно об элементе формы
Узнайте все об элементе формы, о том, когда ее следует использовать и как она работает.
Формируйте поля по глубине
Узнайте о различных полях формы, которые вы можете использовать, и о том, как выбрать правильный элемент формы.
Подробные атрибуты формы
Узнайте все об атрибутах формы: как изменить раскладку экранной клавиатуры, активировать встроенную проверку и многое другое.
Стилизация форм
Создавайте стили с помощью CSS, сохраняя при этом удобство использования и читаемость для всех.
Стилизация элементов управления формой
Узнайте, как реализовать элементы управления формой с помощью CSS.
JavaScript
Узнайте, как использовать JavaScript для улучшения ваших форм.
Формы оплаты
Улучшите коэффициенты конверсии, создав более совершенные формы оплаты.
Адресные формы
Помогите пользователям быстро и легко заполнить адресные формы.
Выводы и дальнейшие шаги
Дополнительные ресурсы, которые помогут вам сделать следующие шаги.
Итак, вы готовы узнать о формах? Давайте начнем .