Tipos de input (Atributos)

Atributos

Este elemento incluye los atributos globales, y los indicados a continuación.

type
El tipo de control a mostrar. Su valor predeterminado es text, si no se
especifica este atributo. Los posibles valores son:

 button: Botón sin un comportamiento específico.

 checkbox: Casilla de selección. Se debe usar el atributo value para
definir el valor que se enviará por este elemento. Se usa el
atributo checked para indicar si el elemento está seleccionado.
También se puede usar el atributo indeterminate (el cual solo se
puede establecer programaticamente) para indicar que la casilla
está en un estado indeterminado (en la mayoría de las
plataformas, se dibuja una línea horizontal a través de la casilla).
 color: HTML5 Control para espicificar un color. Una interfaz de
selección de color no requiere más funcionalidad que la de
aceptar colores simples como texto (más información).
 date: HTML5 Control para introducir una fecha (año, mes y día, sin
tiempo).
 datetime: HTML5 Control para introducir una fecha y hora (horas,
minutos, segundos y fracción de segundo), basado en la zona
horaria UTC. Esta característica ha sido removida de
WHATWG HTML.
 datetime-local: HTML5 Control para introducir fecha y hora, sin
zona horaria específica.
 email: HTML5 Campo para introducir una dirección de correo
electrónico. El valor introducido se valida para que contenga una
cadena vacía o una dirección de correo válida antes de
enviarse. Las pseudo-clases :valid y :invalid son aplicadas
segun corresponda.
 file: Control que permite al usuario seleccionar un archivo. Se
puede usar el atributo accept para definir los tipos de archivo que
el control podrá seleccionar.
 hidden: Control que no es mostrado en pantalla, pero cuyo valor es
enviado al servidor.
 image: Botón de envío de formulario con gráfico. Se debe usar el
atributo src para definir el origen de la imagen y el
atributo alt para definir un texto alternativo. Se puede usar los
atributos height y width para definir el tamaño de la imagen en
píxeles.
 month: HTML5 Control para introducir un mes y año, sin zona
horaria específica.
 number: HTML5 Control para introducir un número de punto
flotante.
 password: Control de línea simple cuyo valor permanece oculto. Se
puede usar el atributo maxlength para especificar la longitud
máxima del valor que se puede introducir.
 radio: Botón radio. Se debe usar el atributo value para definir el
valor que se enviará por este elemento. Se usa el
atributo checked para indicar si el elemento está seleccionado de
forma predeterminada. Los botones radio que tengan el mismo
valor para su atributo name están dentro del mismo "grupo de
botones radio". Solo un botón radio dentro de un grupo puede ser
seleccionado a la vez.
 range: HTML5 Control para introducir un número cuyo valor exacto
no es importante. Este control usa los siguientes valores
predeterminados si no se especifica cada atributo:
o min: 0
o max: 100
o value: min + (max - min) / 2, o min si max es menor que min
o step: 1
 reset: Botón que restaura los contenidos de un formulario a sus
valores predeterminados.
 search: HTML5 Cuadro de texto de línea simple para introducir
textos de búsqueda. Los saltos de línea son eliminados
automáticamente del valor introducido.
 submit: Botón que envía el formulario.
 [Link] para introducir un número telefónico. Los
saltos de línea son eliminados automáticamente del valor
introducido, pero no hay otra sintaxis forzada. Se pueden usar
atributos como pattern y maxlength para restringir los valores
introducidos en este control. Las pseudo-clases
CSS :valid y :invalid son aplicadas segun corresponda.
 text: Campo de texto de línea simple. Los saltos de línea son
eliminados automáticamente del valor introducido.
 time: HTML5 Control para introducir un valor de tiempo sin zona
horaria específica.
 url: HTML5 Campo para editar una URL. El valor introducido se
valida para que contenga una cadena vacía o una ruta URL
absoluta antes de enviarse. Los saltos de línea y espacios en
blanco al principio o al final del valor son eliminados
automáticamente. Se pueden usar atributos
como pattern y maxlength para restringir los valores introducidos
en el control. Las pseudo-clases :valid y :invalid son aplicadas
segun corresponda.
  week: HTML5 Control
para introducir una fecha que consiste en
número de semana del año y número de semana sin zona horaria
específica.
accept
Si el valor del atributo type es file, este atributo indica los tipos de
archivo que el servidor acepta, de otra manera será ignorado. El valor
debe ser una lista de tipos de contenido únicos, separados por coma:

Una extensión de archivo, comenzando por el caracter STOP

