--- title: Formularios HTML slug: Learn/HTML/Forms tags: - Featured - Forms - Formulario(2) - Guide - Guía - HTML - NeedsTranslation - TopicStub - Web translation_of: Learn/Forms ---

Esta guía está constituida por una serie de artículos que te ayudarán a dominar los formularios en HTML.   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 widgets personalizados. ¡Aprenderás a disfrutar de las grandes prestaciones que nos brindan!

Artículos

  1. Mi primer formulario HTML
  2. Cómo estructurar un formulario HTML
  3. Los widgets nativos de formulario
  4. CSS para formularios HTML
    1. Aplicando estilos a formularios HTML
    2. Estilos avanzados para formularios HTML
    3. Tabla de compatibilidad de propiedades para widgets de formulario
  5. Enviando y recibiendo datos
  6. Validación de los datos del formulario
  7. Cómo crear un widget de formulario personalizado
  8. Enviando formularios mediante JavaScript
    1. Usando el objeto FormData
  9. Formularios HTML en navegadores antiguos

Documentación HTML

HTML Elements

Elemento Interfaz DOM relacionada Descripción
{{HTMLElement("button")}} {{domxref("HTMLButtonElement")}} El elemento  button representa un boton clickeable.
{{HTMLElement("datalist")}} {{domxref("HTMLDataListElement")}} El elemento datalist element contiene un conjunto de elementos{{ HTMLElement("option") }} que representan posibles opciones para el valor de otros elementos del formulario.
{{HTMLElement("fieldset")}} {{domxref("HTMLFieldSetElement")}} El  fieldset se usa para agrupar distintos elementos dentro de un formulario.
{{HTMLElement("form")}} {{domxref("HTMLFormElement")}} El elemento  form 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.
{{HTMLElement("input")}} {{domxref("HTMLInputElement")}} El elemento   input es usado para crear controles interactivos para los formularios.
{{HTMLElement("keygen")}} {{domxref("HTMLKeygenElement")}} El elemento keygen existe para facilitar la generación de llaves u el envío de las llaves publicas como parte de un formulario HTML.
{{HTMLElement("label")}} {{domxref("HTMLLabelElement")}} El  label determina un título para un item de la interfaz del usuario.
{{HTMLElement("legend")}} {{domxref("HTMLLegendElement")}} El elemento legend  representa una etiqueta para el contenido del elemento {{ HTMLElement("fieldset") }} que lo contiene.
{{HTMLElement("meter")}} {{domxref("HTMLMeterElement")}} EL elemento meter  representa un valor escalar dentro de un rango conocido, o un valor fraccional.
{{HTMLElement("optgroup")}} {{domxref("HTMLOptGroupElement")}}

El elemento optgroup crea un grupo de opciones dentro de un elemento {{ HTMLElement("select") }} .
{{HTMLElement("option")}} {{domxref("HTMLOptionElement")}} El elemento option 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") }} .
{{HTMLElement("output")}} {{domxref("HTMLOutputElement")}} El elemento output representa un resultado de un calculo.
{{HTMLElement("progress")}} {{domxref("HTMLProgressElement")}} El elemento progress es usado para mostrar el progreso de la realización de una tarea.
{{HTMLElement("select")}} {{domxref("HTMLSelectElement")}} El elemento select representa el control que presenta un menu de opciones.
{{HTMLElement("textarea")}} {{domxref("HTMLTextAreaElement")}} EL elemento textarea representa un campo multi-linea de edicion de text plano.

Nota: Todos los elementos de formulario, al igual que el resto de elementos HTML, soportan la interfaz DOM {{domxref("HTMLElement")}}.

HTML Attributes

