diff options
Diffstat (limited to 'files/ca/learn/forms/index.html')
| -rw-r--r-- | files/ca/learn/forms/index.html | 357 |
1 files changed, 0 insertions, 357 deletions
diff --git a/files/ca/learn/forms/index.html b/files/ca/learn/forms/index.html deleted file mode 100644 index 964d71c754..0000000000 --- a/files/ca/learn/forms/index.html +++ /dev/null @@ -1,357 +0,0 @@ ---- -title: HTML forms guide -slug: Learn/Forms -tags: - - Featured - - Formularis - - Guía - - HTML - - Web -translation_of: Learn/Forms -original_slug: Learn/HTML/Forms ---- -<p>Aquesta guia és una sèrie d'articles que l'ajudaran a dominar els formularis HTML. Els formularis HTML són una eina molt potent per interactuar amb els usuaris; No obstant això, per raons històriques i tècniques, no sempre és obvi com usar-los al seu màxim potencial. En aquesta guia, anem a cobrir tots els aspectes dels formularis HTML, des de donar estil a l'estructura, des de la manipulació de dades amb components personalitzats. Aprendràs a gaudir de la gran potència que ofereixen!</p> - -<h2 id="Articles">Articles</h2> - -<ol> - <li><a href="https://developer.mozilla.org/en-US/docs/HTML/Forms/My_first_HTML_form">El meu primer formulari HTML</a></li> - <li><a href="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form" title="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form"><span>Com estructurar un formulari HTML</span></a></li> - <li><a href="/en-US/docs/HTML/Forms/The_native_form_widgets" title="/en-US/docs/HTML/Forms/The_native_form_widgets"><span>Formularis widgets nadius</span></a></li> - <li>CSS amb formularis HTML - <ol> - <li><a href="/en-US/docs/HTML/Forms/Styling_HTML_forms" title="/en-US/docs/HTML/Forms/Styling_HTML_forms"><span>Estil en formularis HTML</span></a></li> - <li><a href="/en-US/docs/Web/Guide/HTML/Forms/Advanced_styling_for_HTML_forms" title="/en-US/docs/Advanced_styling_for_HTML_forms">Estils avançats en formularis HTML</a></li> - <li><a href="/en-US/docs/Property_compatibility_table_for_form_widgets" title="/en-US/docs/Property_compatibility_table_for_form_widgets">Taula de propietats compatibles per formularis widgets</a></li> - </ol> - </li> - <li><a href="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data"><span>Enviar <s>y recuperar</s> dades del formulari</span></a></li> - <li><a href="/en-US/docs/HTML/Forms/Data_form_validation" title="/en-US/docs/HTML/Forms/Data_form_validation">Validació de dades del formulari</a></li> - <li><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">Contruir formularis <span>widgets personalitzats</span></a></li> - <li><a href="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript" title="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript">Enviament de formularis amb JavaScript</a> - <ol> - <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects">Utilitzant l'objecte FormData</a></li> - </ol> - </li> - <li><a href="/en-US/docs/HTML/Forms/HTML_forms_in_legacy_browsers" title="/en-US/docs/HTML/Forms/HTML_forms_in_legacy_browsers">Formularis HTML en navegadors antics</a></li> -</ol> - -<h2 id="Documentació_HTML">Documentació HTML</h2> - -<h3 id="Elements_HTML">Elements HTML</h3> - -<table> - <thead> - <tr> - <th scope="col">Element</th> - <th scope="col"><span class="short_text" id="result_box" lang="ca"><span>Interfície</span> <span>DOM</span> <span>relacionat</span></span></th> - <th scope="col">Descripció</th> - </tr> - </thead> - <tbody> - <tr> - <td style="vertical-align: top;">{{HTMLElement("button")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLButtonElement")}}</td> - <td style="vertical-align: top;"><span class="short_text" id="result_box" lang="ca"><span>L'element</span> <code><span>button</span></code> <span>representa</span> <span>un botó que</span> <span>es premi</span><span>.</span></span></td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("datalist")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLDataListElement")}}</td> - <td style="vertical-align: top;">L'element <span style="font-family: courier new;">datalist</span> conté un conjunt d'elements {{ HTMLElement("option") }} que representen les opcions possibles per al valor d'altres elements de formulari.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("fieldset")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLFieldSetElement")}}</td> - <td style="vertical-align: top;">El <span style="font-family: courier new;">fieldset</span> s'utilitza per agrupar diversos elements formulari dins d'un formulari.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("form")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLFormElement")}}</td> - <td style="vertical-align: top;">L'element <code>form</code> representa una secció del document que conté l'element interactiu que permet a un usuari enviar informació a un servidor web.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("input")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLInputElement")}}</td> - <td style="vertical-align: top;">L'element <code>input</code> s'utilitza per crear controls interactius per als formularis.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("keygen")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLKeygenElement")}}</td> - <td style="vertical-align: top;">L'element <code>keygen</code> existeix per facilitar la generació de material clau, i l'enviament de la clau pública com a part d'un formulari HTML</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("label")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLLabelElement")}}</td> - <td style="vertical-align: top;">L'element <code>label</code> representa un títol d'un article en una interfície d'usuari</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("legend")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLLegendElement")}}</td> - <td style="vertical-align: top;">L'element <code>legend </code>representa una llegenda per al contingut del seu pare {{ HTMLElement("fieldset") }}.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("meter")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLMeterElement")}}</td> - <td style="vertical-align: top;">L'element <code>metre</code> representa o bé un valor escalar dins d'un rang conegut o un valor fraccionari.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("optgroup")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLOptGroupElement")}}</td> - <td style="vertical-align: top;">l'element <code>optgroup</code> crea un grup d'opcions dins d'un element {{ HTMLElement("select") }} element.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("option")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLOptionElement")}}</td> - <td style="vertical-align: top;">l'element HTML <code>option</code> s'utilitza per crear un control que representa un element dins d'un element {{ HTMLElement("select") }}, o un {{ HTMLElement("optgroup") }} o un {{ HTMLElement("datalist") }}.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("output")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLOutputElement")}}</td> - <td style="vertical-align: top;">L'element <code>output </code>representa el resultat d'un càlcul.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("progress")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLProgressElement")}}</td> - <td style="vertical-align: top;">L'element <code>progress </code>s'utilitza per veure el progrés de la finalització d'una tasca.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("select")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLSelectElement")}}</td> - <td style="vertical-align: top;">L'element <code>select</code> representa un control que presenta un menú d'opcions.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("textarea")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLTextAreaElement")}}</td> - <td style="vertical-align: top;">L'element <code>textarea</code> representa un control d'edició de text pla multilínia.</td> - </tr> - </tbody> -</table> - -<div class="note"> -<p><strong>Nota:</strong> Tots els elements formulari, com tots els elements d'HTML, suportan la interfície DOM {{domxref("HTMLElement")}}.</p> -</div> - -<h3 id="Atributs_HTML">Atributs HTML</h3> - -<table class="standard-table"> - <thead> - <tr> - <th>Nom Atribut</th> - <th>Elements</th> - <th>Descripció</th> - </tr> - </thead> - <tbody> - <tr> - <td>accept</td> - <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> - <td>Llista de tipus que accepta el servidor, normalment un tipus de fitxer.</td> - </tr> - <tr> - <td style="white-space: nowrap;">accept-charset</td> - <td>{{ HTMLElement("form") }}</td> - <td>Llista de jocs de caràcters suportats.</td> - </tr> - <tr> - <td>action</td> - <td>{{ HTMLElement("form") }}</td> - <td>L'URI d'un programa que processa la informació presentada a través del formulari.</td> - </tr> - <tr> - <td>autocomplete</td> - <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> - <td>Indica si els controls d'aquest formulari poden tenir per defecte els seus valors emplenats automàticament pel navegador.</td> - </tr> - <tr> - <td>autofocus</td> - <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> - <td>L'element ha de tenir el focus automàticament després de carregar la pàgina.</td> - </tr> - </tbody> - <tbody> - <tr> - <td>challenge</td> - <td>{{ HTMLElement("keygen") }}</td> - <td>Una cadena proposada que es presenta juntament amb la clau pública.</td> - </tr> - <tr> - <td>checked</td> - <td>{{ HTMLElement("input") }}</td> - <td>Indica si l'element s'ha de comprovar en carregar la pàgina.</td> - </tr> - <tr> - <td>cols</td> - <td>{{ HTMLElement("textarea") }}</td> - <td><span id="result_box" lang="ca"><span>Defineix</span> <span>el nombre</span> <span>de columnes</span> <span>en una àrea</span> <span>de text.</span></span></td> - </tr> - <tr> - <td>data</td> - <td>{{ HTMLElement("object") }}</td> - <td><span id="result_box" lang="ca"><span>Especifica</span> <span>l'adreça URL</span> <span>del recurs.</span></span></td> - </tr> - <tr> - <td>dirname</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> - <td> </td> - </tr> - <tr> - <td>disabled</td> - <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> - <td><span id="result_box" lang="ca"><span>Indica</span> <span>si l'usuari</span> <span>pot interactuar</span> <span>amb l'element</span><span>.</span></span></td> - </tr> - <tr> - <td>enctype</td> - <td>{{ HTMLElement("form") }}</td> - <td><span id="result_box" lang="ca"><span>Defineix</span> <span>el tipus</span> <span>de contingut</span> <span>de les dades del</span> <span>formulari</span> <span>quan</span> <span>el mètode és</span> <span>POST</span><span>.</span></span></td> - </tr> - <tr> - <td>for</td> - <td>{{ HTMLElement("label") }}, {{ HTMLElement("output") }}</td> - <td><span id="result_box" lang="ca"><span>Descriu</span> <span>els</span> <span>elements que</span> <span>pertanyen</span> <span>a aquest.</span></span></td> - </tr> - <tr> - <td>form</td> - <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> - <td>Indica el formulari que és el propietari de l'element.</td> - </tr> - </tbody> - <tbody> - <tr> - <td>high</td> - <td>{{ HTMLElement("meter") }}</td> - <td>Indica el límit inferior del rang superior.</td> - </tr> - <tr> - <td>keytype</td> - <td>{{ HTMLElement("keygen") }}</td> - <td>Especifica el tipus de clau generada.</td> - </tr> - <tr> - <td>list</td> - <td>{{ HTMLElement("input") }}</td> - <td>Identifica una llista d'opcions predefinides per suggerir a l'usuari.</td> - </tr> - <tr> - <td>low</td> - <td>{{ HTMLElement("meter") }}</td> - <td>Indica el límit superior del rang inferior.</td> - </tr> - <tr> - <td>max</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td> - <td>Indica el valor màxim permès.</td> - </tr> - <tr> - <td>maxlength</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> - <td><span id="result_box" lang="ca"><span>Defineix</span> <span>el nombre</span> <span>màxim</span> <span>de caràcters</span> <span>permesos en</span> <span>l'element</span><span>.</span></span></td> - </tr> - <tr> - <td>method</td> - <td>{{ HTMLElement("form") }}</td> - <td><span id="result_box" lang="ca"><span>Defineix</span> <span>quin mètode</span> <span>HTTP</span> <span>a utilitzar al</span> <span>enviar el formulari.</span> <span>Pot ser</span> <span>GET</span> <span>(</span><span>per defecte</span><span>)</span> <span>o</span> <span>POST</span><span>.</span></span></td> - </tr> - <tr> - <td>min</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}</td> - <td><span id="result_box" lang="ca"><span>Indica</span> <span>el valor mínim</span> <span>permès.</span></span></td> - </tr> - <tr> - <td>multiple</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> - <td>Indica si diversos valors es poden introduir en una entrada del <code>correu electrònic</code> o tipus <code>arxiu</code>.</td> - </tr> - <tr> - <td>name</td> - <td>{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> - <td>Nom de l'element. Per exemple el usat en el servidor per identificar els camps de formulari enviat.</td> - </tr> - <tr> - <td>novalidate</td> - <td>{{ HTMLElement("form") }}</td> - <td>Aquest atribut indica que el formulari no ha de ser validat quan sigui enviat.</td> - </tr> - <tr> - <td>optimum</td> - <td>{{ HTMLElement("meter") }}</td> - <td>Indica el valor numèric òptim.</td> - </tr> - <tr> - <td>pattern</td> - <td>{{ HTMLElement("input") }}</td> - <td>Defineix una expressió regular que es validarà el valor de l'element en contra.</td> - </tr> - <tr> - <td>placeholder</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> - <td>Proporciona un suggeriment a l'usuari de què es poden introduir en el camp.</td> - </tr> - <tr> - <td>readonly</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> - <td><span id="result_box" lang="ca"><span>Indica si l'</span><span>element pot ser</span> <span>editat</span> <span>o</span> <span>no.</span></span></td> - </tr> - <tr> - <td>required</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> - <td><span id="result_box" lang="ca"><span>Indica</span> <span>si es</span> <span>requereix aquest</span> <span>element</span> <span>per omplir o</span> <span>no.</span></span></td> - </tr> - <tr> - <td>rows</td> - <td>{{ HTMLElement("textarea") }}</td> - <td><span id="result_box" lang="ca"><span>Defineix</span> <span>el nombre</span> <span>de files</span> <span>en una àrea</span> <span>de text.</span></span></td> - </tr> - <tr> - <td>selected</td> - <td>{{ HTMLElement("option") }}</td> - <td><span id="result_box" lang="ca"><span>Defineix un</span> <span>valor que serà</span> <span>seleccionat</span> <span>en carregar la pàgina</span><span>.</span></span></td> - </tr> - <tr> - <td>size</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> - <td>Defineix l'amplada de l'element (en píxels). Si el atribut <code>type</code> de l'element és <code>text</code> o <code>contrasenya</code>, llavors és el nombre de caràcters.</td> - </tr> - <tr> - <td>src</td> - <td>{{ HTMLElement("img") }}</td> - <td>La URL del contingut integrable.</td> - </tr> - <tr> - <td>step</td> - <td>{{ HTMLElement("input") }}</td> - <td> </td> - </tr> - <tr> - <td>target</td> - <td>{{ HTMLElement("form") }}</td> - <td> </td> - </tr> - <tr> - <td>type</td> - <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}</td> - <td>Defineix el tipus d'element.</td> - </tr> - <tr> - <td>usemap</td> - <td>{{ HTMLElement("img") }}</td> - <td> </td> - </tr> - <tr> - <td>value</td> - <td>{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td> - <td>Defineix un valor predeterminat que es mostrarà en l'element en la càrrega de la pàgina.</td> - </tr> - <tr> - <td>wrap</td> - <td>{{ HTMLElement("textarea") }}</td> - <td>Indica si el text ha de ser embolicat o no.</td> - </tr> - </tbody> -</table> - -<h3 id="Referència_normativa">Referència normativa</h3> - -<ul> - <li><a href="https://www.w3.org/TR/html51/sec-forms.html#sec-forms" lang="en" rel="external" title="https://www.w3.org/TR/html51/sec-forms.html#sec-forms">W3C HTML 5.1 Especificacions (Formularis)</a></li> - <li><a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#forms" rel="external" title="https://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#forms">WHATWG HTML Temps de vida dels (Formularis)</a></li> -</ul> |