Валидация форм и стилизация сообщений об ошибках

Тренажер по CSS для пользователей с начальным уровнем подготовки.

Опубликовано 17.03.2025
Просмотры 6
Автор
Рек. время прохождения 3 минуты
Упражнений 7
Комментарии 0
Тренажер CSS

В этой серии упражнений вы попрактикуетесь в стилизации HTML-форм с использованием CSS псевдоклассов валидации. Вы научитесь изменять внешний вид полей ввода в зависимости от того, являются ли введенные данные корректными (:valid) или некорректными (:invalid), а также как отображать и стилизовать сообщения об ошибках для пользователей. Задания охватывают применение псевдоклассов :required, :optional, :valid, :invalid, :focus, а также использование комбинаторов (+ и ~) для связи полей ввода с сообщениями об ошибках. Эти навыки необходимы для создания удобных и понятных пользовательских интерфейсов форм.

Список тем

Стилизация невалидного поля

Задача: Изменить цвет рамки поля ввода email на красный, когда введенное значение не соответствует формату email. Используйте соответствующий псевдокласс для невалидного состояния.

CSS
/* Стили для формы */
.form-group {
  margin-bottom: 15px;
}

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

input[type="email"] {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: calc(100% - 18px); /* Учитываем padding и border */
}

/* Добавьте стиль для невалидного email */
input[type="email"]input1 {
  input2: 1px solid red;
}
HTML
<div class="form-group">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required placeholder="example@domain.com">
</div>
Чтобы стилизовать поле ввода, когда его содержимое не соответствует указанному типу (в данном случае, `type="email"`), используйте псевдокласс `:invalid`. Примените к нему свойство `border-color` с красным цветом.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Стилизация валидного поля

Задача: Изменить цвет рамки поля ввода email на зеленый, когда введенное значение соответствует формату email. Используйте псевдокласс для валидного состояния.

CSS
.form-group {
  margin-bottom: 15px;
}

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

input[type="email"] {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: calc(100% - 18px);
}

/* Стиль для невалидного email */
input[type="email"]:invalid {
  border: 1px solid red;
}

/* Добавьте стиль для валидного email */
input[type="email"]input1 {
  input2: 1px solid green;
}
HTML
<div class="form-group">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required placeholder="example@domain.com">
</div>
Для стилизации поля ввода, когда его содержимое корректно (соответствует `type="email"`), используйте псевдокласс `:valid`. Примените к нему свойство `border-color` с зеленым цветом.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Выделение обязательных полей

Задача: Визуально выделить обязательные для заполнения поля (те, у которых есть атрибут `required`). Добавьте толстую левую рамку синего цвета для таких полей.

CSS
.form-group {
  margin-bottom: 15px;
}

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

input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: calc(100% - 18px);
}

/* Добавьте стиль для обязательных полей */
inputinput1 {
  input2: 3px solid blue;
}
HTML
<div class="form-group">
  <label for="name">Имя (обязательно):</label>
  <input type="text" id="name" name="name" required>
</div>
<div class="form-group">
  <label for="email">Email (обязательно):</label>
  <input type="email" id="email" name="email" required>
</div>
<div class="form-group">
  <label for="subject">Тема (необязательно):</label>
  <input type="text" id="subject" name="subject">
</div>
Чтобы выбрать элементы ввода, которые являются обязательными для заполнения (имеют атрибут `required`), используйте псевдокласс `:required`. Примените к нему свойство `border-left`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Отображение сообщения об ошибке

Задача: Показать сообщение об ошибке (элемент с классом `error-message`), когда поле ввода email становится невалидным. Сообщение должно появляться под полем ввода. Изначально сообщение скрыто.

CSS
.form-group {
  margin-bottom: 15px;
}

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

input[type="email"] {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: calc(100% - 18px);
}

input[type="email"]:invalid {
  border-color: red;
}

.error-message {
  display: none; /* Скрыто по умолчанию */
  color: red;
  font-size: 0.9em;
  margin-top: 5px;
}

