path: root/files/ru/web/html/element/fieldset/index.html

---
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>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'forms.html#the-fieldset-element', '&lt;fieldset&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>Определение элемента <code>fieldset</code></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'forms.html#the-fieldset-element', '&lt;fieldset&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.10', '&lt;fieldset&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td>Изначальное определение</td>
  </tr>
 </tbody>
</table>

<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>