path: root/files/es/learn/html/forms/index.html

---
title: Formularios HTML
slug: Learn/HTML/Forms
tags:
  - Featured
  - Forms
  - Formulario(2)
  - Guide
  - Guía
  - HTML
  - NeedsTranslation
  - TopicStub
  - Web
translation_of: Learn/Forms
---
<p><span class="seoSummary">Esta guía está constituida por una serie de artículos que te ayudarán a dominar los formularios en HTML.   </span>El formulario HTML  es una herramienta  cuya finalidad es interactuar con el usuario; sin embargo, debido a razones históricas y técnicas, no siempre resulta obvio como explotar su enorme potencial. En esta guía, cubriremos todos los aspectos de los formularios HTML, desde su estructura hasta su estilo, desde la manipulación de sus datos hasta los <em>widgets</em> personalizados. ¡Aprenderás a disfrutar de las grandes prestaciones que nos brindan!</p>

<h2 id="Artículos">Artículos</h2>

<ol>
 <li><a href="/en-US/docs/HTML/Forms/My_first_HTML_form" title="/en-US/docs/HTML/Forms/My_first_HTML_form">Mi primer formulario 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>Cómo estructurar un formulario 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>Los <em>widgets</em> nativos de formulario</span></a></li>
 <li>CSS para formularios HTML
  <ol>
   <li><a href="/en-US/docs/HTML/Forms/Styling_HTML_forms" title="/en-US/docs/HTML/Forms/Styling_HTML_forms"><span>Aplicando estilos a formularios 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">Estilos avanzados para formularios 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">Tabla de compatibilidad de propiedades para <em>widgets</em> de formulario</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>Enviando y recibiendo datos</span></a></li>
 <li><a href="/en-US/docs/HTML/Forms/Data_form_validation" title="/en-US/docs/HTML/Forms/Data_form_validation">Validación de los datos del formulario</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">Cómo crear un <em>widget</em> de formulario personalizado</a></li>
 <li><a href="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript" title="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript">Enviando formularios mediante 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">Usando el objeto 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">Formularios HTML en navegadores antiguos</a></li>
</ol>

<h2 id="Documentación_HTML">Documentación HTML</h2>

<h3 id="HTML_Elements">HTML Elements</h3>

