input

Resumen

El elemento <input> se usa para crear controles interactivos para formularios basados en la web. La forma en que <input> funciona varía considerablemente dependiendo del valor de su atributo type.

Uso

Atributos

Al igual que todos los demás elementos HTML, este elemento es compatible con los  atributos globales.

type

     El tipo de control a mostrar.  Si este atributo no es especificado, tomará el valor de "text" por defecto. Los posibles valores son:

• butt          on: Botón sin un comportamiento específico.
• checkbox: Casilla de selección. Debes de usar el atributo "value" para especificar el valor que va a enviar este elemento una vez sea validado. Usa el atributo "checked" para indicar si el elemento ha sido seleccionado. También puedes hacer uso del atributo "indeterminate" para indicar que el elemento está en un estado indeterminado (en la mayoría de plataformas, se dibujará una línea horizontal en el elemento).
• color:  HTML5 Control para poder seleccionar un color.
• date:  HTML5 Control para añadir una fecha (año, mes y día, sin horas).
• datetime:  HTML5 Control para poder rellenar el campo con una fecha y hora (hora, minuto, segundos y fracciones de segundo) basada en la zona horaria UTC.
• datetime-local: HTML5  Control para poder rellenar el campo con una fecha y hora sin zona horaria.
• email: HTML5 Control para poder rellenar el campo con una dirección de correo electrónico. Las pseudo-classes CSS :valid y :invalid son aplicables cuando sea apropiado.
• file: Control que te permite poder seleccionar un archivo. Usa el atributo accept para definir qué tipo de archivos puede selecionar este control.
• hidden: Control que no se muestra pero su valor va a ser enviado al servidor.
• image: Representación gráfica para el botón que valida el formulario. Debes de usar el atributo src para definir la ruta de la imagen y el atributo alt para definir un texto alternativo por si la imagen no se muestra. Puedes usar los atributos width y height para definir el tamaño de la imagen en píxeles.
• month: HTML5 Control para poder rellenar el campo con un mes y año, sin zona horaria.
• number: HTML5 Control para poder rellenar el campo con un número.
• password: Control para poder rellenar el campo con texto para crear una contraseña, solo será visible el actual caracter que el usuario escriba. Se puede hacer uso del atributo maxlength para especificar la máxima longitud del valor a usar.
• radio: Botón radio. Debes de usar el attributo value para defenir el valor que va a ser enviado por este elemento. Usa el atributo checked para determinar si un elemento debe de ser seleccionado por defecto. Botones radio que tengan el mismo valor en el atributo name, se considera que están en el mismo "grupo de botones radio", por lo que solo una opción puede ser seleccionada a la vez.
• range: HTML5 Control para poder rellenar el campo con número (rango) cuyo valor exacto no es importante. Este control usa los valores por defecto siguientes si estos no son especificados.
  • min: 0
  • max: 100
  • value: min + (max-min)/2, o min if max is less than min
  • step: 1
• reset:  Botón que resetea el contenido del formulario a sus valores iniciales por defecto.
• search: HTML5 Control para poder rellenar el campo con un texto a buscar; los saltos de línea son quitados en el valor introducido.
• submit: Botón que valida el formulario.
• tel: HTML5 Control para poder rellenar el campo con un número de teléfono; los saltos de línea son quitados automáticamente en el valor introducido, ninguna otra sintaxis es obligatoria. Se pueden usar atributos como pattern y maxlength para restringir los valores a introducir en este control. Las pseudo-classes CSS :valid y :invalid  aplican cuando sea apropiado.
• text: Simple línea de texto a introducir; los saltos de línea son quitados automáticamente en el valor introducido.
• time: HTML5 Control para poder rellenar el campo con un valor en formato tiempo pero sin esecificar zona horaria.
• url: HTML5 Control para poder rellenar el campo con una URL. El usuario puede rellenar el campo con una URL válida o dejar el espacio en blanco; el valor introducido se validará antes de ser enviado. Los saltos de línea y los espacios dejados antes y después de la cadena son quitados automáticamente en el valor introducido. Se pueden usar atributos como pattern y maxlength para restringir los valores a introducir en este control. Las pseudo-classes CSS :valid y :invalid  aplican cuando sea apropiado.
• week: HTML5 Control para poder rellenar el campo con una fecha que consista en el número correspondiente a la semana del año sin zona horaria.

accept

Si el valor del atributo type es file, este atributo indica el tipo de archivos que acepta el servidor; de lo contrario, es ignorado. El valor es una lista de elementos únicos separados por comas:

