Html table with fieldset

Объединяет контролы формы группы.

Время чтения: меньше 5 мин

Обновлено 20 декабря 2021

Кратко

Скопировать ссылку «Кратко» Скопировано

Пример

Скопировать ссылку «Пример» Скопировано

    Прозвище Дракса из «Стражей Галактики»?   Уничтожитель    Разрушитель    Обвинитель    Сладкоежка    form> fieldset> legend>Прозвище Дракса из «Стражей Галактики»?legend> label> input type="radio" name="answer" value="Exterminator"> Уничтожитель label> label> input type="radio" name="answer" value="Destroyer"> Разрушитель label> label> input type="radio" name="answer" value="Accuser"> Обвинитель label> label> input type="radio" name="answer" value="Sweet-tooth"> Сладкоежка label> fieldset> form>

Как понять

Скопировать ссылку «Как понять» Скопировано

В сложных формах количество контролов может устрашающе перегружать интерфейс, и правильным решением в этом случае будет группировка смысловых элементов.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

 … fieldset>…fieldset>

Для добавления подписи внутри следует использовать :

   Заголовок для группы …  fieldset> legend>Заголовок для группыlegend> … fieldset>

Атрибуты

Скопировать ссылку «Атрибуты» Скопировано

disabled — блокирует все контролы внутри тега (как будто каждому из них указали этот атрибут — очень удобно);
form — связывает контролы внутри тега с формой (будто они располагаются внутри) — для этого в значении атрибута следует указать ID формы;
также для доступны все глобальные атрибуты.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

Самое удобное в использовании — возможность заблокировать все вложенные контролы внутри тега одним атрибутом disabled :

На практике

Скопировать ссылку «На практике» Скопировано

Realetive советует

Скопировать ссылку «Realetive советует» Скопировано

🛠 Чтобы убрать (или стилизовать рамку), используется семейство CSS-свойств border: border , border — radius и другие:

Источник

: The Field Set element

The HTML element is used to group several controls as well as labels ( ) within a web form.

Try it

Attributes

This element includes the global attributes.

The name associated with the group.

Note: The caption for the fieldset is given by the first element nested inside it.

Styling with CSS

There are several special styling considerations for .

Its display value is block by default, and it establishes a block formatting context. If the is styled with an inline-level display value, it will behave as inline-block , otherwise it will behave as block . By default there is a 2px groove border surrounding the contents, and a small amount of default padding. The element has min-inline-size: min-content by default.

There will be an anonymous box holding the contents of the , which inherits certain properties from the . If the is styled with display: grid or display: inline-grid , then the anonymous box will be a grid formatting context. If the is styled with display: flex or display: inline-flex , then the anonymous box will be a flex formatting context. Otherwise, it establishes a block formatting context.

You can feel free to style the and in any way you want to suit your page design.

Examples

Simple fieldset

This example shows a really simple example, with a , and a single control inside it.

form action="#"> fieldset> legend>Do you agree?legend> input type="checkbox" id="chbx" name="agree" value="Yes!" /> label for="chbx">I agreelabel> fieldset> form>

Result

Disabled fieldset

This example shows a disabled with two controls inside it. Note how both the controls are disabled due to being inside a disabled .

form action="#"> fieldset disabled> legend>Disabled login fieldsetlegend> div> label for="name">Name: label> input type="text" id="name" value="Chris" /> div> div> label for="pwd">Archetype: label> input type="password" id="pwd" value="Wookie" /> div> fieldset> form>

Result

Technical summary

Content categories	Flow content, sectioning root, listed, form-associated element, palpable content.
Permitted content	An optional element, followed by flow content.
Tag omission	None, both the starting and ending tag are mandatory.
Permitted parents	Any element that accepts flow content.
Implicit ARIA role	group
Permitted ARIA roles	radiogroup , presentation , none
DOM interface	HTMLFieldSetElement

Specifications

Browser compatibility

BCD tables only load in the browser

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

HTML Tag

The tag is used to group related elements in a form.

The tag draws a box around the related elements.

Tips and Notes

Browser Support

Attributes

Attribute	Value	Description
disabled	disabled	Specifies that a group of related form elements should be disabled
form	form_id	Specifies which form the fieldset belongs to
name	text	Specifies a name for the fieldset

Global Attributes

Event Attributes

More Examples

Example

legend background-color: gray;
color: white;
padding: 5px 10px;
>

Default CSS Settings

Most browsers will display the element with the following default values:

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);
>

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Modifying Table Columns

Modifying Table Cell Content .absoluteWrap .relativeWrap .total var Ver4 = parseInt(navigator.appVersion) == 4 var Ver4Up = parseInt(navigator.appVersion) >= 4 var Nav4 = ((navigator.appName == «Netscape») && Ver4) var modifiable // calculate and display a row»s total function showTotal(qtyList)

var qty = qtyList.options[qtyList.selectedIndex].value var prodID = qtyList.name var total = "US$" + (qty * parseFloat(qtyList.form.elements[prodID + "Price"].value)) var newCellHTML total">" + total + "" if(Nav4) < document.layers[prodID + "TotalWrapper"].document.layers[prodID + "Total"].document.write(newCellHTML) document.layers[prodID + "TotalWrapper"].document.layers[prodID + "Total"].document.close() >else if (modifiable) < if (document.all) < document.all(prodID + "Total").innerHTML = newCellHTML >else < document.getElementById(prodID + "Total").innerHTML = newCellHTML >>

> // initialize global flag for browsers capable of modifiable content function init()

modifiable = (Ver4Up && document.body && document.body.innerHTML)

> // display content for all products (e.g., in case of Back navigation) function showAllTotals(form)

Modifying Table Cell Content

placeHolder += " " document.write("") document.write(" ") document.write("" + placeHolder + "") > else < document.write("" +

Specify frames of a table

document.getElementById("myTable").frame="above"

document.getElementById("myTable").frame="below"

Specify rules for a table

document.getElementById("myTable").rules="rows"

document.getElementById("myTable").rules="cols"

d	d
d	d
Row3 cell1	Row3 cell2
Row4 cell1	Row4 cell2
Row5 cell1	Row5 cell2

Tabular data in Javascript with hyper link

> function sortByWinScore(a, b)

return b.winScore - a.winScore;

> function sortByLosScore(a, b)

return b.losScore - a.losScore;

a = a.winner.toLowerCase(); b = b.winner.toLowerCase(); return ((a < b) ? -1 : ((a >b) ? 1 : 0));

a = a.loser.toLowerCase(); b = b.loser.toLowerCase(); return ((a < b) ? -1 : ((a >b) ? 1 : 0));

> // Sorting function dispatcher (invoked by table column links) function sortTable(link)

switch (link.firstChild.nodeValue) < case "Year" : jsData.sort(sortByYear); break; case "Winner" : jsData.sort(sortByWinner); break; case "Loser" : jsData.sort(sortByLoser); break; case "Win" : jsData.sort(sortByWinScore); break; case "Lose" : jsData.sort(sortByLosScore); break; >drawTable("bowlData")

> // Remove existing table rows function clearTable(tbody)

> // Draw table from «jsData» array of objects function drawTable(tbody)
var tr, td; tbody = document.getElementById(tbody); // remove existing rows, if any clearTable(tbody); // loop through data source for (var i = 0; i

Super Bowl Games

Transforming JavaScript Data into HTML Tables

loser:"Czechoslovakia", losScore:1>;

// Draw table from «jsData» array of objects function drawTable(tbody)
var tr, td; tbody = document.getElementById(tbody); // loop through data source for (var i = 0; i

Transforming JavaScript Data into HTML Tables

Transforming JavaScript Data into HTML Tables with HyperLink

margin-left:15%; margin-right:15%; border:3px groove darkred; padding:15px>

loser:"Czechoslovakia", losScore:1>;

// Draw table from «jsData» array of objects function drawTable(tbody)
var tr, td; tbody = document.getElementById(tbody); // remove existing rows, if any clearTable(tbody); // loop through data source for (var i = 0; i

> // Remove existing table rows function clearTable(tbody)

> // Sorting function dispatcher (invoked by table column links) function sortTable(link)

switch (link.firstChild.nodeValue) < case "Year" : jsData.sort(sortByYear); break; case "Host Country" : jsData.sort(sortByHost); break; case "Winner" : jsData.sort(sortByWinner); break; case "Loser" : jsData.sort(sortByLoser); break; case "Win" : jsData.sort(sortByWinScore); break; case "Lose" : jsData.sort(sortByLosScore); break; >drawTable("matchData") return false

> // Sorting functions (invoked by sortTable()) function sortByYear(a, b)

a = a.location.toLowerCase(); b = b.location.toLowerCase(); return ((a < b) ? -1 : ((a >b) ? 1 : 0));

> function sortByWinScore(a, b)

return b.winScore - a.winScore;

> function sortByLosScore(a, b)

return b.losScore - a.losScore;

a = a.winner.toLowerCase(); b = b.winner.toLowerCase(); return ((a < b) ? -1 : ((a >b) ? 1 : 0));

a = a.loser.toLowerCase(); b = b.loser.toLowerCase(); return ((a < b) ? -1 : ((a >b) ? 1 : 0));

Transforming JavaScript Data into HTML Tables

Using the cloneNode Method

Row 1, Cell 1	Row 1, Cell 2
Row 2, Cell 1	Row 2, Cell 2
Row 3, Cell 1	Row 3, Cell 2
Row 4, Cell 1	Row 4, Cell 2
Row 5, Cell 1	Row 5, Cell 2

Using the Data Binding record Number Property

Data Binding (recordNumber) .filmTitle // set recordset pointer to the record clicked on in the table. function setRecNum(row)

document.oscars.recordset.AbsolutePosition = row.recordNumber

Academy Awards 1978-1997 (Click on a table row to extract data from one record.)

The award for Best Actor of went to for his outstanding achievement in the film .

Using the offsetParent Property

var cElement = document.all.myCell // Set flag for whether calculations should use // client- or offset- property measures. Use // client- for IE5/Mac and IE4/Windows; otherwise // use offset- properties. An ugly, but necessary // workaround. var useClient = (cElement.offsetTop == 0) ? ((cElement.offsetParent.tagName == "TR") ? false : true) : false if (useClient) < var x = cElement.clientLeft var y = cElement.clientTop >else < var x = cElement.offsetLeft var y = cElement.offsetTop >var pElement = document.all.myCell.offsetParent while (pElement != document.body) < if (useClient) < x += pElement.clientLeft y += pElement.clientTop >else < x += pElement.offsetLeft y += pElement.offsetTop >pElement = pElement.offsetParent > document.all.myDIV.style.pixelLeft = x document.all.myDIV.style.pixelTop = y document.all.myDIV.style.visibility = "visible"

The offsetParent Property

After the document loads, the script positions a small image in the upper left corner of the second table cell.

This is the first cell

This is the second cell.

Источник

Читайте также: How to set locale java

Html table with fieldset