Логотип schoolsw3.com
Учебники Справочники Упражнения КАК? Меню
Создать
Редактор Поддержка Форум

×
Учебники
Справочники
Упражнения
Пожертвовать Обновление Реклама Видео Магазин

HTML Справочник

HTML Теги по алфавиту HTML Теги по категориям HTML Поддержка браузера HTML Атрибуты тегов HTML Глобальные атрибуты HTML События атрибутов HTML Название цвета HTML Canvas HTML Аудио/видео HTML Наборы символов HTML Типы документов HTML URL Кодировка HTML Код языка HTML Код страны HTTP Сообщения ошибок HTTP Методы GET/POST HTML Конвертер PX в EM HTML Комбинация клавиш

HTML Теги

Тег <!--Комментарий--> Тег <!DOCTYPE> Тег <a> Тег <abbr> Тег <acronym> Тег <address> Тег <applet> Тег <area> Тег <article> Тег <aside> Тег <audio> Тег <b> Тег <base> Тег <basefont> Тег <bdi> Тег <bdo> Тег <big> Тег <blockquote> Тег <body> Тег <br> Тег <button> Тег <canvas> Тег <caption> Тег <center> Тег <cite> Тег <code> Тег <col> Тег <colgroup> Тег <data> Тег <datalist> Тег <dd> Тег <del> Тег <details> Тег <dfn> Тег <dialog> Тег <dir> Тег <div> Тег <dl> Тег <dt> Тег <em> Тег <embed> Тег <fieldset> Тег <figcaption> Тег <figure> Тег <font> Тег <footer> Тег <form> Тег <frame> Тег <frameset> Тег <h1> - <h6> Тег <head> Тег <header> Тег <hr> Тег <html> Тег <i> Тег <iframe> Тег <img> Тег <input> Тег <ins> Тег <kbd> Тег <label> Тег <legend> Тег <li> Тег <link> Тег <main> Тег <map> Тег <mark> Тег <meta> Тег <meter> Тег <nav> Тег <noframes> Тег <noscript> Тег <object> Тег <ol> Тег <optgroup> Тег <option> Тег <output> Тег <p> Тег <param> Тег <picture> Тег <pre> Тег <progress> Тег <q> Тег <rp> Тег <rt> Тег <ruby> Тег <s> Тег <samp> Тег <script> Тег <section> Тег <select> Тег <small> Тег <source> Тег <span> Тег <strike> Тег <strong> Тег <style> Тег <sub> Тег <summary> Тег <sup> Тег <svg> Тег <table> Тег <tbody> Тег <td> Тег <template> Тег <textarea> Тег <tfoot> Тег <th> Тег <thead> Тег <time> Тег <title> Тег <tr> Тег <track> Тег <tt> Тег <u> Тег <ul> Тег <var> Тег <video> Тег <wbr>


HTML Тег <fieldset>



Пример

Сгруппируйте связанные элементы в форме:

<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">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="Submit">
  </fieldset>
</form>
Попробуйте сами »


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

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

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


Совет: Тег <legend> используется для определения заголовка элемента <fieldset>.


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

Элемент
<fieldset> Да Да Да Да Да

Атрибуты <fieldset>

Атрибут Значение Описание
disabled disabled Указывает, что группа связанных элементов формы должна быть отключена
form form_id Указывает, к какой форме принадлежит набор полей
name text Задает имя для набора полей

Глобальные атрибуты <fieldset>

Тег <fieldset> также поддерживает Глобальные атрибуты в HTML.


События атрибутов <fieldset>

Тег <fieldset> также поддерживает События атрибутов в HTML.


Еще примеры <fieldset>

Пример

Используйте стиль 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">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="Submit">
  </fieldset>
</form>

</body>
</html>
Попробуйте сами »

Связные страницы <fieldset>

HTML DOM справочник: Объект fieldset


Настройки CSS по умолчанию <fieldset>

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

fieldset {
  display: block;
  margin-left: 2px;
  margin-right: 2px;
  padding-top: 0.35em;
  padding-bottom: 0.625em;
  padding-left: 0.75em;
  padding-right: 0.75em;
  border: 2px groove (internal value);
}