(U+002E). (Ejemplos: ".jpg,.png,.doc")
 Un tipo MIME válido sin extensiones
 audio/*, que representa archivos de audio HTML5
 video/*, que representa archivos de vídeo HTML5
 image/*, que representa archivos de imagen HTML5
accesskey sólo HTML 4, Obsoleto HTML5
Un caracter que el usuario puede presionar para establecer el cursor en
el control. Este atributo es global en HTML5.

mozactionhint
Especifica una "pista de acción" usada para determinar cómo etiquetar la
tecla "enter" en dispositivos móviles con teclados virtuales. Los valores
soportados son go, done, next, search, y send. Esto queda
automáticamente mapeado al texto apropiado y no son sensibles al uso
de mayúsculas.

autocapitalize
Atributo no estándar usado por Chrome e iOS Safari Mobile, el cual
controla si se deben cambiar los textos a mayúsculas automáticamente
mientras son introducidos/editados por el usuario, y la forma en que esto
se hará. Los valores no obsoletos están disponibles en iOS5 y superior.
Los valores posibles son:

 none: Deshabilita completamente las mayúsculas automáticas.

 sentences: Cambia automáticamente a mayúscula la primera letra
de la sentencia.
words: Cambia automáticamente a mayúscula la primera letra de
cada palabra.
 characters: Cambia automáticamente a mayúscula todos los
caracteres.
 on: Obsoleto desde iOS 5.
 off: Obsoleto desde iOS 5.
Documentation sobre autocapitalize en la Referencia HTML de Safari
autocomplete HTML5
Este atributo indica si el valor del control puede ser completado
automáticamente por el navegador.
Los valores posibles son:

 off: El usuario debe explícitamente introducir un valor en este

campo para cualquier uso, o el documento provee su propio
método de auto-completado. El navegador no completa
automáticamente lo introducido.
 on: Se permite al navegador completar automáticamente el valor
basado en los valores que se han introducido previamente. Sin
embargo, on no provee mayor información sobre qué clase de
datos podría esperar el usuario introducir.
 name: Nombre completo.
 honorific-prefix: Prefixo o título (Ejemplos: "Sr.", "Sra.", "Dr.",
"Srita.").
 given-name: Nombre de pila.
 additional-name: Segundo nombre.
 family-name: Apellido.
 honorific-suffix: Sufijo (Ejemplos: "Hijo", "Señor", "II").
 nickname: Apodo.
 email: Correo electrónico.
 username: Nombre de usuario.
 new-password: Nueva contraseña (por ejemplo, al crear una cuenta
o cambiar la contraseña).
 current-password: Contraseña actual.
 organization-title: Título de organización (Ejemplos: "Ingeniero
de Software", "Vicepresidente", "Director General Adjunto").
 organization: Organización.
 street-address: Calle (en dirección).
 address-line1, address-line2, address-line3, address-level4, 
address-level3, address-level2, address-level1: Valores para
dirección.
 country: País.
 country-name: Nombre del país.
 postal-code: Código postal.
 cc-name: Nombre completo en un instrumento de pago.
 cc-given-name: Nombre de pila en un instrumento de pago.
 cc-additional-name: Segundo nombre en un instrumento de pago.
 cc-family-name: Apellido en un instrumento de pago.
 cc-number: Código de identificación de un instrumento de pago(por
ejemplo, el número de tarjeta de crédito).
 cc-exp: Fecha de expiración de un instrumento de pago.
 cc-exp-month: Mes de expiración en un instrumento de pago.
 cc-exp-year: Año de expiración en un instrumento de pago.
 cc-csc: Código de seguridad en un instrumento de pago.
 cc-type: Tipo de instrumento de pago (por ejemplo, Visa).
  transaction-currency: Tipo de moneda de la transacción.
 transaction-amount: Monto de la transacción.
 language: Idioma preferido, etiqueta BCP 47 válida.
 bday: Fecha de cumpleaños.
 bday-day: Día de cumpleaños.
 bday-month: Mes de cumpleaños.
 bday-year: Año de cumpleaños.
 sex: Sexo (ejemplos, Femenino, Female, Fa'afafine), textolibre,
sin líneas nuevas.
 tel: Teléfono.
 url: Dirección web correspondiente a la compañía, persona,
dirección o información de contacto en los demás campos
asociados a éste.
 photo: Fotografía, ícono u otra imagen correspondiente a la
compañía, persona, dirección o información de contacto en los
otros campos asociados a éste.
Véase el Estándar WHATWG para információn más detallada.

Si el atributo autocomplete no está especificado en un elemento input,

el navegador usa el atributo autocomplete del formulario al que
pertenece el elemento <input>, es decir, el elemento form del cual es
descendiente el elemento <input>, o aquél cuyo id está especificado en
el atributo form del elemento input. Para mayor información, véase el
atributo autocomplete en <form>.

El atributo autocomplete también controla si Firefox, a diferencia de

otros navegadores, persistirá el estado deshabilitado dinámico, y (si
aplica) la selección dinámica de un <input> a través de las cargas de la
página. La característica de persistencia está habilitada de forma
predeterminada. Estableciendo el valor de autocomplete como off se
deshabilita esta característica. Esto funciona aún cuando el
atributo autocomplete no se aplicaría normalmente al <input> en virtud
de su atributo type. Véase error 654072.

Para navegadores más modernos (incluyendo Firefox 38+, Google

Chrome 34+, IE 11+), establecer el atributo autocomplete no previene
que el administrador de contraseñas del navegador le pregunte al
usuario si desea guardar la información de inicio de sesión (usuario y
contraseña), ni tampoco, de permitirlo el usuario, que se autocompleten
estos campos la próxima vez que el usuario visite la página. Véase El
atributo autocomplete y campos de inicio de sesión.

autocorrect
Es un atributo no estándar, soportado por Safari, que es usado para
controlar si la autocorrección debe estar habilitada cuando el usuario
está introduciendo/editando el texto de un <input>. Los valores posibles
de este atributo son:

 on: Habilita la autocorrección

 off: Deshabilita la autocorrección
Documentación de autocorrect en la Referencia HTML de Safari
autofocus HTML5
Este atributo Booleano permite especificar que un control de formulario
tenga el cursor cuando la página se carga, a menos que el usuario lo
reemplace, por ejemplo, escribiendo en un control diferente. Solo un
elemento de formulario en un mismo documento puede tener el
atributo autofocus, el cual es Booleano. No puede ser aplicado si el
atributo type tiene valor hidden (es decir, no se puede establecer
automáticamente el cursor en un control oculto). Nótese que el cursor se
podría establecer en el control antes de disparar el
evento DOMContentLoaded.

capture
Cuando el valor del atributo type es file, la presencia de este atributo
Booleano indica que se le dará preferencia a la captura del medio
directamente del ambiente del dispositivo, usando algún mecanismo de
captura de medios.

checked
Cuando el valor del atributo type es radio o checkbox, la presencia de
este atributo Booleano indica que el control está seleccionado de forma
predeterminada. De lo contrario, será ignorado.

En Firefox, a diferencia de otros navegadores, de forma

predeterminada, se persiste el estado de selección dinámico en
un <input> a través de las cargas de la página. Para controlar esta
característica se usa el atributo autocomplete.

disabled
Este atributo Booleano indica que el control no está disponible para
interacción. En particular, el evento click no será invocado en controles
deshabilitados. De igual forma, el valor de un control deshabilitado no es
enviado con el formulario.

En Firefox, a diferencia de otros navegadores, de forma

predeterminada, se persiste el estado de selección dinámico en
un <input> a través de las cargas de la página. Para controlar esta
característica se usa el atributo autocomplete.

form HTML5
El elemento form al que está asociado el elemento (su formulario
propietario). El valor del atributo debe ser el id de un elemento <form> en
el mismo documento. Si el atributo no es especificado, este
elemento <input> deberá ser descendiente de un elemento <form>. Este
atributo permite poner elementos <input> en cualquier parte dentro de un
documento, no solamente como descendientes de su formulario. Un
input puede ser asociado sólo con un formulario.

formaction HTML5
El URI de un programa que procesa la información enviada por el
elemento input, cuando es un botón de tipo submit o image. Si se
especifica, reemplaza al atributo action del formulario al que pertenece el
elemento.

formenctype HTML5
Si el elemento es de tipo submit o image, este atributo especifica el tipo de
contenido que es usado para enviar el formulario al servidor. Los valores
posibles son:

 application/x-www-form-urlencoded: El valor predeterminado si el

atributo no es especificado.
 multipart/form-data: Se usa este valor cuando se tiene un
elemento <input> con atributo type de valor file.
 text/plain
Si este atributo está especificado, reemplaza al atributo enctype del
formulario al que pertenece el elemento.

formmethod HTML5
Si el elemento input es un botón de tipo submit o image, este atributo
especifica el método HTTP que el navegador usará para enviar el
formulario. Los valores posibles son:

 post: Los datos del formulario son incluidos en el cuerpo del

formulario, y enviados al servidor.
 get: Los datos del formulario son añadidos al URI del form con un
símbolo '?' como separador, y el URI resultante es enviado al
servidor. Se usa este método cuando el formulario no tiene
efectos secundarios y contiene solamente caracteres ASCII.
Si este atributo está especificado, reemplaza al atributo method del
formulario al que pertenece el elemento.

formnovalidate HTML5
Si el elemento input es de tipo submit o image, este atributo Booleano
especifica que el formulario no será validado cuando se envíe. Si
este atributo está especificado, reemplaza al atributo novalidate del
formulario al que pertenece el elemento.

formtarget HTML5
Si el elemento input es de tipo submit o image, este atributo es el nombre
o palabra clave que indica dónde mostrar la respuesta que se recibe
después de enviar el formulario. Este es el nombre, o palabra clave, de
un contexto de navegación (por ejemplo, pestaña, ventana o frame
incrustado). Si este atributo está especificado, reemplaza al
atributo target del formulario al que pertenece el elemento. Las
siguientes palabras clave tienen significado especial:

 _self: Carga la respuesta en el mismo contexto de navegación

actual. Este valor es el predeterminado cuando no se especifica el
atributo.
 _blank: Carga la respuesta en un contexto de navegación nuevo.
 _parent: Carga la respuesta en el contexto de navegación padre
del actual. Si no hay contexto padre, se comporta de la misma
forma que _self.
 _top: Carga la respuesta en el contexto de navegación principal
(es decir, el contexto que es ancestro del actual y que no tenga
padre). Si no hay contexto padre, se comporta de la misma forma
que _self.
height HTML5
Si el valor del atributo type es image, este atributo define la altura de la
imagen mostrada para el botón.

incremental
Es un atributo no estándar, soportado por WebKit (Safari) y Blink
(Chrome), que solo aplica cuando el atributo type es search. Si el atributo
está presente, sin importar su valor, el <input> dispara
eventos search conforme el usuario edita el valor. El evento solo es
disparado después de que un tiempo definido en implementación haya
pasado desde la última vez que se presionó una tecla. Si el atributo está
ausente, el evento search solo se disparará cuando el usuario
explícitamente inicie una búsqueda (por ejemplo, presionando la tecla
Enter dentro del control).  Documentación de incremental en la
Referencia HTML de Safari

inputmode HTM
L5
Una pista para el navegador sobre qué teclado mostrar. Este atributo
aplica cuando el valor del atributo type es text, password, email, o url.
Los valores posibles son:
  verbatim: Alfanumérico, sin contenido con significado, como
nombres de usuario o contraseñas.
 latin: Escritura en caracteres de latín, en el lenguaje de elección
del usuario, con ayuda de escritura, como predicción de texto.
Para comunicación humano-computadora, como en cuadros de
búsqueda.
 latin-name: Como latin, pero con nombres de personas.
 latin-prose: Como latin, pero con ayuda de escritura más
agresiva. Para comunicación humano-humano, como mensajería
instantánea o correo electrónico.
 full-width-latin: Como latin-prose, pero para idiomas
secundarios del usuario.
 kana: Escritura en kana o romaji, típicamente escritura en
hiragana, usando caracteres de anchura completa, con soporte
para conversión a kanji. Usado para escritura en japonés.
 katakana: Escritura en katakana, usando caracteres de anchura
completa, con soporte para conversión a kanji. Usado para
escritura en japonés.
 numeric: Escritura en caracteres numéricos, incluyendo teclas para
los dígitos de 0 a 9, el separador de miles segun las preferencias
del usuario, y el caracter para indicar números negativos.
Destinado a códigos numéricos, por ejemplo, números de tarjeta
de crédito. Para valores numéricos reales, es preferible usar
<input type="number"> en lugar de este atributo.
 tel: Escritura de teléfonos, incluído las teclas de asterisco y gato.
Es preferible el uso de <input type="tel"> en lugar de este atributo.
 email: Escritura de correo electrónico. Es preferible el uso de
<input type="email"> en lugar de este atributo.
 url: Escritura de URL. Es preferible el uso de <input type="url">
en lugar de este atributo.
list HTML
5
Identifica una lista de opciones predefinidas como sugerencias al
usuario. El valor debe ser el id de un elemento <datalist> en el mismo
documento. El navegador muestra solamente las opciones que son
válidas para el elemento. Este atributo es ignorado cuando el
atributo type tiene valor hidden, checkbox, radio, file, o algun tipo de
botón.

max HTM
L5
El valor máximo (numérico o fecha-hora) para este elemento, el cual no
debe ser menor que su valor mínimo (atributo min).

maxle
ngth
Si el valor del atributo type es text, email, search, password, tel, o url,
este atributo especifica el número máximo de caracteres (en puntos de
código Unicode) que el usuario puede introducir. Para los otros tipos de
control, es ignorado. Puede exceder el valor del atributo size. Si no se
especifica, el usuario puede introducir una cantidad ilimitada de
caracteres. Especificar un número negativo resulta en el comportamiento
predeterminado (es decir, el usuario puede introducir una cantidad
ilimitada de caracteres). La restricción es evaluada sólo cuando el valor
del atributo ha sido modificado.

m
i
n 
H
T
M
L
5
El valor mínimo (numérico o fecha-hora) para este elemento, el cual no
debe ser mayor a su valor máximo (atributo max).

m
i
n
l
e
n
g
t
h 
H
T
M
L
5
Si el valor del atributo type es text, email, search, password, tel, o url,
este atributo especifica la longitud mínima de caracteres (en puntos de
código Unicode) que el usuario puede introducir. Para los otros tipos de
control, es ignorado.

multi
ple 
HTM
L5
Este atributo Booleano indica si el usuario puede introducir más de un
valor. Este atributo aplica cuando el atributo type es email o file, y en
caso contrario es ignorado.
 name
El nombre del control, el cual es enviado con los datos del formulario.

pattern HT
ML5
Una expresión regular contra la que el valor es evaluado. El patrón debe
coincidir con el valor completo, no solo una parte. Se puede usar el
atributo title para describir el patrón como ayuda al usuario. Este atributo
aplica cuando el atributo type es text, search, tel, url, email, o password,
y en caso contrario es ignorado. El lenguaje de expresión regular es el
mismo que el algoritmo RegExp de JavaScript, con el parámetro 'u' que
permite tratar al patrón como una secuencia de código Unicode. El
patrón no va rodeado por diagonales.

placeholder HT
ML5
Una pista para el usuario sobre lo que puede introducir en el control. El
texto no debe contener saltos de línea.

Nota: No se debe usar el atributo placeholder en lugar de un

elemento <label>, pues sus propósitos son diferentes. El
elemento <label> describe el rol del elemento en el formulario (es decir,
indica qué tipo de información se espera), y el atributo placeholder es
una pista sobre el formato que debe tener el contenido. Hay casos en los
que el atributo placeholder no es visible para el usuario, por lo que el
formulario debe ser comprensible para el usuario aunque este atributo no
esté presente.
readonly HTML5
Este atributo indica que el usuario no puede modificar el valor del control.
El valor del atributo es irrelevante. De ser necesario el acceso lectura-
escritura al valor, no se debe agregar el atributo "readonly". Es ignorado
si el atributo type es hidden, range, color, checkbox, radio, file, o de tipo
botón (como button o submit).

required HTML5
Este atributo especifica que el usuario debe llenar el control antes de
enviarlo al formulario. No puede ser usado cuando el
atributo type es hidden, image, o de tipo botón (submit, reset, o button).
Las pseudo-clases :optional y :required se aplicarán al campo según
sea apropiado.

results
Este es un atributo no estándar, soportado por Safari, que sólo aplica
cuando el atributo type es search. Es usado para controlar el máximo
número de entradas que se deben mostrar en el listado nativo
del <input> de búsquedas pasadas. Este valor debe ser un número
entero no negativo.

selectionDirecti
La dirección en la que ocurre la selección. Esto es "forward" (hacia
adelante) si la selección fue hecha de izquierda a derecha en una
escritura LTR o izquierda a derecha en una escritura RTL, o "backward"
(hacia atrás) si la selección fue hecha de forma opuesta. Puede ser
"none" si la dirección de selección es desconocida.

selectionEnd
La separación dentro del contenido de texto del último caracter
seleccionado. Si no hay selección, este valor indica la separación para el
caracter que sigue a la posición actual del cursor (es decir, la posición
que el siguiente caracter que se escriba ocupará).

selectionStart
La separación dentro del contenido del primer caracter seleccionado. Si
no hay selección, este valor indica la separación para el caracter que
sigue a la posición actual del cursor (es decir, la posición que el siguiente
caracter que se escriba ocupará).

size
El tamaño inicial del control. Este valor es en píxeles, a menos que el
atributo type sea text o password, en cuyo caso será el número entero de
caracteres. A partir de HTML5, este atributo aplica sólo cuando el
atributo type es text, search, tel, url, email, o password, de otro modo es
ignorado. Además, el tamaño debe ser mayor a cero. Si no se especifica
un tamaño, se usa un valor predeterminado de 20. HTML5 simplemente
establece que "el agente usuario debe asegurarse que al menos esa
cantidad de caracteres sea visible", pero los caracteres pueden tener
anchuras diferentes en ciertas fuentes. En algunos navegadores, una
cadena con x caracteres no será completamente visible aunque su
tamaño esté definido con un mínimo de x.

spellcheck HTML
Si se establece este atributo con valor true, se está indicando que se
debe revisar la ortografía y gramática del elemento. El
valor default indica que el elemento va a actuar acorde al
comportamiento predeterminado del navegador, posiblemente basado en
el valor del atributo spellcheck de su elemento padre. El
valor false indica que el elemento no debe ser revisado.

src
 Si el atributo type es image, este atributo especifica el URI para la
ubicación de la imagen a mostrar en el botón de envío gráfico. En caso
contrario, es ignorado.

step HTML5
Trabaja con los atributos min y max, para limitar el incremento de
valores numéricos o de fecha-hora. Puede ser el valor any o un número
positivo de punto flotante. Si no se establece este atributo como any, el
control acepta solamente valores múltiplos del valor del atributo, mayores
al mínimo.

tabindex específ
global en HTML
La posición del elemento en el orden de navegación por la tecla Tab
dentro del documento.

usemap solo para
El nombre de un elemento <map> usado como mapa de imagen.

value
El valor inicial del control. Este atributo es opcional, excepto cuando el
atributo type es radio o checkbox.
Nótese que cuando se recarga la página, Gecko e IE ignorarán el valor
especificado en el código fuente HTML, si el valor fue modificado antes
de recargar.

webkitdirectory 
Este atributo Booleano indica si el selector usado cuando el
atributo type es file debe permitir la selección de directorios solamente.

width HTML5
Si el valor del atributo type es image, este atributo define la anchura de la
imagen mostrada en el botón.

x-moz-errormessa
Esta extensión de Mozilla permite especificar el mensaje de error cuando
un campo no es validado exitosamente.

Notas

Introducción de archivos
Nota: A partir de Gecko 2.0, llamar al método click() en un elemento <input> de
tipo "file" abre el selector de archivos y permite al usuario seleccionar archivos.
Véase Utilizar ficheros desde aplicaciones web para ejemplos y más detalles.
No se puede establecer el valor de un selector de archivos desde un script. Hacer
algo como lo siguiente no tiene efecto alguno:

var e = getElementById("someFileInputElement");

[Link] = "foo";

Mensajes de error

Para que Firefox presente un mensaje de error personalizado cuando la validación

de un campo falla, se puede usar el atributo x-moz-errormessage:

<input type="email" x-moz-errormessage="Por favor, especifique una dirección de

correo válida.">

Nótese, sin embargo, que esto no es estándar, y no tendrá efecto en otros

navegadores.

Ejemplos

Ejemplo 1: Cuadro de texto simple

HTML

<p>Simple input box</p>

<input type="text" value="Type here">

Resultado

Ejemplo 2: Escenario de uso común

HTML
<p>A common form that includes input tags</p>

<form action="[Link]" method="get">

<label>First name: <input type="text"></label><br>

<label>Last name: <input type="text"></label><br>

<label>E-mail: <input type="email"></label><br>

<input type="submit" value="Submit">

</form>

Resultado

Usando mozactionhint en Firefox mobile

Se puede usar el atributo mozactionhint para especificar el texto para la etiqueta de

la tecla Enter en el teclado virtual cuando el formulario es mostrado en Firefox
mobile. Por ejemplo, para mostrar una etiqueta "Next", se puede hacer esto:

<input type="text" mozactionhint="next">

El resultado es:
Regionalización
Los valores permitidos para ciertos tipos de <input> dependen de la región. En
algunos casos, 1,000.00 is a valid number, mientras en otros la manera válida de
escribir un número es 1.000,00.

Firefox usa la siguiente heurística para determinar la región con la cual validar los
datos introducidos por el usuario (por lo menos para type="number"):

 Intenta con el lenguaje especificado por el atributo lang/xml:lang del

elemento o de sus elementos ascendentes.
 Intenta con el lenguaje especificado en algun encabezado HTTP Content-
Language o
 Si ninguno está especificado, usa la región definida en el navegador.
Especificaciones

Especificación Estatus Co

HTML Living Standard Living Standard

La definición de '<input>' en esta especificación.

HTML Media Capture Recommendation Añ

La definición de '<input capture>' en esta especificación.

HTML5 Recommendation
La definición de '<input>' en esta especificación.

HTML 4.01 Specification Recommendation

La definición de '<form>' en esta especificación.

Compatibilidad de navegadores
We're converting our compatibility data into a machine-readable JSON
format. This compatibility table still uses the old format, because we haven't yet
converted the data it contains. Find out how you can help!
 Escritorio
 Móvil
Internet
Firefox (Gecko)
Característica Chrome [28] Explore Opera Safari
r

Soporte básico 1.0 1.0 (1.7 o anterior) (Yes)[1] 1.0 1.0

type 1.0 1.0 (1.7 o anterior) 2 1.0 1.0

type=button 1.0 1.0 (1.7 o anterior) 3 1.0 1.0

1.0 (1.7 o anterior)

type=checkbox 1.0 2 1.0 1.0
3.6 (1.9.2)[2]

Sin Sin
type=color 21.0 29.0 (29.0) 11.01
soporte soporte

Sin
type=date 5.0[24] Sin soporte[3] 10.62 (Yes)[4]
soporte
 Sin Sin
type=datetime Sin soporte[3] 10.62 (Yes)[4]
soporte[4] soporte

type=datetime- Sin
5.0 Sin soporte[3] 10.62 (Yes)[4]
local soporte

type=email 5.0 4.0 (2.0) 10 10.62 ?

type=file 1.0 1.0 (1.7 o anterior) 3.02 1.0 1.0

type=hidden 1.0 1.0 (1.7 o anterior) 2 1.0 1.0

1.0 (1.7 o anterior)

type=image 1.0 [5] 2 1.0 1.0

Sin
type=month 5.0 Sin soporte[6] 10.62 (Yes)[4]
soporte

type=number 6.0[7] 29.0 (29.0) 10[4] 10.62 (Yes)

type=password 1.0 1.0 (1.7 o anterior) 2 1.0 1.0

 1.0 (1.7 o anterior)
type=radio 1.0 2 1.0 1.0
3.6 (1.9.2)[2]

type=range 5.0 23.0 (23.0) 10 10.62[8] (Yes)

type=reset 1.0 1.0 (1.7 o anterior) 2 1.0 1.0

type=search 5.0 4.0 (2.0) 10 11.01 (Yes)

type=submit 1.0 1.0 (1.7 o anterior) 2 1.0 1.0

type=tel 5.0 4.0 (2.0) 10 11.01 ?

type=text 1.0 1.0 (1.7 o anterior) 2 1.0 1.0

Sin
type=time 5.0 Sin soporte[3] 10.62 (Yes)[4]
soporte
type=url 5.0 4.0 (2.0) 10 10.62 ?

Sin
type=week 5.0 Sin soporte[3] 10.62 (Yes)[4]
soporte

accept=[file Sin
(Yes) Sin soporte 10 ?
extension] soporte

accept=[MIME Sin
8.0 16.0 (16.0) 10 10
type] soporte

Sin Sin
accept=audio/* (Yes) 4.0 (2.0)[9] 10
soporte soporte

Sin Sin
accept=video/* (Yes) 4.0 (2.0)[10] 10
soporte soporte

accept=image/ Sin Sin

(Yes) 4.0 (2.0)[11] 10
* soporte soporte

accept=[. +
? 37.0 (37.0) ? ? ?
ext]
accesskey 1.0 (Yes) 6 1.0 ?

Sin Sin Sin Sin

mozactionhint 4.0 (2.0)
soporte soporte soporte soporte

autocapitalize 43 ? ? ? (Yes)

autocomplete 17.0 4.0 (2.0) 5 9.6 5.2

autofocus 5.0 4.0 (2.0) 10 9.6 5.0

Chrome
for
capture ? ? ? ?
Android
(0.16)

checked 1.0 1.0 (1.7 o anterior) 2 1.0 1.0

1.0 (1.7 o anterior)

disabled 1.0 [25] 6 1.0 1.0
form 9.0 4.0 (2.0) ? 10.62 ?

formaction 9.0 4.0 (2.0) 10 10.62 5.2

formenctype 9.0 4.0 (2.0) 10 10.62 ?

formmethod 9.0 4.0 (2.0) 10 10.62 5.2

formnovalidate 5.0[12] 4.0 (2.0) 10 10.62 ?

formtarget 9.0 4.0 (2.0) 10 10.62 5.2

height 1.0 16.0 (16.0) ? 1.0 ?

Sin Sin
incremental (Yes) Sin soporte (Yes)
soporte soporte

Sin Sin Sin Sin

inputmode Sin soporte
soporte soporte soporte soporte
 Sin
list 20.0 4.0 (2.0) 10 9.6
soporte

max 5.0 16.0 (16.0) ? 10.62 ?

maxlength 1.0 1.0 (1.7 o anterior) 2 1.0 1.0

min 5.0 16.0 (16.0) ? 10.62 ?

minlength 40.0 ? ? ? ?

1.0
3.6 (1.9.2)[14]
multiple 1.0[13] 10 10.62[14] ?
(Yes)[15]
11.01[15]

name 1.0 1.0 (1.7 o anterior) 2 1.0 1.0

Sin
pattern 5.0 4.0 (2.0) 10 9.6
soporte

placeholder 10.0 4.0 (2.0) 10 11.00 5.0

readonly 1.0 1.0 (1.7 o anterior) 6[16] 1.0 1.0

5.0 Sin
required 4.0 (2.0) 10 9.6
10[17] soporte

size 1.0 1.0 (1.7 o anterior) 2 1.0 1.0

spellcheck 10.0 3.6 (1.9.2) 10 11.0 4.0

src 1.0 1.0 (1.7 o anterior) 2 1.0 1.0

step 6.0 16.0 (16.0) 10 10.62 5.0

tabindex 1.0 1.0 (1.7 o anterior) 6[18] (Yes) ?

webkitdirector
(Yes) 49.0 (49.0) ? (Yes) (Yes)
y
width 1.0 16.0 (16.0) ? 1.0 ?

Firefox
Opera Safari
Característica Android Mobile IE Mobile
Mobile Mobile
(Gecko)

Soporte básico (Yes) 4.0 (2.0) (Yes) (Yes) (Yes)

type (Yes) (Yes) (Yes) (Yes) (Yes)

type=button (Yes) (Yes)[27] (Yes) (Yes) (Yes)

type=checkbox (Yes) (Yes) (Yes) (Yes) (Yes)

27.0 (27.0
type=color ? ? (Yes) ?
)

Sin Sin Sin

type=date 10.62 5.0[23]
soporte soporte soporte

type=datetime Sin Sin Sin 10.62 (Yes)[23]

 soporte soporte soporte

type=datetime- Sin Sin Sin

10.62 (Yes)[23]
local soporte soporte soporte

type=email ? 4.0 (2.0) ? (Yes) 3.1[19]

type=file ? ?[27] ? ? (Yes)[21]

type=hidden (Yes) (Yes) (Yes) (Yes) (Yes)

type=image (Yes) (Yes) (Yes) (Yes) (Yes)

Sin Sin Sin

type=month 10.62 (Yes)[23]
soporte soporte soporte

29.0
type=number 2.3 ? (Yes) 4.0[19]
(29.0)

type=password (Yes) (Yes) (Yes) (Yes) (Yes)[22]

type=radio (Yes) (Yes) (Yes) (Yes) (Yes)

Sin
type=range ? ? (Yes) 5.0
soporte

type=reset (Yes) (Yes) (Yes) (Yes) (Yes)

type=search ? 4.0 (2.0) ? 10.62 4.0[22]

type=submit (Yes) (Yes)[27] (Yes) (Yes) (Yes)

type=tel 2.3 4.0 (2.0) ? 10.62 3.1[22]

type=text (Yes) (Yes)[27] (Yes) (Yes) (Yes)[22]

Sin Sin Sin

type=time 10.62 (Yes)[23]
soporte soporte soporte
type=url ? 4.0 (2.0) ? 10.62 3.1[19]

Sin Sin Sin

type=week 10.62 (Yes)
soporte soporte soporte

accept=[MIME
? ? ? ? ?
type]

accept=audio/* ? ? ? ? ?

accept=image/
? ?[26] ? ? ?
*

accept=video/* ? ? ? ? ?

accept=[. + 37.0
? ? ? ?
ext] (37.0)

accesskey ? ? ? ? ?

autocomplete ? 4.0 (2.0) (Yes) (Yes) (Yes)

autofocus 3.2 4.0 (2.0) ? (Yes) ?

10.0
capture 3.0 ? ? 6.0
(10.0)

checked (Yes) (Yes) (Yes) (Yes) (Yes)

disabled (Yes) 4.0 (2.0) (Yes) (Yes) (Yes)

form ? ? ? ? ?

formaction ? 4.0 (2.0) ? 10.62 5.0

formenctype ? ? ? ? ?

formmethod ? 4.0 (2.0) ? 10.62 5.0

formnovalidate ? 4.0 (2.0) ? 10.62 ?

formtarget ? 4.0 (2.0) ? 10.62 5.0

16.0
height ? ? ? ?
(16.0)

Sin
list 4.0 (2.0) ? (Yes) ?
soporte

16.0
max ? ? 10.62 ?
(16.0)[20]

maxlength (Yes) 4.0 (2.0) (Yes) (Yes) (Yes)

16.0
min ? ? 10.62 ?
(16.0)[20]

Sin
minlength ? ? 27.0 ?
soporte
multiple ? (Yes) ? (Yes) ?

name (Yes) 4.0 (2.0) (Yes) (Yes) 1.0

pattern ? 4.0 (2.0) ? (Yes) (Yes)

placeholder 2.3 4.0 (2.0) ? 11.10 4

readonly (Yes) 4.0 (2.0) (Yes) (Yes) (Yes)

required ? (Yes) ? (Yes) ?

size (Yes) 4.0 (2.0) (Yes) (Yes) (Yes)

spellcheck ? 4.0 (2.0) ? 11.0 ?

src ? ? ? ? ?

step ? 16.0 ? 10.62 ?

 (16.0)[20]

tabindex ? ? ? ? ?

webkitdirector 49.0
(Yes) ? (Yes) (Yes)
y (49.0)

16.0
width ? ? ? ?
(16.0)

[1] Fue implementado en la versión 2 o inferior.

[2] Implementado para valor indeterminate.

[3] Esta característica todavía no está implementada. Véase error 888320.

[4] Es reconocido, pero no tiene UI.

[5] Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) solo envía las
coordenadas X e Y cuando se presiona, sin enviar nombre/valor del elemento.

[6] Esta característica todavía no está implementada. Véase error 888320.

[7] Regionalización en Chrome 11.

[8] Opera 11.01 añadió soporte para un valor predeterminado.

[9] Filtros para estas extensiones de archivo de audio: .aac, .aif, .flac, .iff, .m4a,
.m4b, .mid, .midi, .mp3, .mpa, .mpc, .oga, .ogg, .ra, .ram, .snd, .wav, .wma.
[10] Filtros para estas extensiones de archivo de video: .avi, .divx, .flv, .m4v,
.mkv, .mov, .mp4, .mpeg, .mpg, .ogm, .ogv, .ogx, .rm, .rmvb, .smil, .webm, .wmv,
.xvid

[11] Filtros para estas extensiones de archivo de imagen: .jpe, .jpg, .jpeg, .gif,
.png, .bmp, .ico, .svg, .svgz, .tif, .tiff, .ai, .drw, .pct, .psp, .xcf, .psd, .raw

[12] En 6.0 solo funciona con el tipo de documento HTML5, el soporte para
validación en 7.0 fue deshabilitado, y rehabilitado en 10.0.

[13] Soportado para type="file" y type="email" desde la versión 5.0.

[14] Soportado para type="file".

[15] Supported for type="email".

[16] No está presente para type="checkbox" y type="radio".

[17] Soportado para el elemento <select>.

[18] Elementos con tabindex > 0 no son navegables.

[19] Sin validación, pero provee un teclado específico. Safari Mobile para iOS
aplica un estilo predeterminado de opacity: 0.4 para deshabilitar los
elementos <input> textuales. Los demás navegadores mayores no comparten este
estilo particular actualmente.

[20] La interfaz podría permanecer sin implementarse.

[21] La carga de archivos no funcionaba en Mobile Safari para iOS 8.0 y 8.0.1. Este
bug fue corregido en iOs 8.0.2.

[22] Safari Mobile para iOS aplicaba un estilo predeterminado de opacity: 0.4 para
deshabilitar los elementos <input> textuales. Los demás navegadores mayores no
comparten este estilo particular actualmente.

[23] En Safari Mobile para iOS, la configuración display: block en

un <input> con type="date", type="time", type="datetime", type="datetime-local",
o type="month" causa que el texto dentro del <input> se desalinee verticalmente.
Véase WebKit bug 139848.
[24] Desde Chrome 39, un <input> con type="date" estilizado con display: table-
cell; width: 100%; tendrá un valor para min-width impuesto por Chrome, y no
puede reducirse a un valor inferior a esa anchura mínima. Véase Chromium bug
#346051.

[25] De forma predeterminada, Firefox, a diferencia de otros

navegadores, persistirá el estado de deshabilitado dinámico y (si aplica), la
selección de elementos dinámica de un <input> a través de las cargas de páginas.
Estableciedo el valor del atributo autocomplete como off deshabilita esta
característica. Esto funciona aun cuando el atributo autocomplete no aplicaría
normalmente al <input> debido a su atributo type. Véase error 654072.

[26] A partir de Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6), Firefox
para Android permite capturar imágenes usando la cámara para posteriormente
cargarlas, sin necesidad de dejar el navegador. Los desarrolladores Web pueden
implementar estar característica simplemente estableciendo el valor del
atributo accept como image/* en el elemento <input> con type="file".

[27] Firefox para Android establece un gradiente predeterminado en background-

image para todos los inputs con type="file". Esto puede ser deshabilitado
usando background-image: none;. También establece un valor para border en los
mismos.

[28] Previo a Firefox 51, selectionStart y selectionEnd devolvían 0 cuando no había

selección. Ahora devuelven correctamente la separación del caracter siguiente a la
posición actual del cursor, donde se insertará el siguiente caracter.