Оформление полей ввода и кнопки отправки CSS

Быстрый ответ

Поля ввода и кнопки отправки можно стилизовать с помощью следующего CSS-кода:

/* Стилизация текстовых полей */
input[type="text"] {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* Стилизация кнопок отправки */
input[type="submit"] {
  padding: 10px;
  color: #fff;
  background-color: #5cb85c;
  cursor: pointer;
}

/* Эффект при наведении на кнопку отправки */
input[type="submit"]:hover {
  background-color: #449d44;
}

/* Эффект при фокусе на текстовом поле */
input[type="text"]:focus {
  border-color: #66afe9;
}

Просто скопируйте и вставьте эти фрагменты кода, чтобы придать форме более динамичный дизайн. Не стесняйтесь изменять значения свойств padding, border и background-color, чтобы они соответствовали вашей дизайн-концепции.

Точечная стилизация: специфический CSS

Точная стилизация с помощью селекторов атрибутов

Селекторы атрибутов позволяют стилизовать конкретные элементы. Атрибут type используется для текстовых полей:

input[type="text"] {
  padding: 12px 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

Подробнее об этом расскажет наш спикер на видео

Стиль focus для привлечения внимания

Псевдокласс :focus выделяет активное текстовое поле, привлекая внимание пользователя:

input[type="text"]:focus {
  outline: none;
  box-shadow: 0 0 3px #66afe9;
}

Кнопка отправки: не просто кнопка

Кнопкам отправки необходим контраст, пространство, а также возможно использование градиента, чтобы привлечь внимание пользователя:

input[type="submit"] {
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  background-image: linear-gradient(to right, #57a0ee, #355f7c);
  color: white;
  text-transform: uppercase;
  transition: background-color 0.25s;
}

input[type="submit"]:hover {
  background-image: linear-gradient(to right, #355f7c, #57a0ee);
}

Визуализация

Сравнительная таблица стилизации и поведения полей ввода и кнопок отправки:

Обратите внимание на согласование стилей (одинаковый border-radius), но и контраст между input field и кнопкой.

Улучшаем интерактивность: не пугайте пользователей

Эффект наведения: взаимодействие с пользователем

Состояние :hover направляет пользователей, делая интерфейс приветливым.

Элемент кнопки: более широкий функциональный спектр

Тег <button> вместо <input type="submit"> предоставляет больше стилистических возможностей, позволяя добавлять иконки и изображения.

Метки: простота и понятность

Хорошо стилизованные метки помогают пользователям легче ориентироваться:

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

Отзывчивый дизайн: адаптируемся под любые экраны

Адаптивная форма: гибкость отображения

Используйте относительные единицы (%, em, rem) для оптимизации отображения формы на различных устройствах.

Media queries: адаптивность без проблем

Медиазапросы помогают обеспечить совместимость с любым размером экрана:

@media (max-width: 768px) {
  input[type="text"], input[type="submit"] {
    width: 100%;
    box-sizing: border-box;
  }
}

Тестирование и демонстрация: показываем умения при помощи JSFiddle

JSFiddle подходит для обмена обратной связью и улучшения результатов в работе. Делитесь своей работой и развивайтесь вместе с сообществом!

Полезные материалы

1. Styling web forms – Learn web development | MDN — Руководство по стилизации форм от MDN.
2. CSS Forms — Обучение стилизации форм на сайте W3Schools.
3. Designing Efficient Web Forms: On Structure, Inputs, Labels And Actions — Smashing Magazine — Лучшие практики проектирования форм от Smashing Magazine.
4. Prettier Accessible Forms – A List Apart — Создание доступных и удобных форм.
5. Make Money From Writing Tutorials for Envato Tuts+ Design & Illustration | Envato Tuts+ — Статья полезна для освоения дизайна форм, несмотря на несоответствующий заголовок.