Самоучитель HTML Справочник HTML Глобальные атрибуты События Типы элементов Таблица цветов Спецсимволы HTML
Теги HTML

HTML тег <fieldset>

Поддержка браузерами

Описание

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

Элемент <fieldset> часто используется совместно с элементом <legend>, который определяет для него заголовок.

Атрибуты

disabled:
Указывает, что группа взаимосвязанных элементов формы должна быть отключена. Это можно использовать в случае, когда форма должна стать активной при выполнение определенных условий (например, при выборе флажка и тд.), сделать кнопку активной можно будет с помощью JavaScript. Пример » Значения для логического атрибута disabled можно задавать следующими способами:
<fieldset disabled>
<fieldset disabled="disabled">
<fieldset disabled="">

Примечание: атрибут disabled не поддерживается в браузерах IE и Safari.

form:
Указывает один или несколько идентификаторов форм, разделенных пробелами, которым принадлежит набор связанных элементов.
<!DOCTYPE html>
<html>
<body>

  <form action="demo_form.asp" method="get" id="form1">
    Какой ваш любимый цвет? <input type="text" name="fav_color"><br>
    <input type="submit">
  </form>

  <p>Элемент fieldset находится вне формы, но является ее частью.</p>

  <fieldset form="form1">
    <legend>Личные данные:</legend>
    Имя: <input type="text" name="username"/><br>
    Email: <input type="text" name="usermail"><br>
  </fieldset>

</body>
</html>

Примечание: атрибут form работает только в браузере Opera.

name:
Указывает имя для группы элементов, объединенных с помощью <fieldset>. Имена обычно используются в JavaScript для ссылок на элементы или для ссылки на данные формы после ее отправки. Пример »

Примечание: атрибут name не поддерживается в IE.

Тег <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 (зависит от браузера);
}  

Пример

<form>
  <fieldset>
    <legend>Персональные данные:</legend>
    Имя: <input type="text"><br>
    mail: <input type="text"><br>
    Дата рождения: <input type="text">
  </fieldset>
</form> 

Результат данного примера в окне браузера:

Пример использования тега <fieldset>
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011-2018 © puzzleweb.ru

Реклама на сайте | puzinfo@puzzleweb.ru