что такое fieldset в html
Что такое fieldset в html
, выпадающие списки и другие) в блок с характерным выделением границ. Опционально с помощью тега внутри можно задать заголовок для создаваемой группы (он может быть только один и обязательно должен идти первым вложенным элементом).
Пример
Как это понять
В сложных формах количество контролов может устрашающе перегружать интерфейс, и правильным решением в этом случае будет группировка смысловых элементов.
Как пишется
Для добавления подписи внутри следует использовать :
Атрибуты
Подсказки
Самое удобное в использовании — возможность заблокировать все вложенные контролы внутри тега одним атрибутом disabled :
Внешний вид оформления рамки по умолчанию у немного отличается в зависимости от браузера и операционной системы:
Windows 10, Google Chrome 71.0 
macOS Big Sur Big Sur, Google Chrome 71.0 
Windows 10, Edge 18.0 
macOS Big Sur Big Sur, Safari 14.0 
Samsung Galaxy S7 
Google Nexus 6
На практике
Realetive
Тег HTML группа полей
Тег в HTML используется для объединения нескольких элементов HTML формы в группу.
С помощью тега можно указать название группы (подпись).
С помощью атрибута disabled тега fieldset можно отключить сразу все поля в группе.
Тег HTML является элементом формы. Подробно о создании форм описано в статье: Все про формы и поля в HTML. Создание и работа с формами.
Синтаксис
Отображение в браузере
Контактные данные ФИО:
Пример использования группы полей в HTML коде
Поддержка браузерами
| Тег | |||||
| Да | Да | Да | Да | Да |
Атрибуты тега fieldset
Логический атрибут. Если указан, делает группу полей неактивной.
Данные полей группы, отмеченной этим атрибутом, не будут переданы на сервер при отправке формы. Также отключает возможность ввода в поля группы.
Указывает на форму, к которой относится группа полей (поля группы будут привязаны к указанной форме). Используется, если группа полей находится вне HTML кода формы.
Построение форм
Формы являются неотъемлемой частью Интернета, так как они предлагают сайтам метод сбора информации от пользователей и обработки запросов, а также элементы управления практически для любого мыслимого применения. С помощью элементов управления или полей, формы могут запросить небольшой объём информации — часто это поисковый запрос, имя пользователя или пароль. Или большой объём информации — возможно, данные о посылке, платёжная информация или предложение работы.
Мы должны знать как создавать формы чтобы получить входные данные от пользователя. В этом уроке мы обсудим, как использовать HTML для разметки формы, какие элементы использовать для захвата разных типов данных и как стилизовать формы с помощью CSS. Мы не станем слишком углубляться в то, как информация из формы обрабатывается на стороне сервера. Обработка форм представляет собой глубокую тему, вне области этой книги; здесь мы будем придерживаться создания и стилизации форм.
Инициализация формы
Чтобы добавить форму на страницу мы будем использовать элемент
Демонстрация формы для входа
На практике
С пониманием того как строить формы, давайте создадим страницу регистрации для нашего сайта Styles Conference, чтобы мы могли начать собирать интерес и продавать билеты на мероприятие.
Перепрыгнем к нашему файлу register.html и начнём, следуя тому же макету что мы использовали для страниц Спикеры и Место проведения. Он включает в себя добавление элемента с классом row чуть ниже вступления и вложенный элемент
Наш код чуть ниже вступления для страницы Регистрация должен выглядеть следующим образом:
Теперь внутри нашей колонке 2/3 добавим некоторые детали о нашем мероприятии и почему поучаствовать в нём будет хорошей идеей для начинающих дизайнеров и фронтенд-разработчиков. Мы сделаем это, используя несколько разных уровней заголовков (вместе с заранее установленными для них стилями), абзацем и маркированным списком.
В нашем элементе с классом col-2-3 код должен выглядеть следующим образом:
В данный момент наш маркированный список не содержит маркеры списка. Все стили браузера по умолчанию были выключены сбросом CSS, мы добавили всё обратно в уроке 1. Давайте создадим несколько пользовательских стилей специально для этого списка.
Чтобы сделать это, добавим класс why-attend к маркированному списку.
Новый раздел в нижней части нашего файла main.css должен выглядеть следующим образом:
Раздел нашей страницы Регистрация завершён, так что теперь пришло время обратиться к регистрационной форме. Начнём с добавления атрибутов action и method к элементу
Далее, внутри элемента
Для поля комментариев используется элемент
В разделе Регистрация нашего файла main.css мы хотим добавить следующие стили:
Вы заметите, что большинство из этих свойств и значений вращаются вокруг блочной модели, которую мы рассмотрели в уроке 4. Мы, прежде всего, настроили размеры разных полей формы, гарантируя, что они располагаются должным образом. Помимо добавления некоторых стилей блочной модели, мы настроили color и font-weight у нескольких элементов.
Теперь наша кнопка для отправки делит некоторые общие стили с кнопкой на главной странице. Мы воспользуемся классом btn-default чтобы применить некоторые новые стили конкретно к нашей кнопке.
Возвращаясь назад к разделу с кнопками в нашем файле main.css, добавим следующее:
Эти новые стили определяют размер и фон нашей кнопки, затем комбинируются с существующими стилями класса btn и создают финальную презентацию нашей кнопки.
Наша страница Регистрация закончена и посетители теперь могут начать бронировать билеты.
Рис. 10.07. Наша страница регистрации с формой
Демонстрация и исходный код
Ниже вы можете скачать исходный код сайта на данный момент.
Резюме
Формы играют большую роль в том, как пользователи взаимодействуют с сайтами, предоставляют им информацию и работают с ними. Мы предприняли все правильные шаги, чтобы не только узнать как создавать формы, но и как их стилизовать.
Напомним быстро, что мы обсудили в этом уроке:
Наше понимание HTML и CSS продвигается достаточно хорошо и у нас остался только один компонент для изучения: таблицы. В следующей главе мы рассмотрим как организовать и представить данные в таблицах.
Использование элементов fieldset и legend для группировки управляющих элементов HTML форм
Элементы fieldset и legend должны использоваться вместе для создания именованных групп связанных с точки зрения семантики полей ввода HTML форм. Это позволяет пользователю понять, как поля ввода связаны между собой.
Как группировка представляется пользователю, зависит в основном от того, зрячий он или нет. Большинство графических браузеров по умолчанию рисуют рамку вокруг элемента fieldset и отображают legend вверху этой рамки, в то время как «читалки» проговаривают текст, который находится в legend, в начале каждого блока fieldset или перед каждым элементом управления, который находится внутри него. В результате — лучше делать его коротким и продумывать то, как будут сочетаться текст в legend и label, если их произнести вместе.
Вот пример использования fieldset для группировки radio:
В общем: не используйте fieldset и legend если вы хотите обрамить рамочкой информационное наполнение страницы (От переводчика: весьма неожиданный вывод. Кто бы мог подумать, да?) Их следует использовать для логической группировки элементов управления в форме, всегда следует использовать оба элемента и текст в legend должен быть краток.
Дополнительные материалы:
Связанные заметки
Послесловие.
Мне интересна тема доступности веб-сайтов. Особенно для пользователей с ограничениями по зрению или отсутствием такового. Если кто то знает реально используемые такими людьми бесплатные скринридеры, статьи, которые описывают особенности работы с ними, любую информацию по этой тематике — пожалуйста напишите мне. А я по мере того как буду получать информацию сам — буду писать статейки, которые освещают данную проблематику.
О переводчике.
Я — Ворон. А Ворон это — я. Кое где известен, как Тихий Бес (Silent Imp).
Я вольнонаемный верстальщик, программист.
Очень люблю качественно верстать макеты.
А еще у меня есть маленький сайтик.
Переводами занимаюсь потому, что сам читаю эти статейки и иногда мне хочется сделать что-то хорошее окружающим меня людям. Надеюсь, что статейка доставит вам удовольствие или даже будет вам полезна.
1.15. HTML5-формы
HTML-формы являются элементами управления, которые применяются для сбора информации от посетителей веб-сайта.
Веб-формы состоят из набора текстовых полей, кнопок, списков и других элементов управления, которые активизируются щелчком мыши. Технически формы передают данные от пользователя удаленному серверу.
Для получения и обработки данных форм используются языки веб-программирования, такие как PHP, Perl.
HTML5-формы решили большинство этих распространенных проблем благодаря наличию новых атрибутов, предоставив возможность изменять внешний вид элементов форм за счет CSS3.
Рис. 1. Улучшенные веб-формы с помощью HTML5
Создание HTML5-формы
2. Группировка элементов формы
3. Создание полей формы
Элемент создает большинство полей формы. Атрибуты элемента отличаются в зависимости от типа поля, для создания которого используется этот элемент.