Tipos de 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.
Te sugiero que mires la página de ejemplos de inputs
A modo de resumen este es el conjunto de atributos que puede aceptar un elemento INPUT de cualquier formulario
Lista de atributos
| Nombre | Valores | Uso |
|---|---|---|
| accept | Extensión de tipo audio/* video/* image/* tipo_de_medio |
En el tipo de campo file (campos usados para nombres de ficheros) valida el nombre ficheros. Ojo para subir archivos al servidor hace falta también un script que realice el proceso. |
| alt | text | Para tipo image da un texto alternativo a la imagen, Es similar al atributo alt de un elemento image de HTML. |
| 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 | Si el elemento INPUT NO está entre las etiquetas <form></form>, este atributo indica a que formulario 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 |
El formulario envía los datos de los campos 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. |
| 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 aparecera 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,..... Por defecto es 1, pero si quieres decimales en el input type number puedes usar step con decimales: 0.1, 0.01, 0.001 para uno, dos o tres decimales respectivamente |
| title | texto | El texto aquí escrito vale como indicador, para cuando un campo no acepta un valor por que la autovalidación de form lo impide. |
| type | button checkbox file hidden image number password radio range reset submit text url |
Posibles tipos del campo INPUT. Estos valen para los navegadores mayoritarios (Firefox, iExplorer y Chrome), pero hay más posibilidades definidas en la norma: color |
| 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. |