guía de formularios HTML

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

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
<button> HTMLButtonElement The button element represents a clickable button.
<datalist> HTMLDataListElement The datalist element contains a set of <option> elements that represent the possible options for the value of other form elements.
<fieldset> HTMLFieldSetElement The fieldset is used to group several form elements within a form.
<form> HTMLFormElement The form element represents a section of document that contains interactive element that enables a user to submit information to a web server.
<input> HTMLInputElement The  input element is used to create interactive controls for forms.
<keygen> HTMLKeygenElement The keygen element exists to facilitate generation of key material, and submission of the public key as part of an HTML form
<label> HTMLLabelElement The label element represents a caption for an item in a user interface
<legend> HTMLLegendElement The legend element represents a caption for the content of its parent <fieldset>.
<meter> HTMLMeterElement The meter element  represents either a scalar value within a known range or a fractional value.
<optgroup> HTMLOptGroupElement the optgroup element creates a group of options within a <select> element.
<option> HTMLOptionElement the HTML option element is used to create a control representing an item within a <select>, an <optgroup> or a <datalist> element.
<output> HTMLOutputElement The output element represents the result of a calculation.
<progress> HTMLProgressElement The progress element is used to view the completion progress of a task.
<select> HTMLSelectElement The select element represents a control that presents a menu of options.
<textarea> HTMLTextAreaElement The textarea element represents a multi-line plain-text editing control.

Nota: Todos los elementos de formulario, al igual que el resto de elementos HTML, soportan la interfaz DOM HTMLElement.

HTML Attributes

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

Establece una asociación con otros elementos

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

Define qué método HTTP se usará al enviar el formulario. puede ser GET (por defecto) o POST

min <input>, <meter> Indica el mínimo valor permitido.
multiple <input>, <select> Indica si mútiples valores pueden ser introducidos en un input de tipo email o file.
name <button>, <form>, <fieldset>, <input>, <keygen>, <output>, <select>, <textarea> Especifica el nombre del elemento. Este nombre se usará asociado al dato que contiene al enviar al servidor el formulario.
novalidate <form> Indica que el formulario no debería validarse al momento de ser enviado.
optimum <meter> Indica el valor numérico óptimo.
pattern <input> Establece la expresión regular con la que validar el valor del elemento.
placeholder <input>, <textarea> Proporciona una pista al usuario de lo que el campo debe contener. Se muestra cuando el campo está vacío.
readonly <input>, <textarea> Indica si el elemento se puede o no editar.
required <input>, <select>, <textarea> Cuando un campo del formulario es requerido, el usuario no puede dejarlo vacío.
rows <textarea> Defines the number of rows in a textarea.
selected <option> En una lista de selección, la opción con el atributo selected será la que está seleccionada por defecto
size <input>, <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 <img> El URL del recurso
step <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 <form>  
type <button>, <input> Determina el tipo del elemento.
usemap <input>  
value <button>, <option>, <input>, <meter>, <progress> Establece el valor actual del elemento.
wrap <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

Etiquetas y colaboradores del documento

 Colaboradores en esta página: eljonims, sjmiles
 Última actualización por: eljonims,