diff options
Diffstat (limited to 'files/es/web/html/elemento/form/index.html')
| -rw-r--r-- | files/es/web/html/elemento/form/index.html | 198 |
1 files changed, 198 insertions, 0 deletions
diff --git a/files/es/web/html/elemento/form/index.html b/files/es/web/html/elemento/form/index.html new file mode 100644 index 0000000000..d0ade4348c --- /dev/null +++ b/files/es/web/html/elemento/form/index.html @@ -0,0 +1,198 @@ +--- +title: form +slug: Web/HTML/Elemento/form +translation_of: Web/HTML/Element/form +--- +<h2 id="Resumen">Resumen</h2> +<p>El elemento HTML form (<code><form></code>) representa una sección de un documento que contiene controles interactivos que permiten a un usuario enviar información a un servidor web.</p> +<p>Es posible usar las pseudo-clasess de CSS <code><a href="/es/CSS/%3Avalid" rel="custom">:valid</a></code> e <code><a href="/es/CSS/%3Ainvalid" rel="custom">:invalid</a></code> para darle estilos a un elemento form.</p> +<h2 id="Contexto_de_uso">Contexto de uso</h2> +<table class="standard-table"> + <tbody> + <tr> + <td>Categorías de contenido</td> + <td><a href="/en/HTML/Content_categories#flow_content" title="/en/HTML/Content_categories#flow_content">Contenido dinámico</a></td> + </tr> + <tr> + <td>Contenido permitido</td> + <td><a href="/en/HTML/Content_categories#flow_content" title="/en/HTML/Content_categories#flow_content">Contenido dinámico</a>, pero sin contener elementos <code><form></code></td> + </tr> + <tr> + <td>Omisión de etiquetas</td> + <td>Ninguna, ambas, la etiqueta de apertura y cierre deben estar presentes</td> + </tr> + <tr> + <td>Normative document</td> + <td><a class="external" href="http://www.w3.org/TR/html5/forms.html#the-form-element" title="http://www.w3.org/TR/html5/forms.html#the-form-element">HTML5, section 4.10.3</a> (<a class="external" href="http://www.w3.org/TR/1999/REC-html401-19991224/interact/forms.html#h-17.3" title="http://www.w3.org/TR/1999/REC-html401-19991224/interact/forms.html#h-17.3">HTML4.01, section 17.3</a>)</td> + </tr> + </tbody> +</table> +<h2 id="Atributos">Atributos</h2> +<p>Como cualquier otro elemento HTML, este elemento soporta <a href="/en/HTML/Global_attributes" title="/en/HTML/Global_attributes">atributos globales</a></p> +<dl> + <dt> + {{ htmlattrdef("accept") }} {{ HTMLVersionInline(4) }} {{ obsolete_inline() }}</dt> + <dd> + Una lista separada por comas de los tipos de contenido que el servidor acepta.<br> + <div class="note"> + <p><strong>Nota de uso: </strong>este atributo ha sido removido en HTML5 y no debe ser usado. En su lugar, usar el atributo <strong><a href="/es/HTML/Element/Input#attr-accept" title="/en/HTML/Element/Input#attr-accept">accept</a></strong> del elemento específico {{ HTMLElement("input") }}.</p> + </div> + </dd> + <dt> + {{ htmlattrdef("accept-charset") }}</dt> + <dd> + Una lista de codificación de caracteres que el servidor acepta. La lista puede ser delimitada por espacios o comas. El navegador los usa en el orden en que cada uno son listados. Los valores por defecto es la cadena reservada "UNKNOWN", en tal caso la codificación corresponde a la codificación del documento conteniendo el elemento form.<br> + <p>HTML 4: En versiones anteriores de HTML, las diferentes codificaciones de caracteres pueden ser delimitadas por espacios o comas. Este no es más el caso en HTML5, donde sólo los espacios son correctos.</p> + </dd> + <dt> + {{ htmlattrdef("action") }}</dt> + <dd> + La URI de un programa que procesa la información enviada por medio del formulario. Este valor puede ser sobreescrito por un atributo {{ htmlattrxref("formaction", "button") }} en un {{ HTMLElement("button") }} o en el elemento{{ HTMLElement("input") }}.</dd> + <dt> + {{ htmlattrdef("autocomplete") }} {{ HTMLVersionInline(5) }}</dt> + <dd> + Indica cuales de los controles en este formulario puede tener sus valores automáticamente completados por el navegador. Esta configuración puede ser sobreescrita por un atributo <code>autocomplete</code> en un elemento que pertenezca al formulario: + <ul> + <li><span style="font-family: Courier New;">off</span>: El usuario debe ingresar explicitamente cada valor dentro de cada campo por cada uso, o el documento provee su propio método de autocompletado; el navegador no autocompleta las entradas.</li> + <li><span style="font-family: Courier New;">on</span>: El navegador puede completar automáticamente valores basados en lo que el usuario ha ingresado durante entradas previas al formulario.</li> + </ul> + <div class="note"> + <p><strong>Nota:</strong> si se establece <code>autocomplete</code> a un valor de <code>off</code> en un formulario porque el documento provee su propio auto-completado entonces también se debería establecer <code>autocomplete</code> al valor <code>off</code> para cada uno de los elementos de formulario <code>input</code> que el documento pueda autocompletar {{ anch("Notas para Google Chrome") }}.</p> + </div> + </dd> + <dt> + {{ htmlattrdef("enctype") }}</dt> + <dd> + Cuando el valor del atributo <code>method</code> es <span style="font-family: Courier New;">post</span>, este atributo es el <a href="http://en.wikipedia.org/wiki/Mime_type" title="http://en.wikipedia.org/wiki/Mime_type">tipo MIME</a> del contenido que es usado para enviar el formulario al servidor.</dd> + <dd> + Los posibles valores son: + <ul> + <li><span style="font-family: Courier New;">application/x-www-form-urlencoded</span>: El valor por defecto si un atributo no está especificado.</li> + <li><span style="font-family: Courier New;">multipart/form-data</span>: Usar este valor si se está usando el elemento {{ HTMLElement("input") }} con el atributo <code>type</code> ajustado a "file".</li> + <li><span style="font-family: Courier New;">text/plain (HTML5)</span></li> + </ul> + <p>Este valor puede ser sobreescrito por un atributo{{ htmlattrxref("formenctype", "button") }}en un {{ HTMLElement("button") }} o un elemento {{ HTMLElement("input") }}.</p> + </dd> + <dt> + {{ htmlattrdef("method") }}</dt> + <dd> + El método <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616.html" title="http://www.w3.org/Protocols/rfc2616/rfc2616.html">HTTP</a> que el navegador usa para enviar el formulario. Valores posibles son: + <ul> + <li><span style="font-family: Courier New;">post</span>: Corresponde al <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5" title="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5">método POST</a> HTTP ; los datos del formulario son incluidos en el cuerpo del formulario y son enviados al servidor.</li> + <li><span style="font-family: Courier New;">get</span>: Corresponde al <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3" title="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3">método GET</a> HTTP; los datos del formulario son adjuntados a la URI del atributo <code>action</code> , con un '?' como separador, y la URI resultante es enviada al servidor. Use este método cuando el formulario no tiene efectos secundarios y contiene solo caracteres ASCII.</li> + </ul> + <p>Este valor puede ser sobreescrito por un atributo {{ htmlattrxref("formmethod", "button") }} en un {{ HTMLElement("button") }} o elemento {{ HTMLElement("input") }}.</p> + </dd> + <dt> + {{ htmlattrdef("name") }}</dt> + <dd> + El nombre del formulario. En HTML4 ha quedado en desuso (debe usarse un <span style="font-family: Courier New;">id</span> en su lugar). Debe ser único entre los formularios en un documento y no una cadena vacia en HTML5.</dd> + <dt> + {{ htmlattrdef("novalidate") }} {{ HTMLVersionInline(5) }}</dt> + <dd> + Este atributo booleano indica que el formulario no es validado cuando es enviado. Si el atributo no existe {{ htmlattrxref("formnovalidate", "button") }} en un {{ HTMLElement("button") }} o en un elemento {{ HTMLElement("input") }} que pertenece al formulario.</dd> + <dt> + {{ htmlattrdef("target") }}</dt> + <dd> + Un nombre o keyword indicando donde mostrar la respuesta que es recibida después de enviar el formulario. En HTML 4, este es el nombre de, o una palabra clave, para un marco. En HTML5, es un nombre de, o palabra clave para, un contexto de navegación (por ejemplo, tab, window o marco en línea). Las siguientes palabras clave tienen significados especiales: + <ul> + <li><span style="font-family: Courier New;">_self</span>: Carga la respuesta dentro del mismo frame HTML 4 (o en HTML5, contexto de navegación) como el marco actual. Este valor es por defecto si el atributo no es especificado.</li> + <li><span style="font-family: Courier New;">_blank</span>: Carga la respuesta dentro de una nueva ventana sin nombre en HTML 4 o un contexto de navegación en HTML5.</li> + <li><span style="font-family: Courier New;">_parent</span>: Carga la respuesta en el marco padre del marco actual en HTML 4 o en el contexto de navegación padre del marco actual en HTML5. Si no hay marco padre, esta opción se comporta de la misma manera que <span style="font-family: Courier New;">_self</span>.</li> + <li><span style="font-family: Courier New;">_top</span>: HTML 4: Carga la respuesta en toda la ventana original, cancelando otros marcos. HTML5: Carga la respuesta en el contexto de navegación de más alto nivel (esto es, el contexto de navegación que es ancestro del actual, y no tiene padre). Si no hay padre, esta opción se comporta igual que <span style="font-family: Courier New;">_self</span>.</li> + </ul> + <p>HTML5: Este valor puede ser sobreescrito por un atributo {{ htmlattrxref("formtarget", "button") }} en un elemento {{ HTMLElement("button") }} o{{ HTMLElement("input") }}.</p> + </dd> +</dl> +<h2 id="Interfaz_DOM">Interfaz DOM</h2> +<p>Este elemento implementa la interfaz <code><a href="/es/DOM/HTMLFormElement" title="en/DOM/form">HTMLFormElement</a></code>.</p> +<h2 id="Ejemplos">Ejemplos</h2> +<pre class="brush: html"><!-- Formulario simple que enviará una petición GET --> +<form action=""> + <label for="GET-name">Nombre:</label> + <input id="GET-name" type="text" name="name"> + <input type="submit" value="Save"> +</form> + +<!-- Formulario simple que enviará una petición POST --> +<form action="" method="post"> + <label for="POST-name">Nombre:</label> + <input id="POST-name" type="text" name="name"> + <input type="submit" value="Save"> +</form> + +<!-- Formulario con conjunto de campos, leyenda y etiqueta --> +<form action="" method="post"> + <fieldset> + <legend>Título</legend> + <input type="radio" name="radio" id="radio"> <label for="radio">Clic aquí</label> + </fieldset> +</form> +</pre> +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</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>Soporte básico</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop("1.0") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>atributo <code>novalidate</code></td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop("2.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</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>Soporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoMobile("1.0") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>atributo <code>novalidate</code></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("2.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> + </table> +</div> +<p>Notas para Google Chrome</p> +<p>La interfaz de usuario para peticiones auto-complete en Google Chrome varía dependiendo de si <code>autocomplete</code> está establecido en <code>off</code> en elementos <code>input</code> así como su formulario. Específicamente, cuando un formulario tiene <code>autocomplete</code> establecido en <code>off</code> y sus campos <code>autocomplete</code> de sus elementos input <strong>no</strong> están establecidos, entonces si el usuario pregunta por sugerencias de autocompletado para el elemento input, Chrome podrá mostrar un mensaje diciendo "El autocompletado ha sido desactivado para este formulario." Por otro lado, si el formulario y el elemento input tienen <code>autocomplete</code> establecido como <code>off</code>, el navegador no mostrará este mensaje. Por esta razón, debe establecer <code>autocomplete</code> en <code>off</code> para cada input que tiene autocompletado personalizado.</p> +<h2 id="Consulte_también">Consulte también</h2> +<p>Otros elementos que son usados para crear formularios: {{ HTMLElement("button") }}, {{ HTMLElement("datalist") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }},{{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("legend") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}.</p> +<p>{{ languages( { "fr": "fr/HTML/Element/Form" } ) }}</p> |