files/ru/web/html/element/fieldset/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145

---
title: '<fieldset>: The Field Set element'
slug: Web/HTML/Element/fieldset
translation_of: Web/HTML/Element/fieldset
---
<p><strong>HTML-элемент <code>&lt;fieldset&gt;</code></strong> используется для группировки нескольких элементов управления без веб-форм.</p>

<div>{{EmbedInteractiveExample("pages/tabbed/fieldset.html", "tabbed-standard")}}</div>

<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>

<p>Пример выше показывает, как элемент <code>&lt;fieldset&gt;</code> группирует части HTML-формы, а вложенный элемент {{htmlelement("legend")}} даёт заголовок для <code>&lt;fieldset&gt;</code>. Он может иметь несколько атрибутов, самый используемый из них <code>form</code>, который содержит <code>id</code> формы {{htmlelement("form")}} на этой же странице. Этот атрибут позволяет сделать <code>&lt;fieldset&gt;</code> частью формы <code>&lt;form&gt;</code> даже если он не находится внутри неё. Также вы можете отключить <code>&lt;fieldset&gt;</code> и всё его содержимое с помощью атрибута <code>disabled</code>.</p>

<h2 id="Атрибуты">Атрибуты</h2>

<p>Этот элемент включает в себя <a href="/ru/docs/HTML/Global_attributes">глобальные атрибуты</a>.</p>

<dl>
 <dt>{{htmlattrdef("disabled")}} {{HTMLVersionInline(5)}}</dt>
 <dd>Если этот логический атрибут установлен, все элементы управления формой, вложенные в <code>&lt;fieldset&gt;</code> будут отключены. Это значит, что их нельзя изменять, но можно отправить через форму <code>&lt;form&gt;</code>, в отличие от атрибута {{htmlattrdef("disabled")}} на элементах управления формой. Они не будут реагировать на браузерные события, такие как клики мышью или события focus. По умолчанию, браузер отображает такие элементы управления в сером цвете. Обратите внимание, что элементы формы внутри элемента {{HTMLElement("legend")}} не будут отключены.</dd>
 <dt>{{htmlattrdef("form")}} {{HTMLVersionInline(5)}}</dt>
 <dd>Этот атрибут принимает значение атрибута <code>id</code> элемента {{HTMLElement("form")}}, с которой вам нужно связать <code>&lt;fieldset&gt;</code>, даже если он находится вне формы.</dd>
 <dt>{{htmlattrdef("name")}} {{HTMLVersionInline(5)}}</dt>
 <dd>Имя, связанное с группой.
 <div class="note"><strong>Примечание</strong>: Заголовок для &lt;fieldset&gt; устанавливается первым {{HTMLElement("legend")}} внутри него.</div>
 </dd>
</dl>

<h2 id="Стилизация_с_CSS">Стилизация с CSS</h2>

<p>Есть несколько особенностей стилизации <code>&lt;fieldset&gt;</code>. </p>

<p>По умолчанию, значение свойства {{cssxref("display")}} равняется <code>block</code>, что создаёт блочный контекст форматирования. Если установить значение <code>display</code> как inline-элементу <code>&lt;fieldset&gt;</code>, это будет работать как <code>inline-block</code>, в ином случае, это будет работать как <code>block</code>. По умолчанию, имеется border 2px groobe вокруг содержимого и небольшой внутренний отступ. Элемент имеет <code>min-inline-size: min-content</code> по умолчанию.</p>

<p>Если задан &lt;legend&gt;, он будет помещён поверх верхней границы. &lt;legend&gt; сжимается и переносится, также имеет свой контекст форматирования. Значение <code>display</code> блочное (например, <code>display: inline</code> работает как <code>block</code>).</p>

<div class="hidden">
<p>Требуется перевод с четвёртого абзаца и ниже</p>
</div>

<h2 id="Примеры">Примеры</h2>

<h3 id="Простой_fieldset">Простой fieldset</h3>

