Формы Mobile-First

Часть раздела Practical Frontend путешествия по HTML на Coddy — урок 10 из 35.

Формы — одна из самых важных частей веба: пользователи постоянно вводят данные, нажимают на элементы и взаимодействуют с ними. При проектировании форм в первую очередь для мобильных устройств (mobile first) мы уделяем особое внимание удобству использования на небольших экранах:

Сделайте поля ввода и кнопки больше, чтобы пользователям было удобно печатать и нажимать.
Располагайте поля вертикально и используйте поля ввода во всю ширину.
Добавьте внутренние отступы (padding) и интервалы для удобства нажатия пальцами.

Пример для мобильных устройств:

input, button {
  width: 100%;       /* полная ширина для маленьких экранов */
  padding: 0.75rem;  /* легче нажимать */
  font-size: 1rem;   /* читаемый текст */
}

Затем для экранов большего размера (планшетов или настольных компьютеров) мы улучшаем макет:

Центрируйте форму на странице.
Разместите некоторые поля рядом друг с другом вместо того, чтобы располагать их друг под другом.
Настройте ширину и отступы для лучшего внешнего вида.

Пример для больших экранов:

@media (min-width: 768px) {
  form {
    max-width: 500px;  /* центрирование и ограничение ширины */
    margin: 0 auto;
  }

  .row {
    display: flex;
    gap: 1rem;         /* поля ввода бок о бок */
  }
}

Задание

Легко

Вам дана базовая HTML-форма. Ваша задача — настроить стили в стиле mobile-first:

Элементы внутри формы должны располагаться вертикально. Используйте display: flex и flex-direction: column, а также добавьте gap, чтобы это выглядело аккуратно.
Примените width: 100% и добавьте padding к элементам input, button и textarea, чтобы они были достаточно большими для мобильных экранов и удобными для нажатия пользователями.

Шпаргалка

При проектировании форм в первую очередь для мобильных устройств (mobile-first), сосредоточьтесь на удобстве использования на маленьких экранах:

Сделайте поля ввода и кнопки крупнее, чтобы пользователям было удобно печатать и нажимать на них
Располагайте поля вертикально и используйте ввод во всю ширину
Добавьте внутренние отступы (padding) и интервалы для удобства нажатия пальцами

Стили форм для мобильных устройств:

input, button {
  width: 100%;       /* во всю ширину для маленьких экранов */
  padding: 0.75rem;  /* легче нажимать */
  font-size: 1rem;   /* читаемый текст */
}

Для больших экранов (планшетов или компьютеров) улучшите макет:

Центрируйте форму на странице
Разместите некоторые поля рядом друг с другом вместо расположения в стек
Настройте ширину и интервалы для лучшего внешнего вида

@media (min-width: 768px) {
  form {
    max-width: 500px;  /* центрирование и ограничение ширины */
    margin: 0 auto;
  }

  .row {
    display: flex;
    gap: 1rem;         /* поля ввода рядом друг с другом */
  }
}

Попробуйте сами

<!DOCTYPE html>
<html>
<head>
  <title>Mobile-First Forms</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 1rem;
      background-color: #f0f4f8;
    }

    form {
      
    }

    input, textarea, button {
      padding: 0.75rem;    
      font-size: 1rem;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    button {
      background-color: #4a90e2;
      color: white;
      border: none;
      cursor: pointer;
    }

    /* Larger screens */
    @media (min-width: 768px) {
      form {
        max-width: 600px;
        margin: 0 auto; /* center form */
      }

      .row {
        display: flex;
        gap: 1rem; /* side-by-side fields */
      }

      .row input {
        width: 100%; /* split space equally */
      }
    }
  </style>
</head>
<body>
   <h1>Contact Us</h1>
  <form>
    <div class="row">
      <input type="text" placeholder="Name" required>
      <input type="email" placeholder="Email" required>
    </div>
    <textarea placeholder="Your Message" rows="4" required></textarea>
    <button type="submit">Send</button>
  </form>
</body>
</html>