Набор авторов в комманду!!!




Пожертвовать на развитие сайта. Пожертвовать

Элемент fieldset в html 5

Главная » Справочники » Справочник HTML5 » Элемент fieldset в html 5
Элемент fieldset в HTML5 объединяет элементы в группы.
embed
fieldset

Отображение элемента fieldset в HTML 5

Правильное отображение в chrome Отображение в вашем браузере
Заказать обед Суп.
Картофель вареный.
Котлета.
Чай.
Компот.
Булочка.
Бутерброд с колбасой.

Имя:

Почта:

Описание элемента fieldset в HTML5

Элемент fieldset группирует элементы формы. Что оказывается визуально удобным при их большом числе.

Отличие элемента fieldset HTML4.1 от HTML5

Элемент fieldset приобрел аттрибуты disabled, form, name.

Атрибуты элемента fieldset в HTML5

Атрибут Описание
disabled

Атрибут disabled закрывает доступ ко всем элементам внутри группы.

Пример кода: 
<form>
	<fieldset disabled>
		<legend>Заказать обед</legend>
		<input type="checkbox">Суп.<br>
		<input type="checkbox">Картофель вареный.<br>
		<input type="checkbox">Котлета.<br>
		<input type="checkbox">Чай.<br>
		<input type="checkbox">Компот.<br>
		<input type="checkbox">Булочка.<br>
		<input type="checkbox">Бутерброд с колбасой.<br>
		<p>Имя: <input type="text"></p>
		<p>Почта: <input type="text"></p>
		<p><input type="submit"></p>
	</fieldset>
</form>
Пример отображения в Firefox Отображение в Вашем браузере
Заказать обед Суп.
Картофель вареный.
Котлета.
Чай.
Компот.
Булочка.
Бутерброд с колбасой.

Имя:

Почта:

form

Атрибут form создает связь между группой fieldset и формой. Применяется когда элементы формы расположены вне своей группы. На отображение не влияет.

Пример кода: 
Начало формы
<form id="eat">
	<button>Кнопка</button>
</form> 
Завершение формы
<fieldset form="eat">
	<legend>Заказать обед</legend>
	<input type="checkbox">Суп.<br>
	<input type="checkbox">Картофель вареный.<br>
	<input type="checkbox">Котлета.<br>
	<input type="checkbox">Чай.<br>
	<input type="checkbox">Компот.<br>
	<input type="checkbox">Булочка.<br>
	<input type="checkbox">Бутерброд с колбасой.<br>
	<p>Имя: <input type="text"></p>
	<p>Почта: <input type="text"></p>
	<p><input type="submit"></p>
</fieldset>
Отображение в Вашем браузере
Начало формы
Завершение формы
Заказать обед Суп.
Картофель вареный.
Котлета.
Чай.
Компот.
Булочка.
Бутерброд с колбасой.

Имя:

Почта:

name

Атрибут name назначает группе fieldset имя. На отображение не влияет.

Пример кода: 
<form>
	<fieldset name="lunch">
		<legend>Заказать обед</legend>
		<input type="checkbox">Суп.<br>
		<input type="checkbox">Картофель вареный.<br>
		<input type="checkbox">Котлета.<br>
		<input type="checkbox">Чай.<br>
		<input type="checkbox">Компот.<br>
		<input type="checkbox">Булочка.<br>
		<input type="checkbox">Бутерброд с колбасой.<br>
		<p>Имя: <input type="text"></p>
		<p>Почта: <input type="text"></p>
		<p><input type="submit"></p>
	</fieldset>
</form>
embed