<p>Этот пример показывает простой <code>&lt;fieldset&gt;</code> с <code>&lt;legend&gt;</code> и единственным элементом управления внутри.</p>

<pre class="brush: html">&lt;form action="#"&gt;
  &lt;fieldset&gt;
    &lt;legend&gt;Simple fieldset&lt;/legend&gt;
    &lt;input type="radio" id="radio"&gt;
    &lt;label for="radio"&gt;Spirit of radio&lt;/label&gt;
  &lt;/fieldset&gt;
&lt;/form&gt;</pre>

<p>{{ EmbedLiveSample('Простой_fieldset', '100%', '80') }}</p>

<h3 id="Отключённый_fieldset">Отключённый fieldset</h3>

<p>Этот пример показывает отключённый <code>&lt;fieldset&gt;</code> с двумя элементами управления внутри.</p>

<pre class="brush: html">&lt;form action="#"&gt;
  &lt;fieldset disabled&gt;
    &lt;legend&gt;Disabled fieldset&lt;/legend&gt;
    &lt;div&gt;
      &lt;label for="name"&gt;Name: &lt;/label&gt;
      &lt;input type="text" id="name" value="Chris"&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;label for="pwd"&gt;Archetype: &lt;/label&gt;
      &lt;input type="password" id="pwd" value="Wookie"&gt;
    &lt;/div&gt;
  &lt;/fieldset&gt;
&lt;/form&gt;</pre>

<p>{{ EmbedLiveSample('Отключённый_fieldset', '100%', '110') }}</p>

<h2 id="Техническая_сводка">Техническая сводка</h2>


<table class="properties" style="font-family: Arial,x-locale-body,sans-serif; font-size: 1rem; letter-spacing: -0.00278rem;">
 <tbody>
  <tr>
   <th scope="row"><a href="/ru/docs/HTML/Content_categories">Категории контента</a></th>
   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D0%BE%D0%B9_%D0%BF%D0%BE%D1%82%D0%BE%D0%BA">Основной поток</a>, <a href="/ru/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document">корневой раздел</a>, <a href="/en-US/docs/HTML/Content_categories#form_listed">listed</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#%D0%9A%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D1%82_%D1%84%D0%BE%D1%80%D0%BC">контент форм</a>, явный контент.</td>
  </tr>
  <tr>
   <th scope="row">Разрешённый контент</th>
   <td>Необязательный элемент {{HTMLElement("legend")}}, следующий в основном потоке.</td>
  </tr>
  <tr>
   <th scope="row">Пропуск тегов</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Разрешённые родители</th>
   <td>Любой элемент основного потока</td>
  </tr>
  <tr>
   <th scope="row">Разрешённые ARIA roles</th>
   <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td>
  </tr>
  <tr>
   <th scope="row">Взаимодействие с DOM </th>
   <td>{{domxref("HTMLFieldSetElement")}}</td>
  </tr>
 </tbody>
</table>


<h2 id="Спецификации">Спецификации</h2>

{{Specifications}}

<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>


<p>{{Compat("html.elements.fieldset")}}</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>Другие связанные элементы:
  <ul>
   <li>{{HTMLElement("form")}}</li>
   <li>{{HTMLElement("legend")}}</li>
   <li>{{HTMLElement("label")}}</li>
   <li>{{HTMLElement("button")}}</li>
   <li>{{HTMLElement("select")}}</li>
   <li>{{HTMLElement("datalist")}}</li>
   <li>{{HTMLElement("optgroup")}}</li>
   <li>{{HTMLElement("option")}}</li>
   <li>{{HTMLElement("textarea")}}</li>
   <li>{{HTMLElement("keygen")}}</li>
   <li>{{HTMLElement("input")}}</li>
   <li>{{HTMLElement("output")}}</li>
   <li>{{HTMLElement("progress")}}</li>
   <li>{{HTMLElement("meter")}}</li>
  </ul>
 </li>
</ul>

<div>{{HTMLRef}}</div>