Онлайн -регистрационная форма
Этот проект является третьим проектом для курса разработки Team Treehouse Frontend.
В этом проекте вы создадите отзывчивую, мобильную регистрационную форму, используя широкий спектр типов входов и атрибутов формы HTML. Используя предоставленные файлы макета, вы создадите мобильную и настольную версию формы с помощью медиа-запросов и подход «мобильный».
Живая ссылка для этого проекта можно найти здесь
Скриншот
Инструкции
- Создайте макет с помощью мобильного первого дизайна :
- Убедитесь, что HTML -файл включает метатет Viewport в главе документа, см. Настройку Viewport, чтобы понять, почему и как добавить этот тег.
- Посмотрите на предоставленный макет (mobile-form.png) и добавьте тот же контент в свой файл index.html.
- Создайте структуру формы: используйте только один тег
<form> . Тег <form> должен содержать все элементы формы. Добавьте fieldset и legend для каждого из следующих разделов:
- Раздел «Контактная информация» страницы и
- Раздел «Информационный бюллетень» на странице
- Убедитесь, что вы включите следующие типы поля:
- текстовый ввод
- Ввод электронной почты
- телефонный вход
- Выберите меню
- Флакторы
- радиопроизводительные кнопки
- Textarea
- Отправить кнопку
- Поля формы должны включать следующие атрибуты:
-
input : должен включать атрибуты id , type и name . -
select и textarea : должен включать атрибуты id и name .
- Добавьте этикетки в каждый элемент формы, используя тег HTML
<label> . Текст внутри меток должен соответствовать именам полей формы в макетах.
- Убедитесь, что вы правильно сочетаете каждый элемент
<label> с соответствующим элементом управления формой через атрибут for атрибута. Смотрите ссылку выше для примера. И не забывайте о элементе Textarea. Это также нуждается в функционирующей этикетке.
- Используйте атрибут
placeholder поля ввода, чтобы добавить текст «Требуемый» к:
- Полное поле
- поле адреса электронной почты
- После того, как у вас будет все на месте для мобильного макета, используйте медиа -запрос, чтобы добавить точку останова, чтобы отрегулировать макет для более широкого планшета и настольных экранов.
- Сопоставьте дизайн, так как он должен смотреть на планшет или настольный компьютер шириной 768 п.
- Используйте подход на первом мобильном телефоне, написав свои медиа-запросы, используя свойство
min-width в вашем CSS.
- После того, как все ваши точки останова будут на месте, дважды проверьте макет обоих макетов.
- Убедитесь, что текстовая позиция метки соответствует обоим макетам:
- Мобильный : текст должен быть выше поля формы.
- Рабочий стол : Текст должен быть в левой стороне поля формы.
Используйте шрифт Google для текста
Добавьте :focus состояния в форму, когда пользователь щелкнет или вкладки в текстовое поле.
Обязательно проверьте ваш код, действителен, выполняя его через валидатор HTML и CSS.
- Ссылки на валидаторы можно найти в ресурсах проекта. Это поможет вам обнаружить любые ошибки, которые могут быть в вашем коде.
- Есть несколько исключений, которые вам не нужно исправлять:
- Не беспокойтесь о каких -либо предупреждениях, нам просто нужно, чтобы вы проверили любые ошибки, которые могут быть там.
- Если флаги Valdator CSS Использование CALC, префиксы поставщика или псевдо-элементы/псевдо-классы эти ошибки следует игнорировать.
- Если флаги HTML Valdator Использование Pipe ('|') в Google Font Links/URLS эта ошибка также может быть проигнорирована.
