Адаптивные формы

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

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

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

Список тем

Поле ввода на всю ширину

id: 37462_adaptive-forms-1

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

CSS
/* styles.css */
.container {
  width: 90%; /* Ширина контейнера для демонстрации */
  margin: 20px auto;
  border: 1px solid #ccc;
  padding: 15px;
}

.full-width-input {
  input1: 100%;
  padding: 10px;
  border: 1px solid #999;
  margin-top: 5px;
  input2: border-box; /* Учитываем padding и border в ширине */
}
HTML
<!-- index.html -->
<div class="container">
  <form>
    <label for="username">Имя пользователя:</label>
    <input type="text" id="username" name="username" class="full-width-input">
  </form>
</div>
Чтобы элемент занимал всю ширину родителя, используйте свойство `width` со значением `100%`. Для корректного расчета ширины с учетом padding и border, примените свойство `box-sizing` со значением `border-box`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Метка над полем ввода на малых экранах

id: 37462_adaptive-forms-2

В этой форме метка и поле ввода расположены в одну строку. На больших экранах это выглядит хорошо, но на узких экранах может стать тесно. Используйте медиа-запрос, чтобы на экранах шириной 372px или меньше метка и поле ввода располагались друг под другом (блочно), занимая всю доступную ширину.

CSS
/* styles.css */
.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: inline-block;
  width: 120px; /* Фиксированная ширина метки на больших экранах */
  margin-right: 10px;
  vertical-align: top;
}

.form-group input {
  width: calc(100% - 135px); /* Расчет ширины поля ввода */
  padding: 8px;
  box-sizing: border-box;
}

/* Медиа-запрос для малых экранов */
@media (input1: 372px) {
  .form-group label,
  .form-group input {
    input2: block;
    input3: 100%;
    margin-right: 0;
  }

  .form-group label {
    margin-bottom: 5px; /* Небольшой отступ под меткой */
  }
}
HTML
<!-- index.html -->
<div style="width: 95%; margin: 15px auto;">
  <form>
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" id="email" name="email">
    </div>
    <div class="form-group">
      <label for="password">Пароль:</label>
      <input type="password" id="password" name="password">
    </div>
  </form>
</div>
Вам нужно использовать медиа-запрос `@media`. Укажите максимальную ширину (`max-width`), при которой стили должны применяться. Внутри медиа-запроса измените свойство `display` для метки и поля ввода на `block`, чтобы они переносились на новую строку, и задайте им `width: 100%`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Адаптивная кнопка отправки

id: 37462_adaptive-forms-3

Кнопка отправки формы должна адаптироваться к разным размерам экрана. На больших экранах она должна иметь фиксированную ширину, а на экранах шириной 372px или меньше — занимать всю доступную ширину для удобства нажатия на мобильных устройствах.

CSS
/* styles.css */
.container {
  width: 90%;
  margin: 20px auto;
  padding: 15px;
  border: 1px solid #eee;
}

.submit-button {
  padding: 12px 20px;
  background-color: #5c67f2;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  /* Начальная ширина кнопки */
  input1: auto; 
  display: block; /* Чтобы margin auto работал, если width не 100% */
  margin-left: auto;
  margin-right: auto;
}

.submit-button:hover {
  background-color: #4a54cc;
}

/* Стили для малых экранов */
@media (max-width: 372px) {
  .submit-button {
    input2: 100%;
  }
}
HTML
<!-- index.html -->
<div class="container">
  <form>
    <!-- Другие поля формы могут быть здесь -->
    <button type="submit" class="submit-button">Отправить</button>
  </form>
</div>
Задайте кнопке начальную ширину (например, `auto` или фиксированное значение). Затем используйте медиа-запрос `@media` с условием `max-width: 372px`. Внутри медиа-запроса измените свойство `width` кнопки на `100%`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Форма в две колонки с помощью Flexbox

id: 37462_adaptive-forms-4

Используйте Flexbox для создания макета формы, где метка и поле ввода находятся рядом в одной строке (две колонки). На экранах шириной 372px или меньше элементы должны автоматически перестраиваться в одну колонку (метка над полем ввода).

CSS
/* styles.css */
.flex-form {
  width: 95%;
  margin: 15px auto;
}

.flex-group {
  input1: flex;
  input2: center; /* Выравнивание по вертикали */
  margin-bottom: 15px;
}

.flex-group label {
  flex-basis: 100px; /* Базовая ширина метки */
  margin-right: 10px;
}

