Пример использования группы полей fieldset

Grouping Controls

Grouping related form controls makes forms more understandable for all users, as related controls are easier to identify. It also makes it easier for people to focus on smaller and more manageable groups rather than try to grasp the entire form at once.

Grouping needs to be carried out visually and in the code, for example, by using the and elements to associate related form controls. Also, related entries of a element can be grouped using .

Associating related controls with fieldset

The element provides a container for related form controls, and the element acts as a heading to identify the group.

The legend for a group of controls can also highlight common attributes of all controls, for example, to advise that all fields in the group are required.

Radio buttons

In the example below, there are three radio buttons that allow the user to choose an output format. Radio button groups should always be grouped using .

  Output format  type="radio" name="format" id="txt" value="txt" checked>  for="txt">Text file   type="radio" name="format" id="csv" value="csv">  for="csv">CSV file  […] 

Checkboxes

In the example below, three checkboxes are part of an opt-in function for receiving different types of information.

  I want to receive  type="checkbox" name="newsletter" id="check_1">  for="check_1">The weekly newsletter  […] 

Related fields

This example shows form fields to enter shipping and billing addresses. As the labels in both groups have the same text, the fieldset element also helps to distinguish the form fields by their groups. In case the is not read by screen readers (see note below), labels for the first form control in each group should include the group’s name. This name can be hidden visually.

  Shipping Address:  for="shipping_name">  class="visuallyhidden">Shipping Name:  type="text" name="shipping_name" id="shipping_name">   for="shipping_street">Street:  type="text" name="shipping_street" id="shipping_street">  […]  Billing Address:  for="billing_name">  class="visuallyhidden">Billing Name:  type="text" name="billing_name" id="billing_name">   for="billing_street">Street:  type="text" name="billing_street" id="billing_street">  […] 

Note: Depending on the configuration, some screen readers read out the legend either with every form element, once, or, rarely, not at all. To accommodate this consider the following:

• Make the legend as short as possible for situations in which it is read together with the label each time.
• Make the individual labels sufficiently self-explanatory for situations in which legends are not read aloud, without repeating the legend in every label.

Associating related controls with WAI-ARIA

WAI-ARIA provides a grouping role that functions similarly to fieldset and legend . In this example, the div element has role=group to indicate that the contained elements are members of a group and the aria-labelledby attribute references the id for text that will serve as the label for the group.

This technique provides additional styling possibilities.

Because WAI-ARIA not fully supported in all web browser and screen reader combinations, a group identifier should be added to the first form control in the group.

 role="group" aria-labelledby="shipping_head">  id="shipping_head">Shipping Address:  for="shipping_name">  class="visuallyhidden">Shipping Name:  type="text" name="shipping_name" id="shipping_name">  […]  role="group" aria-labelledby="billing_head">  id="billing_head">Billing Address:  for="billing_name">  class="visuallyhidden">Billing Name:  type="text" name="billing_name" id="billing_name">  […] 

Grouping items in select elements

For select elements with groups of options, the optgroup element can be used to indicate such groups. The label attribute of the optgroup element is used to provide a label for the group. This is especially useful for lists with many related options. In the example below, users can choose from lectures in one of three courses.

  label="8.01 Physics I: Classical Mechanics">  value="8.01.1">Lecture 01: Powers of Ten  value="8.01.2">Lecture 02: 1D Kinematics  value="8.01.3">Lecture 03: Vectors   label="8.02 Physics II: Electricity and Magnestism">  value="8.02.1">Lecture 01: What holds our world together? […] […] 

These tutorials provide best-practice guidance on implementing accessibility in different situations. This page combined the following WCAG success criteria and techniques from different conformance levels:

Success Criteria:

• 1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)
• 3.3.2 Labels or Instructions: Labels or instructions are provided when content requires user input. (Level A)

Help improve this page

Please share your ideas, suggestions, or comments via e-mail to the publicly-archived list wai-eo-editors@w3.org or via GitHub.

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-ACT project, co-funded by the European Commission IST Programme.

