HTML <legend> тег

  • Предыдущая страница <label>
  • Следующая страница <li>

Определение и использование

<legend> Определение тега <fieldset> элемент заголовок (заголовок).

См. также:

Руководство по HTML DOM:Объект Legenda

Пример

Пример 1

Группировка связанных элементов в форме:

<form action="/action_page.php">
  <fieldset>
    <legend>Личная информация：</legend>
    <label for="fname">Имя：</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">Фамилия：</label>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="email">Электронная почта：</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="birthday">Дата рождения：</label>
    <input type="date" id="birthday" name="birthday"><br><br>
    <input type="submit" value="Отправить">
  </fieldset>
</form>

Попробуйте сами

Пример 2

Позвольте заголовку поля浮动 направо (используя CSS):

<form action="/action_page.php">
  <fieldset>
    <legend style="float:right">Личная информация：</legend>
    <label for="fname">Имя：</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">Фамилия：</label>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="email">Электронная почта：</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="birthday">Дата рождения：</label>
    <input type="date" id="birthday" name="birthday"><br><br>
    <input type="submit" value="Отправить">
  </fieldset>
</form>

Попробуйте сами

Пример 3

использование CSS для настройки <fieldset> и <legend> Стиль:

<html>
<head>
<style>
fieldset {
  background-color: #eeeeee;
}
legend {
  background-color: gray;
  color: white;
  padding: 5px 10px;
}
input {
  margin: 5px;
}
</style>
</head>
<body>
<form action="/action_page.php">
  <fieldset>
    <legend>Личная информация：</legend>
    <label for="fname">Имя：</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">Фамилия：</label>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="email">Электронная почта：</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="birthday">Дата рождения：</label>
    <input type="date" id="birthday" name="birthday"><br><br>
    <input type="submit" value="Отправить">
  </fieldset>
</form>
</body>
</html>

Попробуйте сами

Глобальные свойства

<legend> Теги также поддерживают Глобальные свойства HTML.

Свойства событий

<legend> Теги также поддерживают События свойств HTML.

Стандартные настройки CSS

Большинство браузеров будут использовать следующие значения по умолчанию для отображения <legend> Элемент:

legend {
  display: block;
  padding-left: 2px;
  padding-right: 2px;
  border: none;
}

Попробуйте сами

Поддержка браузеров

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Поддержка Поддержка Поддержка Поддержка Поддержка
  • Предыдущая страница <label>
  • Следующая страница <li>