• Extensión comenzando con el caracter STOP (U+002E). (Ej.: ".jpg,.png,.doc")
• Elemento de tipo MIME sin extensiones.
• audio/* para archivos de audio HTML5
• video/* para archivos de video HTML5
• image/* para archivos de imagen HTML5

accesskey  HTML4 solo. Obsoleto a partir de HTML5

Caracter que el usuario puede pulsar para situar el foco sobre el elemento <input> . Este atributo es global en HTML5 .

mozactionhint No estándar

Especifica una acción que determina el texto de la tecla Enter en dispositivos con teclados virtuales. Los valores permitidos son go, done, next, search, y send; estos son automáticamente convertidos a una cadena apropiada (y no son sensibles a las mayúsculas).

autocomplete  HTML5

Este atributo indica si el valor del control <input> puede ser autocompletado por el navegador. Es ignorado si el valor del atributo type es hidden, checkbox, radio, file o un botón (button, submit, reset, image) Los valores posibles son:

• off: El usuario debe introducir siempre el valor en el <input> . El navegador no lo autocompletará.
• on: El navegador autocompleta el valor basándose en anteriores entradas que realizó el usuario.

Si no se especifica el atributo autocomplete en un elemento <input>, entonces el navegador usa el valor del atributo autocomplete del elemento <input> del formulario contenedor. Este formulario puede ser el elemento form al cual este elemento <input> pertenece, o el elemento form cuyo id se epecifica en el atributo form de dicho elemento <input>. Para más información, consulta sobre el atributo autocomplete en <form> .

A diferencia de otros navegadores, el atributo autocomplete controla si Firefox mantiene el estado desactivado dinámicamente y (si se aplica) el "check" dinámico del elemento <input> cuando se refresca la página. Esta característica está activa por defecto. Asignando el valor off al atributo autocomplete, se desactiva esta característica; funciona incluso cuando este atributo normalmente no se aplicaría a <input> debido a su tipo. Consulta bug 654072.

En los navegadores modernos (incluídos Firefox 38+, Google Chrome 34+, IE 11+), establecer el atributo autocomplete no impide que el Administrador de Contraseñas del navegador pregunte al usuario si quiere guardar su información de logueo y, si está de acuerdo, autocompletar los campos la próxima vez que el usuario visite la página. Consulta El atributo autocomplete y los campos de Login.

autofocus  HTML5

Atributo de tipo Boolean que permite especificar qué <input> tendrá el foco cuando la página se cargue; a no ser que el usuario lo sobreescriba, por ejemplo, si escribe en otro <input> . Sólo uno puede tener el atributo autofocus. Es ignorado si el atributo type es hidden. La obtención del foco del control ocurre antes de que se ejecute el evento DOMContentLoaded.

checked

Atributo de tipo Boolean. Cuando el valor del atributo type es radio o checkbox, indica que este control está seleccionado por defecto; sino es ignorado.

disabled

Atributo de tipo Boolean que deshabilita la interacción del usuario con el input. En particular, el evento click no será atendido en los <input> con este atributo. Es ignorado si el atributo type es hidden.

form  HTML5

Indica el elemento <form> al que está asociado. El valor debe ser el atributo id del elemento <form> correspondiente. Si no se especifica, el <input> debe estar comprendido dentro de un elemento <form> . Este atributo permite situar un <input> en cualquier parte del documento sin que sea necesario que esté comprendido dentro de un <form> .

formaction  HTML5

El URI del programa que procesa la información enviada por el elemento <input>. Sólo válido para botones o imágenes de tipo submit. Sobreescribe el atributo action del elemento <form> al que pertenezca.

formenctype  HTML5

Especifica cómo se codifica la información enviada al servidor.  Sólo válido para botones o imágenes de tipo submit. Los posibles valores son:

• application/x-www-form-urlencoded: Valor por defecto. Los caracteres serán codificados antes de ser enviados.
• multipart/form-data: Los caracteres no son codificados. Se usa para elementos <input> con atributo type file.
• text/plain: Los espacios se convierten en "+". El resto de caracteres no son codificados.

Sobreescribe el atributo enctype del elemento <form> al que pertenezca.

formmethod  HTML5

Especifica el método HTTP usado para enviar la información al servidor.  Sólo válido para botones o imágenes de tipo submit. Los posibles valores son:

• post: La información del formulario es incluida en el cuerpo del <form> y enviada al servidor.
• get: La información del formulario es añadida al atributo URI del <form> , separado por el signo "?", y enviado al servidor. No usar si la información enviada es privada y solo contiene caracteres ASCII.

Sobreescribe el atributo method del elemento <form> al que pertenezca.

formnovalidate  HTML5

Atributo de tipo Boolean que especifica si la información debe ser validada cuando es enviada al servidor. Sólo válido para botones o imágenes de tipo submit. Sobreescribe el atributo novalidate del elemento <form> al que pertenezca.

formtarget  HTML5

Sólo válido para botones o imágenes de tipo submit. Este atributo es un nombre o palabra clave que indica como se va a mostrar la respuesta del servidor una vez se envíe el formulario. Este nombre o palabra clave hace referencia al contexto del navegador, por ejemplo, tab, window o inline frame. Las siguientes palabras claves tienen un significado especial:

• _self: Carga la respuesta en el contexto actual del navegador. Si no se especifica, este es su valor por defecto.
• _blank: Carga la respuesta en un nuevo contexto del navegador, por ejemplo, una nueva pestaña.
• _parent: Carga la respuesta en el contexto padre del actual contexto del navegador. Si no tiene, actuará como si su valor fuera _self.
• _top: Carga la respuesta en el contexto más alto del actual contexto del navegador. Si no tiene, actuará como si su valor fuera _self.

Sobreescribe el atributo target del elemento <form> al que pertenezca.

height  HTML5

 Si el atributo type es image, este atributo define la altura de la imagen que se mostrará de botón.

list  HTML5

Identifica una lista de opciones predefinidas sugeridas al usuario. El valor debe ser el id de un elemento <datalist> del mismo documento. El navegador mostrará solo las opciones válidas para este elemento <input>. Este atributo es ignorado cuando el atributo type es hidden, checkbox, radio, file o button.

max  HTML5

El máximo valor, número o fecha-hora, para el elemento <input>. No puede ser inferior al valor del atributo min.

maxlength  HTML5

Sólo si el valor del atributo type del elemento es text, email, search, password, tel o url. Especifica el máximo número de caracteres (Unicode) que el usuario puede introducir. Puede exceder el valor del atributo size. Si no se especifica, el usuario puede introducir un número ilimitado de caracteres. Si su valor es negativo, actuará por defecto, es decir, permite un número ilimitado de caracteres. La restricción se evalúa cuando el valor del atributo cambia.

min  HTML5

El mínimo valor, número o fecha-tiempo, para el elemento <input>. No puede ser superior al valor del atributo max.

multiple  HTML5

Este atributo de tipo Boolean indica si el usuario puede introducir más de un valor. Sólo si el atributo type es email o file; sino es ignorado.

name

El nombre del control o <input>. Este valor es enviado con el formulario.

pattern  HTML5

Expresión regular contra la que se comprobará el valor introducido en el control o <input>. El patrón debe coincidir con todo el valor introducido, no sólo un subconjunto. Usa el atributo title para añadir una descripción que ayude al usuario. Sólo si el valor del atributo type es text, search, tel, url o email; sino es ignorado.

placeholder  HTML5

Una sugerencia de lo que el usuario puede introducir en el control o <input>. El texto del atributo placeholder no debe contener saltos de línea ni retornos de carro. Sólo si el valor del atributo type es text, search, tel, url o email; sino es ignorado.

readonly

Atributo de tipo Boolean que impide al usuario modificar el valor del control o <input>. Este atributo es ignorado si el valor del atributo type es hidden, range, color, checkbox, radio, file o button.

required  HTML5

Especifica que el usuario debe introducir un valor en el <input> antes de enviar el formulario. No puede ser usado si el atributo type es hidden, image o button (submit, reset o button). Las pseudo-clases CSS :optional y :required serán aplicadas según sea apropiado.

selectionDirection  HTML5

La dirección en la que se seleccionó el texto. Devuelve "forward" si se seleccionó en el sentido comienzo-fin (tanto en escritura con sentido de izquierda a derecha como de derecha a izquierda), o "backward" si se realizón en el sentido contrario. Puede ser "none" si se desconoce la dirección de la selección.

size

Tamaño inicial del elemento <input>. Es un valor en pixeles a no ser que el atributo type sea text or password; en este caso, es el número de caracteres. Desde HTML5, sólo se aplica a los valores del atributo type de tipo text, search, tel, url, email o password; sino es ignorado. Su valor debe ser mayor que 0. Si no se especifica, su valor por defecto es 20.

src

Sólo si el valor del atributo type es image. Especifica la URI donde se encuentra la imagen que se mostrará como botón tipo submit.

step  HTML5

Usa los atributos min y max para limitar los incrementos con los cuales se pueden establecer los valores numéricos o de fecha-hora. Puede tomar el valor any o un número positivo de coma flotante. Si el valor del atributo no es any, el control acepta solo valores que sean múltiplos del valor de step mayores al mínimo.

tabindex elemento en HTML4 , global en HTML5

Indica la posición del elemento en la secuencia de pulsaciones de la tecla tabulador, en el documento actual.

usemap   HTML4 solo, obsoleto a partir de HTML5

El nombre del elemento <map>  que funciona como un mapa de imagen.

value

Valor inicial del elemento <input>. Es opcional a menos que el valor del atributo type sea radio o checkbox. Hay que tener en cuenta que cuando la página es recargada, Gecko e IE ignorarán el valor específico en el código HTML, si el valor fue cambiado antes de recargarla.

width  HTML5

 Si el atributo type es image, este atributo define el ancho de la imagen que se mostrará de botón.

x-moz-errormessage No estándar

Esta extensión de Mozilla te permite especificar el mensaje de error que es desplegado cuando un campo no es validado exitosamente.