Strategies, standards, and supporting resources to make the Web accessible to people with disabilities.

Copyright © 2023 World Wide Web Consortium (W3C ® ). See Permission to Use WAI Material.

Источник

Тег HTML группа полей

Тег в HTML используется для объединения нескольких элементов HTML формы в группу.

Элементы формы, объединенные в группу с помощью тега , как правило, выделяются браузерами с помощью квадратной рамки.

С помощью атрибута disabled тега fieldset можно отключить сразу все поля в группе.

Тег HTML является элементом формы. Подробно о создании форм описано в статье: Все про формы и поля в HTML. Создание и работа с формами.

Синтаксис

Отображение в браузере

Пример использования группы полей в HTML коде

 
 
 
 
 
Контактные данные
 
ФИО: 

 
Email: 

 
Телефон:

Поддержка браузерами

Тег
	Да	Да	Да	Да	Да

Атрибуты тега fieldset

Логический атрибут. Если указан, делает группу полей неактивной.

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

Указывает на форму, к которой относится группа полей (поля группы будут привязаны к указанной форме). Используется, если группа полей находится вне HTML кода формы.

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

Этот атрибут не поддерживается многими браузерами! Используйте атрибут form в тегах полей (элементов) формы.

Источник

80. Группировка элементов в HTML формах

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

 
Чекбоксы
 
первый чекбокс
 
второй чекбокс

Атрибуты для и

Для тегов и применяются универсальные атрибуты, а так же уже вам известные такие как: для — disabled, form, title; для — accesskey, align, title.

Похожие уроки и записи блога

Чтобы использовать все функции сайта (например, сохранение прогресса прохождения уроков и участие в рейтинге среди пользователей), вам нужно авторизоваться. Это можно сделать пройдя обычную регистрацию с использованием почты или в пару кликов, если у вас есть один из аккаунтов: ВКонтакте, GitHub, Google, Яндекс или Telegram.

1. В вашей форме создайте многострочное текстовое поле
2. В вашей форме создайте универсальный атрибут формы
3. Из вашего универсального атрибута формы сделайте чекбокс (флажок)
4. Два созданных вами элемента сгруппируйте новым для вас тегом (из этого урока)
5. Озаглавьте вашу группу любым названием

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте.

– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить на любом популярном форуме в интернете.

Извините за это всплывающее окно, меня они тоже раздражают.

Образовательный ресурс codebra.ru полностью посвящен программированию. Все курсы и уроки находятся на главной странице. Ради интереса можете посмотреть на содержимое курсов по Python, HTML и CSS, JavaScript, C++ и другие, размещенные на главной странице.

Если что-то не нашли, то воспользуйтесь поиском по сайту, который находится на главной странице в самом верху.

Источник

How we can group data in HTML forms?

We use the tag, to group related data in HTML forms. This tag creates a box around the related elements on the web page. The tag is used inside the tag to give a caption to the group or name to the group.

Syntax

Example 1

Following is an example to group data in HTML forms using the tag inside the tag −

DOCTYPE html> html> head> meta charset="UTF-8"> meta name="description" content="meta tag in the web document"> meta name="keywords" content="HTML,CSS"> meta name="author" content="lokesh"> meta name="viewport" content="width=device-width, initial-scale=1.0"> head> body>  form> fieldset> legend>Employee Detailslegend> Employee Namebr> input type="text" name="Ename"> br> Employee IDbr> input type="text" name="Eid"> br> Employee Addressbr> input type="text" name="Eid"> br> fieldset>  form> body> html> 
 

Example 2

You can try to run the following code to group data in HTML forms −

DOCTYPE html> html> body>  form> fieldset> legend>Student Information:legend> Student Name:br> input type="text" name="sname"> br> Student Subject:br> input type="text" name="ssubject"> br> fieldset>  form> body> html> 
 

Источник