80. Группировка элементов в HTML формах
Для удобства пользователей, часто нужно сгруппировать элемента так, чтобы было легче ориентироваться. Группировать разумно, если в форме находится много элементов. Для группировки элементов в форме используется тег . Чтобы создать заголовок для этой группы, используется тег . Для пущей понятности далее пример:
первый чекбокс
второй чекбокс
Атрибуты для и
Для тегов и применяются универсальные атрибуты, а так же уже вам известные такие как: для — disabled, form, title; для — accesskey, align, title.
Похожие уроки и записи блога
Чтобы использовать все функции сайта (например, сохранение прогресса прохождения уроков и участие в рейтинге среди пользователей), вам нужно авторизоваться. Это можно сделать пройдя обычную регистрацию с использованием почты или в пару кликов, если у вас есть один из аккаунтов: ВКонтакте, GitHub, Google, Яндекс или Telegram.
- В вашей форме создайте многострочное текстовое поле
- В вашей форме создайте универсальный атрибут формы
- Из вашего универсального атрибута формы сделайте чекбокс (флажок)
- Два созданных вами элемента сгруппируйте новым для вас тегом (из этого урока)
- Озаглавьте вашу группу любым названием
– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте.
– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить на любом популярном форуме в интернете.
Извините за это всплывающее окно, меня они тоже раздражают.
Образовательный ресурс codebra.ru полностью посвящен программированию. Все курсы и уроки находятся на главной странице. Ради интереса можете посмотреть на содержимое курсов по Python, HTML и CSS, JavaScript, C++ и другие, размещенные на главной странице.
Если что-то не нашли, то воспользуйтесь поиском по сайту, который находится на главной странице в самом верху.
HTML :: Группировка элементов формы, теги и
Как видим, элементов входящих в состав формы предостаточно. Поэтому иногда возникает необходимость объединения элементов в группы по каким-либо признакам, например, текстовые поля можно отделить от полей ввода логина и пароля, а также от флажков. Для этих целей существует элемент «fieldset» , формирующийся парным тегом (от англ. form field set – набор полей формы). Для связи с формой, в случае расположения за ее пределами, используется атрибут form . Если нужно блокировать поля формы, содержащиеся внутри контейнера «fieldset» , используется логический атрибут disabled . Это может потребоваться, если возникнет необходимость активировать данную группу элементов формы только после выполнения установленной последовательности действий. Также у элемента «fieldset» присутствует атрибут name . Кстати, браузеры по умолчанию отображают его, как блочный элемент, и для наглядности выделяют область, ограниченную элементом, рамкой.
Использование элемента «fieldset» показано в примере №1 .
Пример №1. Использование элемента «fieldset»
Тег
Для создания заголовка группы элементов формы, объединенной при помощи «fieldset» , используется отдельный элемент «legend» , который формируется парным тегом (от англ. legend – легенда, надпись). Текст, написанный внутри данного контейнера, как раз и становится заголовком, который отображается вверху и встраивается в рамку, которой ограничивается данная группа (см. пример №1 ).
Примеры использования форм можно посмотреть на соответствующей странице нашего учебного сайта №1 .
Быстрый переход к другим страницам
html.okpython.net Copyright © 2016-2023.
Группировка элементов формы
При создании более сложных форм может показаться удобной группировка некоторых элементов, что можно сделать с помощью элемента fieldset . В таблице 12-8 представлен элемент fieldset .
Вы можете увидеть, как используется элемент fieldset , в листинге 12-12. Я добавил в этот пример дополнительные элементы input , чтобы показать, как fieldset может быть применен к подмножеству элементов в форме.
Я использовал элемент fieldset для группировки двух элементов input , которые собирают информацию о пользователе, и другой fieldset для группировки трех элементов input , которые позволяют пользователю голосовать за три его любимых фрукта. Вы можете увидеть, как браузер отображает стили по умолчанию для элемента fieldset , на рисунке 12-8.
Добавление описательной метки для элемента fieldset
Мы сгруппировали наши элементы input , но у нас все еще нет контекста для пользователей. Это можно исправить, если добавив для каждого из элементов fieldset элемент legend . В таблице 12-9 представлен элемент legend .
| Элемент | legend |
| Тип элемента | N/A |
| Разрешенные родительские элементы | Элемент fieldset |
| Локальные атрибуты | Нет |
| Содержание | Фразовый контент |
| Стиль тегов | Открывающий и закрывающий теги |
| Новый в HTML5 | Нет |
| Изменения в HTML5 | Нет |
| Соглашение по стилям | legend |
Элемент legend должен быть первым дочерним для элемента fieldset , как показано в листинге 12-13.
На рисунке 12-9 показано, как браузер отображает элементы legend .
Отключение группы элементов input при помощи элемента fieldset
Ранее в этой главе я показал вам, как отключить отдельные элементы input . Вы также можете отключить несколько элементов input за один шаг, если примените атрибут disabled к элементу fieldset . Когда вы это сделаете, все элементы input , содержащиеся в fieldset , будут отключены, как показано в листинге 12-14.
На рисунке 12-10 вы можете увидеть результат отключения элементов input .
или RSS канал:
Группирование элементов форм
При создании сложной формы можно визуально отделить некоторые поля друг от друга с помощью элемента , который создаёт рамку с заголовком или без него. Структура кода следующая.
Элемент не обязателен, но если присутствует, должен идти сразу же после . Другие элементы или текст перед недопустимы. Внутри можно использовать элементы форматирования вроде , , , и др.
В примере 1 показано использование группирование на практике.
Результат данного примера показан на рис. 1.
Вид рамки в браузерах в целом одинаков — заголовок располагается в левом верхнем углу, встраиваясь прямо в рамку. Однако есть и мелкие различия, к примеру, в IE рамка имеет скруглённые углы, а в других браузерах они прямые.
Элементы и хорошо стилизуются, к ним применяется множество свойств, что позволяет сделать вид формы однотипным в разных браузерах и добавить своё оформление (пример 2).
Пример 2. Оформление группы
Результат данного примера показан на рис. 2. Почему-то IE в отличие от других браузеров не желает скруглять уголки у .
Рис. 2. Вид группы после применения стилей
- Текст
- Фон
- Ссылки
- Списки
- Изображения
- Таблицы
- Формы
- Отправка данных формы
- Текстовое поле
- Поле для ввода пароля
- Многострочное текстовое поле
- Кнопки
- Элемент label
- Переключатели
- Флажки
- Поле со списком
- Скрытое поле
- Поле с изображением
- Загрузка файлов
- Адрес электронной почты
- Веб-адрес
- Выбор цвета
- Ввод чисел
- Ползунок
- Календарь
- Поле для поиска
- Номер телефона
- Группирование элементов форм
- Блокирование элементов форм
- Автофокус
- Подсказывающий текст
- Защита от дурака