Войти
Регистрация

Группировка элементов формы

Группировка элементов формы

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

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

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

  • Персональные данные - указываем ФИО, контакты.
  • Адрес доставки - указываем адрес доставки, почтовый индекс.
  • Желаемый способ оплаты - даем возможность выбрать способ оплаты.
  • Способ уведомления - выбираем способ уведомления о доставке.

Мы можем создать форму, разграничив ее по группам:

<form action="script.php" method="POST">
  <fieldset>
   <legend>Персональные данные</legend>
     <input type="text" name="name" placeholder="Ваше имя"/>
     <input type="text" name="email" placeholder="Email"/>
     <input type="text" name="phone" placeholder="Номер телефона"/>
  </fieldset>

  <fieldset>
   <legend>Адрес доставки</legend>
     <textarea name="adress" placeholder="Адрес доставки"></textarea>
     <input type="text" name="index" placeholder="Почтовый индекс"/>
  </fieldset>

  <fieldset>
   <legend>Желаемый способ оплаты</legend>
     <label>Оплатить курьеру</label>
     <input type="radio" name="pay" value="1"/>
     <label>Оплатить Online</label>
     <input type="radio" name="pay" value="2"/>
     <label>Оплатить по счету</label>
     <input type="radio" name="pay" value="3"/>
  </fieldset>

  <fieldset>
   <legend>Способ уведомления</legend>
     <input type="text" name="notice-phone" placeholder="по телефону"/>
     <input type="text" name="notice-email" placeholder="на email"/>
  </fieldset>
     <input type="submit" value="Отправить" />
</form>

В примере мы разграничили каждую группу элементов формы с помощью парного тега <fieldset>. Внутри этого тега указали заголовок группы в теге <legend>.

Результат следующий:

Персональные данные
Адрес доставки
Желаемый способ оплаты
Способ уведомления

Каждая группа элементов обрамилась рамкой. Стили обрамления, отступы уже можно поправить с помощью CSS.

Используя группировку Вы облегчите задачу пользователям при заполнении формы и так она выглядит намного красивее и удобнее.

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?