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

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

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

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

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

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

Вы начинаете с контента, используете семантический HTML, добавляете перспективный CSS и в качестве последнего шага добавляете надежный JavaScript. {% endAside %}

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

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

Увеличьте font-size и line-height для улучшения читабельности.

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

Для font-size используются относительные единицы измерения, такие как em (относительно базового размера родительского элемента) или rem (относительно базового размера документа), чтобы размер соответствовал предпочтениям пользователя. Пользователи могут изменять базовый font-size, и все элементы с относительным font-size будут автоматически подстраиваться под него. Для line-height используйте unitless value, например 1.5, чтобы сохранить высоту строки относительно размера шрифта.

Подробнее о пиксели против относительных единиц в CSS.

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

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

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

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

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

Чтобы людям было удобно заполнять форму, используйте хорошо понятные стили для элементов управления формы. Например, для элементов <input> следует использовать сплошную границу.

Цвет границы <input>, используемый по умолчанию, во многих браузерах слишком светлый. Из-за недостаточного контраста элемент может быть плохо различим, особенно на мобильных устройствах. Откройте эту демонстрацию в Chrome на Android, чтобы увидеть стили по умолчанию.

input,
textarea {
    border: 1px solid;
}

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

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

В современных браузерах <button> можно стилизовать, как и любой другой элемент, поэтому всегда следует использовать семантический <button> или <input type="submit">. Использование элемента, созданного для этой задачи, дает множество встроенных преимуществ в плане удобства использования и доступности, которые вы не получите при использовании типового элемента, такого как <div>. О встроенных возможностях вы узнаете в других модулях.

Подробнее о изменении стиля по умолчанию для <button>.

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

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

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

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

Подробнее о разработке индикаторов фокуса.

Ресурсы¶

Источник — Styling forms