/* Покажите сообщение об ошибке для невалидного email */
input[type="email"]input1 input2 .error-message {
  input3: block;
}
HTML
<div class="form-group">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required placeholder="example@domain.com">
  <div class="error-message">Пожалуйста, введите корректный email.</div>
</div>
Используйте комбинатор соседних селекторов (`+`) в сочетании с псевдоклассом `:invalid`. Селектор `input[type="email"]:invalid + .error-message` выберет элемент `.error-message`, который идет сразу после невалидного поля email. Установите для него свойство `display` в значение `block` (или другое подходящее, чтобы сделать его видимым).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Стилизация сообщения об ошибке

Задача: Стилизовать отображаемое сообщение об ошибке. Когда поле ввода email невалидно и сообщение становится видимым, измените его цвет на красный и сделайте текст жирным.

CSS
.form-group {
  margin-bottom: 15px;
}

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

input[type="email"] {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: calc(100% - 18px);
}

.error-message {
  display: none;
  font-size: 0.9em;
  margin-top: 5px;
}

/* Стиль для отображаемого сообщения об ошибке */
input[type="email"]:invalid + .error-message {
  display: block;
  input1: red;
  input2: bold;
}
HTML
<div class="form-group">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required placeholder="example@domain.com">
  <div class="error-message">Пожалуйста, введите корректный email.</div>
</div>
Используйте тот же селектор, что и в предыдущем задании (`input[type="email"]:invalid + .error-message`), чтобы выбрать сообщение об ошибке, когда оно отображается. Примените к нему свойства `color` и `font-weight`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Стиль при фокусе на невалидном поле

Задача: Изменить фон поля ввода email на светло-красный (#ffeeee), но только когда оно находится в фокусе *и* является невалидным одновременно.

CSS
.form-group {
  margin-bottom: 15px;
}

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

input[type="email"] {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: calc(100% - 18px);
  transition: background-color 0.3s ease;
}

input[type="email"]:invalid {
  border-color: red;
}

/* Стиль для невалидного поля в фокусе */
input[type="email"]input1 {
  input2: #ffeeee;
}
HTML
<div class="form-group">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required placeholder="example@domain.com">
  <div class="error-message" style="display: none; color: red; font-size: 0.9em; margin-top: 5px;">Пожалуйста, введите корректный email.</div>
</div>
<script>
// Небольшой скрипт для демонстрации, не относится к CSS заданию
document.getElementById('email').addEventListener('input', function(e) {
  const msg = e.target.nextElementSibling;
  if (e.target.validity.valid) {
    msg.style.display = 'none';
  } else {
    msg.style.display = 'block';
  }
});
</script>
Чтобы применить стиль, когда элемент находится в фокусе и одновременно невалиден, объедините псевдоклассы `:focus` и `:invalid` без пробела: `:focus:invalid`. Примените к этому селектору свойство `background-color`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Общий соседний комбинатор для сообщения

Задача: Показать сообщение об ошибке (элемент с классом `error-message`), которое находится не сразу после поля ввода пароля, а через один элемент (например, `<br>`). Используйте общий соседний комбинатор.

CSS
.form-group {
  margin-bottom: 15px;
}

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

input[type="password"] {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: calc(100% - 18px);
}

input[type="password"]:invalid {
  border-color: orange;
}

.error-message {
  display: none; /* Скрыто по умолчанию */
  color: orange;
  font-size: 0.9em;
  margin-top: 5px;
}

/* Покажите сообщение об ошибке для невалидного пароля */
input[type="password"]input1 input2 .error-message {
  input3: block;
}
HTML
<div class="form-group">
  <label for="password">Пароль (мин. 6 символов):</label>
  <input type="password" id="password" name="password" required minlength="6">
  <br> <!-- Дополнительный элемент между input и сообщением -->
  <div class="error-message">Пароль должен содержать минимум 6 символов.</div>
</div>
Общий соседний комбинатор (`~`) выбирает все элементы, которые являются соседями (находятся на одном уровне вложенности и имеют общего родителя) и следуют после указанного элемента. Используйте селектор `input[type="password"]:invalid ~ .error-message`, чтобы выбрать `.error-message`, следующий где-то после невалидного поля пароля.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру