diff options
Diffstat (limited to 'files/ca/web/html/element/fieldset/index.html')
| -rw-r--r-- | files/ca/web/html/element/fieldset/index.html | 414 |
1 files changed, 0 insertions, 414 deletions
diff --git a/files/ca/web/html/element/fieldset/index.html b/files/ca/web/html/element/fieldset/index.html deleted file mode 100644 index d9e30d9974..0000000000 --- a/files/ca/web/html/element/fieldset/index.html +++ /dev/null @@ -1,414 +0,0 @@ ---- -title: <fieldset> -slug: Web/HTML/Element/fieldset -tags: - - Element - - Forms - - HTML - - HTML forms - - Intermediate - - Reference - - Web -translation_of: Web/HTML/Element/fieldset ---- -<div>{{HTMLRef}}</div> - -<p><span id="result_box" lang="ca"><span class="alt-edited">L'<strong>element HTML <code><fieldset></code></strong> s'utilitza per agrupar diversos controls així com etiquetes ({{HTMLElement("label")}}) dins d'un formulari web.</span></span></p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Categories de contingut</a></th> - <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Contingut dinàmic</a>, <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document#sectioning_root">secció arrel</a>, <a href="/en-US/docs/HTML/Content_categories#form_listed">llistat</a>, element <a href="/en-US/docs/HTML/Content_categories#form-associated_content">associat a formulari </a> , contingut palpable.</td> - </tr> - <tr> - <th scope="row">Contingut permès</th> - <td>Un element {{HTMLElement("legend")}} opcional, seguit de contingut dinàmic.</td> - </tr> - <tr> - <th scope="row">Omissió de l'etiqueta</th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row">Elements pares permesos</th> - <td>Qualsevol element que accepti <a href="/en-US/docs/HTML/Content_categories#Flow_content">Contingut dinàmic</a>.</td> - </tr> - <tr> - <th scope="row">Interfície DOM</th> - <td>{{domxref("HTMLFieldSetElement")}}</td> - </tr> - </tbody> -</table> - -<div class="note"> -<p><strong>Nota:</strong> a diferència de gairebé qualsevol altre element, l'especificació de representació WHATWG HTML suggereix <code>{{cssxref("min-width")}}: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/width#Values">min-content</a></code> com a part de l'estil predeterminat per a {{HTMLElement("fieldset")}}, molts navegadors implementan aquest estil (o alguna cosa aproximada).</p> -</div> - -<h2 id="Atributs">Atributs</h2> - -<p>Aquest element inclou els <a href="/en-US/docs/HTML/Global_attributes">atributs globals</a>.</p> - -<dl> - <dt>{{htmlattrdef("disabled")}} {{HTMLVersionInline(5)}}</dt> - <dd>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</dd> - <dt>{{htmlattrdef("form")}} {{HTMLVersionInline(5)}}</dt> - <dd>Aquest atribut té el valor de l'atribut <strong>id</strong> de l'element {{HTMLElement("form")}} que està relacionat amb. El seu valor per defecte és l'<strong>id</strong> de l'element {{HTMLElement("form")}} més proper, que és un descendent de.</dd> - <dt>{{htmlattrdef("name")}} {{HTMLVersionInline(5)}}</dt> - <dd><span id="result_box" lang="ca"><span>El nom</span> <span>associat</span> <span>amb</span> <span>el grup.</span></span> - <div class="note">L'etiqueta per al conjunt del camp ve donada pel primer element {{HTMLElement("legend")}} que és un fill d'aquest conjunt de camp.</div> - </dd> -</dl> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="Exemple_1_Formulari_amb_fieldset_legend_i_label">Exemple #1: Formulari amb fieldset, legend i label</h3> - -<pre class="brush: html"><form action="test.php" method="post"> - <fieldset> - <legend>Title</legend> - <input type="radio" id="radio"> <label for="radio">Click me</label> - </fieldset> -</form></pre> - -<h3 id="Exemple_2_Simulant_un_editable_HTMLElement(select)_a_través_d'un_fieldset_radioboxes_i_textboxes*">Exemple #2: Simulant un editable {{HTMLElement("select")}} a través d'un <code>fieldset</code>, <a href="/en-US/docs/HTML/Element/Input">radioboxes</a> i <a href="/en-US/docs/HTML/Element/Input">textboxes</a>*</h3> - -<p>El següent exemple està fet amb pur HTML i CSS. No hi ha cap codi JavaScript.</p> - -<p><strong>S'adverteix</strong> 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.</p> - -<pre class="brush: html"><!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> -</pre> - -<p><a href="/files/4563/editable_select.html">Veure aquest exemple en acció</a></p> - -<h2 id="Especificacions">Especificacions</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificació</th> - <th scope="col">Estat</th> - <th scope="col">Comentari</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'forms.html#the-fieldset-element', '<fieldset>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Definició de l'element <code>fieldset</code></td> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'rendering.html#the-fieldset-and-legend-elements')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td><span id="result_box" lang="ca"><span>Suggerit la</span> <span>representació per</span> <span>defecte dels</span> <span>elements</span> <code><span>fieldset</span></code> <span>i</span> <code><span>legend</span></code></span></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'forms.html#the-fieldset-element', '<fieldset>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.10', '<fieldset>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td>Definició inicial</td> - </tr> - </tbody> -</table> - -<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Suport bàsic</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("1.0")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>atribut <code>disabled</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> - <td>12</td> - <td>6</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Suport bàsic</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("1.0")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>atribut <code>disabled</code></td> - <td>4.4</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>6.0</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] No tots els descendents del control de formulari d'un fieldset desactivat es desactiven correctament en IE11; veure <a href="https://connect.microsoft.com/IE/feedbackdetail/view/817488">IE bug 817488: <code>input[type="file"]</code> not disabled inside disabled <code>fieldset</code></a> i <a href="https://connect.microsoft.com/IE/feedbackdetail/view/962368/can-still-edit-input-type-text-within-fieldset-disabled">IE bug 962368: Can still edit <code>input[type="text"]</code> within <code>fieldset[disabled]</code></a>.</p> - -<h2 id="Errors">Errors</h2> - -<ul> - <li>{{Bug(504622)}} - Els fieldsets mai s'encongeixen per sota del seu ample <code>min-intrinsic</code></li> - <li><a href="https://bugs.webkit.org/show_bug.cgi?id=123507">WebKit bug 123507</a> - <code>min-width: {{cssxref("-webkit-min-content")}}</code> en fieldset</li> - <li><a href="http://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content">StackOverflow discussió amb solucions per als errors anteriors.</a></li> -</ul> - -<h2 id="Veure">Veure</h2> - -<ul> - <li><span class="short_text" id="result_box" lang="ca"><span>Altres</span> <span>elements</span> <span>relacionats</span> <span>amb</span> <span>formularis</span></span> : {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.</li> -</ul> |