<table>
 <thead>
  <tr>
   <th scope="col">Elemento</th>
   <th scope="col">Interfaz DOM relacionada</th>
   <th scope="col">Descripción</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;">El elemento  <code>button</code> representa un boton clickeable.</td>
  </tr>
  <tr>
   <td style="vertical-align: top;">{{HTMLElement("datalist")}}</td>
   <td style="vertical-align: top;">{{domxref("HTMLDataListElement")}}</td>
   <td style="vertical-align: top;">El elemento <span style="font-family: courier new;">datalist</span> element contiene un conjunto de elementos{{ HTMLElement("option") }} que representan posibles opciones para el valor de otros elementos del formulario.</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> se usa para agrupar distintos elementos dentro de un formulario.</td>
  </tr>
  <tr>
   <td style="vertical-align: top;">{{HTMLElement("form")}}</td>
   <td style="vertical-align: top;">{{domxref("HTMLFormElement")}}</td>
   <td style="vertical-align: top;">El elemento  <code>form </code>representa una seccion del documento html que contiene elementos interactivos a traves de los cuales se le permite al usuario enviar informacion hacia 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;">El elemento   <code>input</code> es usado para crear controles interactivos para los formularios.</td>
  </tr>
  <tr>
   <td style="vertical-align: top;">{{HTMLElement("keygen")}}</td>
   <td style="vertical-align: top;">{{domxref("HTMLKeygenElement")}}</td>
   <td style="vertical-align: top;">El elemento <code>keygen</code> existe para facilitar la generación de llaves u el envío de las llaves publicas como parte de un formulario 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;">El  <code>label</code> determina un título para un item de la interfaz del usuario.</td>
  </tr>
  <tr>
   <td style="vertical-align: top;">{{HTMLElement("legend")}}</td>
   <td style="vertical-align: top;">{{domxref("HTMLLegendElement")}}</td>
   <td style="vertical-align: top;">El elemento <code>legend</code>  representa una etiqueta para el contenido del elemento {{ HTMLElement("fieldset") }} que lo contiene.</td>
  </tr>
  <tr>
   <td style="vertical-align: top;">{{HTMLElement("meter")}}</td>
   <td style="vertical-align: top;">{{domxref("HTMLMeterElement")}}</td>
   <td style="vertical-align: top;">EL elemento <code>meter</code>  representa un valor escalar dentro de un rango conocido, o un valor fraccional.</td>
  </tr>
  <tr>
   <td style="vertical-align: top;">{{HTMLElement("optgroup")}}</td>
   <td style="vertical-align: top;">{{domxref("HTMLOptGroupElement")}}</td>
   <td style="vertical-align: top;">
    <p>El elemento <code>optgroup</code> crea un grupo de opciones dentro de un elemento {{ HTMLElement("select") }} .</p>
   </td>
  </tr>
  <tr>
   <td style="vertical-align: top;">{{HTMLElement("option")}}</td>
   <td style="vertical-align: top;">{{domxref("HTMLOptionElement")}}</td>
   <td style="vertical-align: top;">El elemento<em> </em><code>option<em> </em></code>es usado para crear un control de opcion que representa un item dentro de alguno de los elementos {{ HTMLElement("select") }}, {{ HTMLElement("optgroup") }} o {{ 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;">El elemento <code>output</code> representa un resultado de un calculo.</td>
  </tr>
  <tr>
   <td style="vertical-align: top;">{{HTMLElement("progress")}}</td>
   <td style="vertical-align: top;">{{domxref("HTMLProgressElement")}}</td>
   <td style="vertical-align: top;">El elemento <code>progress</code> es usado para mostrar el progreso de la realización de una tarea.</td>
  </tr>
  <tr>
   <td style="vertical-align: top;">{{HTMLElement("select")}}</td>
   <td style="vertical-align: top;">{{domxref("HTMLSelectElement")}}</td>
   <td style="vertical-align: top;">El elemento <code>select</code> representa el control que presenta un menu de opciones.</td>
  </tr>
  <tr>
   <td style="vertical-align: top;">{{HTMLElement("textarea")}}</td>
   <td style="vertical-align: top;">{{domxref("HTMLTextAreaElement")}}</td>
   <td style="vertical-align: top;">EL elemento <code>textarea</code> representa un campo multi-linea de edicion de text plano.</td>
  </tr>
 </tbody>
</table>

<div class="note">
<p><strong>Nota:</strong> Todos los elementos de formulario, al igual que el resto de elementos HTML, soportan la interfaz DOM {{domxref("HTMLElement")}}.</p>
</div>

<h3 id="HTML_Attributes">HTML Attributes</h3>

<table class="standard-table">
 <thead>
  <tr>
   <th>Nombre del atributo</th>
   <th>Elementos</th>
   <th>Descripción</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>accept</td>
   <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td>
   <td>Lista de tipos que acepta el servidor, típicamente un tipo de fichero.</td>
  </tr>
  <tr>
   <td style="white-space: nowrap;">accept-charset</td>
   <td>{{ HTMLElement("form") }}</td>
   <td>Lista de <em>charsets </em>(conjuntos de caracteres) aceptados.</td>
  </tr>
  <tr>
   <td>action</td>
   <td>{{ HTMLElement("form") }}</td>
   <td>La URI del programa con el que procesar la información enviada a mediante el formulario.</td>
  </tr>
  <tr>
   <td>autocomplete</td>
   <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td>
   <td>Indica si los controles en este formulario serán o no autocompletados por el navegador</td>
  </tr>
  <tr>
   <td>autofocus</td>
   <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
   <td>El elemento debería poseer el foco automáticamente tras cargar  la página.</td>
  </tr>
 </tbody>
 <tbody>
  <tr>
   <td>challenge</td>
   <td>{{ HTMLElement("keygen") }}</td>
   <td>Una cadena de comprobación que es enviada junto con la clave pública.</td>
  </tr>
  <tr>
   <td>checked</td>
   <td>{{ HTMLElement("input") }}</td>
   <td>Indica si el elemento debe estar seleccionado (checked) tras cargar la página.</td>
  </tr>
  <tr>
   <td>cols</td>
   <td>{{ HTMLElement("textarea") }}</td>
   <td>Define el número de columnas en un elemento de tipo textarea.</td>
  </tr>
  <tr>
   <td>data</td>
   <td>{{ HTMLElement("object") }}</td>
   <td>Especifica la URL del recurso.</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>Indica si el usuario puede o no interactuar con el elemento.</td>
  </tr>
  <tr>
   <td>enctype</td>
   <td>{{ HTMLElement("form") }}</td>
   <td>Define el tipo de contenido del formulario cuando el método de envío es POST.</td>
  </tr>
  <tr>
   <td>for</td>
   <td>{{ HTMLElement("label") }}, {{ HTMLElement("output") }}</td>
   <td>
    <p>Establece una asociación con otros elementos</p>
   </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 elemento <strong>form</strong> que contiene este elemento.</td>
  </tr>
 </tbody>
 <tbody>
  <tr>
   <td>high</td>
   <td>{{ HTMLElement("meter") }}</td>
   <td>Indicates the lower bound of the upper range.</td>
  </tr>
  <tr>
   <td>keytype</td>
   <td>{{ HTMLElement("keygen") }}</td>
   <td>Especifica el tipo de clave generada.</td>
  </tr>
  <tr>
   <td>list</td>
   <td>{{ HTMLElement("input") }}</td>
   <td>Determina una lista de opciones predefinidas para sugerir al usuario.</td>
  </tr>
  <tr>
   <td>low</td>
   <td>{{ HTMLElement("meter") }}</td>
   <td>Indicates the upper bound of the lower range.</td>
  </tr>
  <tr>
   <td>max</td>
   <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td>
   <td>Indica el máximo valor permitido.</td>
  </tr>
  <tr>
   <td>maxlength</td>
   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
   <td>Define el máximo número de caracteres permitidos en el elemento.</td>
  </tr>
  <tr>
   <td>method</td>
   <td>{{ HTMLElement("form") }}</td>
   <td>
    <p>Define qué método HTTP se usará al enviar el formulario. puede ser <strong>GET</strong> (por defecto) o <strong>POST</strong></p>
   </td>
  </tr>
  <tr>
   <td>min</td>
   <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}</td>
   <td>Indica el mínimo valor permitido.</td>
  </tr>
  <tr>
   <td>multiple</td>
   <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td>
   <td>Indica si mútiples valores pueden ser introducidos en un input de tipo email o file.</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>Especifica el nombre del elemento. Este nombre se usará asociado al dato que contiene al enviar al servidor el formulario.</td>
  </tr>
  <tr>
   <td>novalidate</td>
   <td>{{ HTMLElement("form") }}</td>
   <td>Indica que el formulario no debería validarse al momento de ser enviado.</td>
  </tr>
  <tr>
   <td>optimum</td>
   <td>{{ HTMLElement("meter") }}</td>
   <td>Indica el valor numérico óptimo.</td>
  </tr>
  <tr>
   <td>pattern</td>
   <td>{{ HTMLElement("input") }}</td>
   <td>Establece la expresión regular con la que validar el valor del elemento.</td>
  </tr>
  <tr>
   <td>placeholder</td>
   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
   <td>Proporciona una pista al usuario de lo que el campo debe contener. Se muestra cuando el campo está vacío.</td>
  </tr>
  <tr>
   <td>readonly</td>
   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
   <td>Indica si el elemento se puede o no editar.</td>
  </tr>
  <tr>
   <td>required</td>
   <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
   <td>Cuando un campo del formulario es requerido, el usuario no puede dejarlo vacío.</td>
  </tr>
  <tr>
   <td>rows</td>
   <td>{{ HTMLElement("textarea") }}</td>
   <td>Defines the number of rows in a textarea.</td>
  </tr>
  <tr>
   <td>selected</td>
   <td>{{ HTMLElement("option") }}</td>
   <td>En una lista de selección, la opción con el atributo selected será la que está seleccionada por defecto</td>
  </tr>
  <tr>
   <td>size</td>
   <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td>
   <td>Defina la anchura del elemento (en píxeles). Si el elemento es de tipo <strong>text</strong> o <strong>password</strong> el ancho se referirá al número de caracteres.</td>
  </tr>
  <tr>
   <td>src</td>
   <td>{{ HTMLElement("img") }}</td>
   <td>El URL del recurso</td>
  </tr>
  <tr>
   <td>step</td>
   <td>{{ HTMLElement("input") }}</td>
   <td>Determina el incremento de cada paso con el que se cubre un rango desde un valor mínimo hasta un valor máximo.</td>
  </tr>
  <tr>
   <td>target</td>
   <td>{{ HTMLElement("form") }}</td>
   <td> </td>
  </tr>
  <tr>
   <td>type</td>
   <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}</td>
   <td>Determina el tipo del elemento.</td>
  </tr>
  <tr>
   <td>usemap</td>
   <td>{{ HTMLElement("input") }}</td>
   <td> </td>
  </tr>
  <tr>
   <td>value</td>
   <td>{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td>
   <td>Establece el valor actual del elemento.</td>
  </tr>
  <tr>
   <td>wrap</td>
   <td>{{ HTMLElement("textarea") }}</td>
   <td>Cuando un texto tiene una longitud mayor que el ancho del elemento sobre el que se muestra, determina si el elemento debe simular saltos de línea para que todo el texto quede visible en el elemento.</td>
  </tr>
 </tbody>
</table>

<h3 id="Referencia_a_la_normativa">Referencia a la normativa</h3>

<ul>
 <li><a href="http://www.w3.org/html/wg/drafts/html/master/forms.html#forms" lang="en" rel="external" title="http://www.w3.org/TR/html5/forms.html">W3C HTML 5.1 Specification (Forms)</a></li>
 <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#forms" rel="external" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#forms">WHATWG HTML Living Standard (Forms)</a></li>
</ul>