Тег HTML `<legend>`

Тег <code><legend></code> определяет заголовок для группы элементов формы, обернутых в тег <code><fieldset></code>. В браузере fieldset визуально обрамляется, а заголовок legend отображается внутри этой рамки. Обычно он должен быть первым дочерним элементом <code><fieldset></code>. Группировка связанных элементов формы с помощью <code><fieldset></code> и заголовков <code><legend></code> улучшает доступность и удобство использования для сложных форм.

Синтаксис

Тег <code><legend></code> парный. Содержимое записывается между открывающим <code><legend></code> и закрывающим <code></legend></code> тегами.

Пример использования тега HTML `<code><legend></code>`:

Тег HTML <code><legend></code>

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form>
      <fieldset>
        <legend>Personal data:</legend>
        Name:
        <input type="text" />
        <br>
        <br> E-mail:
        <input type="email" />
        <br>
        <br> Date of birth:
        <input type="number" />
        <br>
        <br> Place of birth:
        <input type="text" />
      </fieldset>
    </form>
  </body>
</html>

Try it Yourself »

Результат

пример использования тега legend

Пример использования тега HTML `<code><legend></code>` с CSS:

Пример использования тега <code><legend></code> со свойствами CSS:

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      form {
        width: 55%;
      }
      fieldset {
        padding: 25px;
      }
      label {
        display: inline-block;
        width: 95px;
        text-align: right;
      }
      legend {
        display: block;
        padding: 15px;
        margin-bottom: 10px;
        background-color: #cccccc;
        color: #777777;
      }
    </style>
  </head>
  <body>
    <form>
      <fieldset>
        <legend>Personal data:</legend>
        <label>Name:</label>
        <input type="text" />
        <br>
        <br>
        <label>E-mail:</label>
        <input type="email" />
        <br>
        <br>
        <label>Date of birth:</label>
        <input type="number" />
        <br>
        <br>
        <label>Place of birth:</label>
        <input type="text" />
      </fieldset>
    </form>
  </body>
</html>

Try it Yourself »

Атрибуты

Атрибут	Значение	Описание
align	left right center justify	Определяет выравнивание заголовка. Устарел в HTML5; вместо него используйте CSS `text-align` или `padding`.

Тег <code><legend></code> поддерживает Глобальные атрибуты и Атрибуты событий.

Как стилизовать тег HTML <code><legend></code>

Вы можете стилизовать элемент <code><legend></code> с помощью стандартных свойств CSS, таких как padding, margin, background-color и font-weight, как показано в предыдущем примере.

Практика

Какова основная функция тега HTML <legend>?

Он используется для создания поля ввода в форме.Он предоставляет заголовок для элемента <fieldset>.Он предоставляет заголовок для элемента <table>.Он используется для группировки связанных элементов в форме.

Тег HTML <legend> ​

Синтаксис ​

Пример использования тега HTML <code><legend></code>: ​

Результат ​

Пример использования тега HTML <code><legend></code> с CSS: ​

Атрибуты ​