Nombre del atributo Elementos Descripción
accept {{ HTMLElement("form") }}, {{ HTMLElement("input") }} Lista de tipos que acepta el servidor, típicamente un tipo de fichero.
accept-charset {{ HTMLElement("form") }} Lista de charsets (conjuntos de caracteres) aceptados.
action {{ HTMLElement("form") }} La URI del programa con el que procesar la información enviada a mediante el formulario.
autocomplete {{ HTMLElement("form") }}, {{ HTMLElement("input") }} Indica si los controles en este formulario serán o no autocompletados por el navegador
autofocus {{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }} El elemento debería poseer el foco automáticamente tras cargar  la página.
challenge {{ HTMLElement("keygen") }} Una cadena de comprobación que es enviada junto con la clave pública.
checked {{ HTMLElement("input") }} Indica si el elemento debe estar seleccionado (checked) tras cargar la página.
cols {{ HTMLElement("textarea") }} Define el número de columnas en un elemento de tipo textarea.
data {{ HTMLElement("object") }} Especifica la URL del recurso.
dirname {{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}  
disabled {{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }} Indica si el usuario puede o no interactuar con el elemento.
enctype {{ HTMLElement("form") }} Define el tipo de contenido del formulario cuando el método de envío es POST.
for {{ HTMLElement("label") }}, {{ HTMLElement("output") }}

Establece una asociación con otros elementos
form {{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }} Indica el elemento form que contiene este elemento.
high {{ HTMLElement("meter") }} Indicates the lower bound of the upper range.
keytype {{ HTMLElement("keygen") }} Especifica el tipo de clave generada.
list {{ HTMLElement("input") }} Determina una lista de opciones predefinidas para sugerir al usuario.
low {{ HTMLElement("meter") }} Indicates the upper bound of the lower range.
max {{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }} Indica el máximo valor permitido.
maxlength {{ HTMLElement("input") }}, {{ HTMLElement("textarea") }} Define el máximo número de caracteres permitidos en el elemento.
method {{ HTMLElement("form") }}

Define qué método HTTP se usará al enviar el formulario. puede ser GET (por defecto) o POST
min {{ HTMLElement("input") }}, {{ HTMLElement("meter") }} Indica el mínimo valor permitido.
multiple {{ HTMLElement("input") }}, {{ HTMLElement("select") }} Indica si mútiples valores pueden ser introducidos en un input de tipo email o file.
name {{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }} Especifica el nombre del elemento. Este nombre se usará asociado al dato que contiene al enviar al servidor el formulario.
novalidate {{ HTMLElement("form") }} Indica que el formulario no debería validarse al momento de ser enviado.
optimum {{ HTMLElement("meter") }} Indica el valor numérico óptimo.
pattern {{ HTMLElement("input") }} Establece la expresión regular con la que validar el valor del elemento.
placeholder {{ HTMLElement("input") }}, {{ HTMLElement("textarea") }} Proporciona una pista al usuario de lo que el campo debe contener. Se muestra cuando el campo está vacío.
readonly {{ HTMLElement("input") }}, {{ HTMLElement("textarea") }} Indica si el elemento se puede o no editar.
required {{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }} Cuando un campo del formulario es requerido, el usuario no puede dejarlo vacío.
rows {{ HTMLElement("textarea") }} Defines the number of rows in a textarea.
selected {{ HTMLElement("option") }} En una lista de selección, la opción con el atributo selected será la que está seleccionada por defecto
size {{ HTMLElement("input") }}, {{ HTMLElement("select") }} Defina la anchura del elemento (en píxeles). Si el elemento es de tipo text o password el ancho se referirá al número de caracteres.
src {{ HTMLElement("img") }} El URL del recurso
step {{ HTMLElement("input") }} Determina el incremento de cada paso con el que se cubre un rango desde un valor mínimo hasta un valor máximo.
target {{ HTMLElement("form") }}  
type {{ HTMLElement("button") }}, {{ HTMLElement("input") }} Determina el tipo del elemento.
usemap {{ HTMLElement("input") }}  
value {{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }} Establece el valor actual del elemento.
wrap {{ HTMLElement("textarea") }} 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.

Referencia a la normativa