.flex-group input {
  input3: 1; /* Поле ввода занимает оставшееся место */
  padding: 8px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* Адаптация для малых экранов */
@media (max-width: 372px) {
  .flex-group {
    input4: column;
    input5: stretch; /* Растянуть элементы по ширине */
  }

  .flex-group label {
    flex-basis: auto; /* Сброс базовой ширины */
    margin-right: 0;
    margin-bottom: 5px;
  }
}
HTML
<!-- index.html -->
<form class="flex-form">
  <div class="flex-group">
    <label for="name">Имя:</label>
    <input type="text" id="name" name="name">
  </div>
  <div class="flex-group">
    <label for="city">Город:</label>
    <input type="text" id="city" name="city">
  </div>
</form>
Для родительского контейнера `.flex-group` используйте `display: flex` и `align-items: center` для выравнивания элементов по вертикали. Задайте метке (`label`) фиксированную ширину или `flex-basis`. Полю ввода (`input`) задайте `flex-grow: 1`, чтобы оно занимало оставшееся пространство. В медиа-запросе `@media (max-width: 372px)` измените `flex-direction` для `.flex-group` на `column` и сбросьте выравнивание (`align-items: stretch` или `align-items: flex-start`), а также уберите фиксированную ширину у метки.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Адаптивная сетка для группы чекбоксов

id: 37462_adaptive-forms-5

Имеется группа чекбоксов. На широких экранах они должны располагаться в несколько колонок для компактности. На узких экранах (шириной 372px или меньше) каждый чекбокс с меткой должен занимать всю ширину строки для удобства выбора.

CSS
/* styles.css */
.container {
  width: 90%;
  margin: 20px auto;
  padding: 15px;
  border: 1px solid #eee;
}

.checkbox-grid {
  input1: grid;
  input2: repeat(auto-fit, minmax(150px, 1fr)); /* Адаптивные колонки */
  input3: 10px; /* Отступы между ячейками */
}

.checkbox-item {
  display: flex;
  align-items: center;
}

.checkbox-item input {
  margin-right: 8px;
}

/* Стили для малых экранов */
@media (max-width: 372px) {
  .checkbox-grid {
    input4: 1fr; /* Одна колонка */
  }
}
HTML
<!-- index.html -->
<div class="container">
  <fieldset>
    <legend>Выберите интересы:</legend>
    <div class="checkbox-grid">
      <div class="checkbox-item">
        <input type="checkbox" id="interest1" name="interest" value="web">
        <label for="interest1">Веб-разработка</label>
      </div>
      <div class="checkbox-item">
        <input type="checkbox" id="interest2" name="interest" value="design">
        <label for="interest2">Дизайн</label>
      </div>
      <div class="checkbox-item">
        <input type="checkbox" id="interest3" name="interest" value="mobile">
        <label for="interest3">Мобильная разработка</label>
      </div>
      <div class="checkbox-item">
        <input type="checkbox" id="interest4" name="interest" value="gamedev">
        <label for="interest4">Разработка игр</label>
      </div>
      <div class="checkbox-item">
        <input type="checkbox" id="interest5" name="interest" value="qa">
        <label for="interest5">Тестирование</label>
      </div>
    </div>
  </fieldset>
</div>
Используйте CSS Grid Layout для контейнера `.checkbox-grid`. Задайте `display: grid`. С помощью `grid-template-columns` определите количество и ширину колонок на больших экранах (например, `repeat(auto-fit, minmax(150px, 1fr))` для автоматического подбора количества колонок). Добавьте `gap` для отступов между элементами. В медиа-запросе `@media (max-width: 372px)` измените `grid-template-columns` на `1fr`, чтобы все элементы выстроились в одну колонку.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Скрытие необязательных полей на мобильных

id: 37462_adaptive-forms-6

В форме есть основное поле и дополнительное, необязательное поле 'Дополнительная информация'. Чтобы упростить форму на мобильных устройствах (экраны шириной 372px или меньше), скройте необязательное поле.

CSS
/* styles.css */
.form-container {
  width: 90%;
  margin: 20px auto;
  padding: 15px;
  border: 1px solid #ccc;
}

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

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

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid #999;
}

/* Стили для малых экранов */
@media (input1: 372px) {
  .optional-field {
    input2: none;
  }
}
HTML
<!-- index.html -->
<div class="form-container">
  <form>
    <div class="form-group">
      <label for="main-info">Основная информация:</label>
      <input type="text" id="main-info" name="main-info" required>
    </div>
    <div class="form-group optional-field">
      <label for="extra-info">Дополнительная информация (необязательно):</label>
      <textarea id="extra-info" name="extra-info" rows="3"></textarea>
    </div>
    <button type="submit">Отправить</button>
  </form>
</div>
Используйте медиа-запрос `@media (max-width: 372px)`. Внутри медиа-запроса примените к классу `.optional-field` свойство `display` со значением `none`, чтобы полностью скрыть этот блок.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру