From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/ca/web/html/element/fieldset/index.html | 414 ++++++++++++++++++++++++++ 1 file changed, 414 insertions(+) create mode 100644 files/ca/web/html/element/fieldset/index.html (limited to 'files/ca/web/html/element/fieldset/index.html') diff --git a/files/ca/web/html/element/fieldset/index.html b/files/ca/web/html/element/fieldset/index.html new file mode 100644 index 0000000000..d9e30d9974 --- /dev/null +++ b/files/ca/web/html/element/fieldset/index.html @@ -0,0 +1,414 @@ +--- +title:
+slug: Web/HTML/Element/fieldset +tags: + - Element + - Forms + - HTML + - HTML forms + - Intermediate + - Reference + - Web +translation_of: Web/HTML/Element/fieldset +--- +
{{HTMLRef}}
+ +

L'element HTML <fieldset> s'utilitza per agrupar diversos controls així com etiquetes ({{HTMLElement("label")}}) dins d'un formulari web.

+ + + + + + + + + + + + + + + + + + + + + + + + +
Categories de contingutContingut dinàmic, secció arrel, llistat, element associat a formulari   , contingut palpable.
Contingut permèsUn element {{HTMLElement("legend")}}  opcional, seguit de contingut dinàmic.
Omissió de l'etiqueta{{no_tag_omission}}
Elements pares permesosQualsevol element que accepti Contingut dinàmic.
Interfície DOM{{domxref("HTMLFieldSetElement")}}
+ +
+

Nota: a diferència de gairebé qualsevol altre element, l'especificació de representació WHATWG HTML suggereix {{cssxref("min-width")}}: min-content com a part de l'estil predeterminat per a {{HTMLElement("fieldset")}}, molts navegadors implementan aquest estil (o alguna cosa aproximada).

+
+ +

Atributs

+ +

Aquest element inclou els atributs globals.

+ +
+
{{htmlattrdef("disabled")}} {{HTMLVersionInline(5)}}
+
Si aquest atribut booleà està establert, els controls de formulari que són els seus descendents, amb excepció dels descendents del seu primer element opcional {{HTMLElement("legend")}}, estan desactivats, és a dir, no es poden editar. Ells no rebran cap event de navegació, com clics del ratolí o els relacionats amb el focus. Sovint els navegadors mostran aquests controls amb gris
+
{{htmlattrdef("form")}} {{HTMLVersionInline(5)}}
+
Aquest atribut té el valor de l'atribut id de l'element {{HTMLElement("form")}} que està relacionat amb. El seu valor per defecte és l'id de l'element {{HTMLElement("form")}} més proper, que és un descendent de.
+
{{htmlattrdef("name")}} {{HTMLVersionInline(5)}}
+
El nom associat amb el grup. +
L'etiqueta per al conjunt del camp ve donada pel primer element {{HTMLElement("legend")}} que és un fill d'aquest conjunt de camp.
+
+
+ +

Exemples

+ +

Exemple #1: Formulari amb fieldset, legend i label

+ +
<form action="test.php" method="post">
+  <fieldset>
+    <legend>Title</legend>
+    <input type="radio" id="radio"> <label for="radio">Click me</label>
+  </fieldset>
+</form>
+ +

Exemple #2: Simulant un editable {{HTMLElement("select")}} a través d'un fieldset, radioboxes i textboxes*

+ +

El següent exemple està fet amb pur HTML i CSS. No hi ha cap codi JavaScript.

+ +

S'adverteix que els lectors de pantalles i dispositius d'assistència no interpretaran correctament el següent formulari; aquest exemple seria HTML vàlid si s'utilitzessin els elements correctes.

+ +
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>Editable [pseudo]select</title>
+<style type="text/css">
+
+/* Generic form fields */
+
+fieldset.elist, input[type="text"], textarea, select, option, fieldset.elist ul, fieldset.elist > legend, fieldset.elist input[type="text"], fieldset.elist > legend:after {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+input[type="text"] {
+  padding: 0 20px;
+}
+
+textarea {
+  width: 500px;
+  height: 200px;
+  padding: 20px;
+}
+
+textarea, input[type="text"], fieldset.elist ul, select, fieldset.elist > legend {
+  border: 2px #cccccc solid;
+  border-radius: 10px;
+}
+
+input[type="text"], fieldset.elist, select, fieldset.elist > legend {
+  height: 32px;
+  font-family: Tahoma;
+  font-size: 14px;
+}
+
+input[type="text"]:hover, textarea:hover, select:hover, fieldset.elist:hover > legend {
+  background-color: #ddddff;
+}
+
+select {
+  padding: 4px 20px;
+}
+
+option {
+  height: 30px;
+  padding: 5px 4px;
+}
+
+option:not(:checked), textarea:focus {
+  background-color: #ffcccc;
+}
+
+fieldset.elist > legend:after, fieldset.elist label {
+  height: 28px;
+}
+
+input[type="text"], fieldset.elist {
+  width: 316px;
+}
+
+input[type="text"]:focus {
+  background: #ffcccc url("data:image/gif;base64,R0lGODlhEAAQANU5APnoxuvr6+uxPdvb2+rq6ri4uO7qxunp6dPT06SHV+/rx8vLy+nezLO0sbe3t9Ksas+qaaCEV8rKyp2dnf39/QAAAK6ursifZHFxcc/Qzu3mxYyMjExCJnV1dc6maO7u7o+Pj2tXNoaGhtfDpKCDVu3lxM+tcaKEV9bW1qOFVWNjY8KrisTExNra2nBbObGxsby8vO/mu7Kyso9ZAuzs7MSgAIiKhf///8zMzP///wAAAAAAAAAAAAAAAAAAAAAAACH5BAEAADkALAAAAAAQABAAAAaXwJxwSCwOYzWkMpkkZmoAqDQaJdpqAqw2m53NRjlboAarFczomcE0C99o8DgNMVM8Tm3bbYDr9x11DwkzDG5yc2oQJIRCenx/MxoeETM2Q3pxATMlF4MYlo17OAsdLispMyAioIY0BzMcITMTKBasjgssFTMqGxItMjYUoTQBBAQHxgE0wZcfMtDRMi/QrA022NnaNg1CQQA7") no-repeat 2px center !important;
+}
+
+input[type="text"]:focus, textarea:focus, select:focus, fieldset.elist > legend {
+  border: 2px #ccaaaa solid;
+}
+
+fieldset {
+  border: 2px #af3333 solid;
+  border-radius: 10px;
+}
+
+/* Editable [pseudo]select (i.e. fieldsets with [class=elist]) */
+
+fieldset.elist {
+  display: inline-block;
+  position: relative;
+  vertical-align: middle;
+  overflow: visible;
+  padding: 0;
+  margin: 0;
+  border: none;
+}
+
+fieldset.elist ul {
+  position: absolute;
+  width: 100%;
+  max-height: 320px;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  background-color: transparent;
+}
+
+fieldset.elist:hover ul {
+  background-color: #ffffff;
+  border: 2px #af3333 solid;
+  left: 2px;
+  overflow: auto;
+}
+
+fieldset.elist ul > li {
+  list-style-type: none;
+  background-color: transparent;
+}
+
+fieldset.elist label {
+  display: none;
+  width: 100%;
+}
+
+fieldset.elist input[type="text"] {
+  width: 100%;
+  height: 30px;
+  line-height: 30px;
+  border: none;
+  background-color: transparent;
+  border-radius: 0;
+}
+
+fieldset.elist > legend {
+  display: block;
+  margin: 0;
+  padding: 0 0 0 5px;
+  position: absolute;
+  width: 100%;
+  cursor: default;
+  background-color: #ccffcc;
+  line-height: 30px;
+  font-style: italic;
+}
+
+fieldset.elist:hover > legend {
+  position: relative;
+  overflow: hidden;
+}
+
+fieldset.elist > legend:after {
+  width: 20px;
+  content: "\2335";
+  float: right;
+  text-align: center;
+  border-left: 2px #cccccc solid;
+  font-style: normal;
+  cursor: default;
+}
+
+fieldset.elist:hover > legend:after {
+  background-color: #99ff99;
+}
+
+fieldset.elist ul input[type="radio"] {
+  display: none;
+}
+
+fieldset.elist input[type="radio"]:checked ~ label {
+  display: block;
+  width: 292px;
+  background-color: #ffffff;
+}
+
+fieldset.elist:hover input[type="radio"]:checked ~ label {
+  width: 100%;
+}
+
+fieldset.elist:hover label {
+  display: block;
+  height: 100%;
+}
+
+fieldset.elist label:hover {
+  background-color: #3333ff !important;
+}
+
+fieldset.elist:hover input[type="radio"]:checked ~ label {
+  background-color: #aaaaaa;
+}
+
+</style>
+
+</head>
+<body>
+
+<form method="get" action="test.php">
+
+<fieldset>
+    <legend>Order a T-Shirt</legend>
+    <p>Write your name (simple textbox): <input type="text" /></p>
+    <p>Choose your size (simple select):
+    <select>
+        <option value="s">Small</option>
+        <option value="m">Medium</option>
+        <option value="l">Large</option>
+        <option value="xl">Extra Large</option>
+    </select></p>
+    <div>What address do you want to use? (editable pseudoselect)
+    <fieldset class="elist">
+        <legend>Address&hellip;</legend>
+        <ul>
+            <li><input type="radio" value="1" id="address-switch_1" checked /><label for="address-switch_1"><input type="text" value="19 Quaker Ridge Rd. Bethel CT 06801" /></label></li>
+            <li><input type="radio" value="2" id="address-switch_2" /><label for="address-switch_2"><input type="text" value="1000 Coney Island Ave. Brooklyn NY 11230" /></label></li>
+            <li><input type="radio" value="3" id="address-switch_3" /><label for="address-switch_3"><input type="text" value="2962 Dunedin Cv. Germantown TN 38138" /></label></li>
+            <li><input type="radio" value="4" id="address-switch_4" /><label for="address-switch_4"><input type="text" value="915 E 7th St. Apt 6L. Brooklyn NY 11230" /></label></li>
+        </ul>
+    </fieldset>
+    </div>
+    <p>Write a comment:<br />
+    <textarea></textarea></p>
+    <p><input type="reset" value="Reset" /> <input type="submit" value="Send!" /></p>
+</fieldset>
+
+</form>
+
+</body>
+</html>
+
+ +

Veure aquest exemple en acció

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('HTML WHATWG', 'forms.html#the-fieldset-element', '<fieldset>')}}{{Spec2('HTML WHATWG')}}Definició de l'element fieldset
{{SpecName('HTML WHATWG', 'rendering.html#the-fieldset-and-legend-elements')}}{{Spec2('HTML WHATWG')}}Suggerit la representació per defecte dels elements fieldset i legend
{{SpecName('HTML5 W3C', 'forms.html#the-fieldset-element', '<fieldset>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'interact/forms.html#h-17.10', '<fieldset>')}}{{Spec2('HTML4.01')}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
atribut disabled{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]126
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
atribut disabled4.4{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}6.0
+
+ +

[1] No tots els descendents del control de formulari d'un fieldset desactivat es desactiven correctament en IE11; veure IE bug 817488: input[type="file"] not disabled inside disabled fieldset i IE bug 962368: Can still edit input[type="text"] within fieldset[disabled].

+ +

Errors

+ + + +

Veure

+ + -- cgit v1.2.3-54-g00ecf