Elemento INPUT en el formulario

El elemento INPUT quizás sea el elemento fundamental de cualquier formulario, no solo es la cajita en la que escribimos, abarca también los botones de enviar (submit) o resetear (reset) y más. Como habrás leído existen muchos tipos de campo INPUT, estos tipos corresponden con el tipo de dato que se espera en el campo: texto, número, un password, un email....

Cada tipo de dato pueden tener atributos propios, es decir, modificadores o valores que permiten controlar como se entran los datos o que hacer con ellos.

A modo de resumen este es el conjunto de atributos que puede aceptar un elemento INPUT de cualquier formulario

Nombre Valores Uso
accept Extensión de tipo
audio/*
video/*
image/*
tipo_de_medio
En el tipo de campo file (campos usados para enviar ficheros) valida el nombre ficheros. Ojo para subir archivos al servidor hace falta también un script que realice el proceso y que es en último término el que valida el archivo subido. No vale como filtro.
alt text Para tipo image, da un texto alternativo a la imagen, Es similar al atributo alt de un elemento image de HTML. Puede valer como información para robots de los buscadores y poco más.
autocomplete on
off
Habilita autocompletar para cuando se está escribiento texto. Hace más cómoda la entrada de texto, pero también puede ser inseguro.
autofocus autofocus El campo que tiene este atributo es al que va el cursor cuando se carga la página
checked checked Para campos tipo checkbox o radio, indica que el campo debe estar selecionado por defecto.
disabled disabled El campo INPUT no está habilitado, no puede usarse.
form form_id El elemento INPUT puede NO estar entre las etiquetas <form></form>. Este atributo indica a que forumulario o formularios pertenece el INPUT
formaction URL Se usa para botones de enviar (tipos SUBMIT o IMAGE) Permite establecer el script que procesará los datos. Tiene preferenica sobre el action del elemento form
formenctype application/x-www-form-urlencoded
multipart/form-data
text/plain
Se usa para botones de enviar (tipos SUBMIT o IMAGE) y especifica la forma en que se codifican los datos.
formmethod get
post
Cuando se envían el formulario los datos de los campos se envían como GET o como POST. El primero es como si fueran argumentos de la url, mientras el segundo va más escondido, y es útil cuando se mueven muchos datos..
formnovalidate   Para marcar el dato como que no debe ser comprobado al ser enviado.
formtarget _blank
_self
_parent
_top
nombre de frame
Al enviar los datos el programa puede devolver al usuario a una página (gracias, error, pedidos...) Aquí se indica si debe ser la misma página (_self) una nueva (_blank), Los demás valors valen para cuando se usan frames
height pixels Para tipo image este valor define el alto de la imagen. Esta imagen es en realidad un botón de enviar.
hidden   El campo no se ve, Para campos que contengan datos que no se muestran en pantalla pero que son útiles al programa de action
list datalist_id Referencia del elemento <datalist> que contiene las opciones o valores predefinidos para un input. Esos imputs son listaas desplegables.
max número o fecha Para un valor numérico (number) o tipo fecha (date) o rangos (range) permite establecer un valor máximo. Útil para validar datos.
maxlength número Ancho máximo del campo medido en caracteres.
min número o fecha Para un valor numérico (number) o tipo fecha (date) o rangos (range) permite establecer un valor mínimo. Útil para validar datos.
multiple   Con este atributo se admite que se puedan entrar varios valores para un mismo input. Estos valores se separan entre sí con comas.
name texto Esto se usa para dar un nombre al elemento input.
pattern regexp Expresión regular o patrón al que debe ajustarse el texto entrado. Esto es muy conocido para programadores Perl o usuarios de Unix y Linux. Es un paso más allá de los comodines típicos que usamos por ejemplo para listar * y ?
placeholder texto El valor escrito en este atributo aparecerá dentro del campo y desaparece automáticamente al entrar con el cursor. Útil para dar información al usuario sobre lo que se espera que teclee.
readonly   El campo es de solo lectura, no puede escribirse en él.
required   Este campo debe ser rellenado antes de enviar el formulario
size número Ancho en caracteres del cuadro de INPUT.
src URL Para tipo IMAGE sirve para la dirección donde se encuentra la imagen.
step number Para campo numéricos nos da el intervalo entre valores consecutivos. Por ejemplo si es 5 y los valores a teclear están entre 1 y 10o solo serán válidos 1,6,11,.....
tabindex numero El orden de llenado de los campos por defecto es el que tienen en la página, pero este atributo puede cambiar ese orden.
type button
checkbox
email
file
hidden
image
number
password
radio
range
reset
submit
text
url

Posiblews tipos del campo INPUT. Estos valen para los navegadores mayoritarios (Firefox, iExplorer y Chrome), pero hay más posibilidades definidas en la norma:

color
date
datetime
datetime-local
month
search
tel
time
week

value text Valor por defecto del campo.
width pixels Para tipo image este valor define el ancho de la imagen. Esta imagen es en realidad un botón de enviar.

Esta tabla te puede valer como referencia para consultas rápidas, mientras dominas esto.

Lo suyo es verlos en acción, en ejemplos útiles, al menos para los casos más habituales.

Los atributos que comienzan con el prefijo form equivalen a los aributos de form con el mismo nombre pero sin el prefijo. Ejemplo formtarget se usa con INPUT pero target se usa con form.

AH, y aparte de esto por supuesto tenemos los atributos globales comunes a cualquier elemento como son style o class,