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

Помогите пользователям использовать вашу форму в предпочитаемом ими браузере.

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

Стили браузера по умолчанию выглядят не очень хорошо! Давайте изменим это.

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

Размер шрифта по умолчанию для элементов управления формой в большинстве браузеров слишком мал. Чтобы элементы управления формы были читабельными, измените размер шрифта с помощью CSS:

Увеличьте font-size и line-height , чтобы улучшить читаемость.

.form-element {
  font-size: 1.3rem;
  line-height: 1.2;
}

Помогите пользователям перемещаться по вашей форме

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

Свойство CSS margin увеличивает пространство между элементами, а свойство padding увеличивает пространство вокруг содержимого элемента.

Для общего макета используйте Flexbox или Grid . Узнайте больше о методах макетирования CSS .

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

Упростите заполнение формы, используя понятные стили для элементов управления формой. Например, оформите элементы <input> сплошной рамкой.

input,
textarea {
  border: 1px solid;
}

Помогите пользователям отправить вашу форму

Рассмотрите возможность использования background для вашей <button> , чтобы он соответствовал стилю вашего сайта, а также переопределите или удалите стили border по умолчанию.

Помогите пользователям понять текущее состояние

Браузеры применяют стиль по умолчанию для :focus . Вы можете переопределить стили для :focus , чтобы цвет соответствовал вашему бренду.

button:focus {
    outline: 4px solid green;
}

Проверьте свое понимание

Проверьте свои знания о стилизации форм

Почему для font-size следует использовать относительные единицы?

Чтобы гарантировать, что размер соответствует предпочтениям пользователя.
🎉
Чтобы гарантировать, что размер соответствует предыдущему элементу.
Попробуйте еще раз!
Чтобы размер соответствовал темному режиму.
Попробуйте еще раз!
Чтобы гарантировать, что размер отвечает на медиа-запросы.
Попробуйте еще раз!

Как увеличить расстояние между элементами управления формой?

Использование свойства CSS padding .
Попробуйте еще раз!
Использование свойства CSS spacer .
Попробуйте еще раз!
Использование свойства CSS margin .
🎉
Использование свойства CSS boundary .
Попробуйте еще раз!

Ресурсы