Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Este articulo necesita una revisión editorial. Cómo puedes ayudar.

Resumen

Edit section

El elemento input (<input>) es usado para crear controles interactivos para formularios basados en la web.

Uso

Edit section

Categorías de Contenidos Flow contentphrasing content; contenido interactivo (sino esta oculto); listedlabelablesubmittable,resettableform-associated element.
Contenido Permitido Ninguno, éste es un elemento vacío.
Etiqueta de Omisión Debe tener una etiqueta de inicio y no una etiqueta de fin.
Normativa de Documentos HTML 5, section 4.10.7HTML 4.01, section 17.4

Atributos

Edit section

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

type

     El "type" de control a mostrar.  Si este atributo no es especificado tomará el valor de "text" por defecto. Los posible 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 que 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 imágen y el atributo alt para definir un texto alternativo por si la imágen no se muestra. Puedes usar los atributos widthheight para definir el tamaño de la imágen en píxeles.
  • monthHTML5 Control para poder rellenar el campo con un mes y año, sin zona horaria.
  • numberHTML5 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 se 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 estan en el mismo "grupo de botones radio", por lo que solo una opción puede ser seleccionada a la vez.
  • rangeHTML5 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
    • valuemin + (max-min)/2, or min if max is less than min
    • step: 1
  • reset:  Botón que resetea el contenido del formulario a sus valores iniciales por defecto.
  • searchHTML5 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.
  • telHTML5 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.
  • timeHTML5 Control para poder rellenar el campo con un valor en formato tiempo pero sin esecificar zona horaria.
  • urlHTML5 Control para poder rellenar el campo con una URL. El usuario puede rellenar el campo con una URL inválida o dejar el espacio en blanco. Saltos de línea 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.
  • weekHTML5 Control para poder rellenar el campo con una fecha que consista en el número correspondiente a 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. Sino lo es, es ignorado. El valor es una lista de elementos únicos separados por comas:
  • 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
Carácter que el usuario puede pulsar para situar el foco sobre el elemento <input> . Este atributo es global en HTML5 .
mozactionhint Non-standard
Specifies an "action hint" used to determine how to label the enter key on mobile devices with virtual keyboards. Supported values are godonenextsearch, andsend; these automatically get mapped to the appropriate string (and are case-insensitive).
autocomplete  HTML5
Este atributo indica si el valor del control o <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.

If the autocomplete attribute is not specified on an input element, then the browser uses the autocomplete attribute value of the <input> element's form owner. The form owner is either the form element that this <input> element is a descendant of or the form element whose id is specified by the form attribute of the input element. For more information, see the autocomplete attribute in <form> .

autofocus  HTML5
Atributo de tipo Boolean que permite especificar que <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.
checked
Atributo de tipo Boolean. Cuando el valor del atributo type es radio o checkbox, indica que este <input> esta 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 esta 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 este 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 como 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 envie 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-tiempo, 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 evalua cuando el valor del atributo cambia.
min  HTML5
El mínimo valor, número o fecha-tiempo, para el elemento <input>. No puede ser superion al valor del atributo max.
multiple  HTML5
Este atributo de tipo Boolean indica cuando el usuario puede introducir más de un valor. Sólo si el atributo type es email or 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 ni saltos de linea 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
The direction in which selection occurred. This is "forward" if the selection was made from left-to-right in an LTR locale or right-to-left in an RTL locale, or "backward" if the selection was made in the opposite direction. This can be "none" if the selection direction is unknown.
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. Sólo si el valor del atributo type es 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
Works with the min and max attributes to limit the increments at which a numeric or date-time value can be set. It can be the string any or a positive floating point number. If this attribute is not set to any, the control accepts only values at multiples of the step value greater than the minimum.
tabindex elemento en HTML4 , global en HTML5
Indica la posición del elemento en el navegador de tabs del documento actual.
usemap   HTML4 solo, obsoleto a partir de HTML5
El nombre del elemento <map>  que funciona como una 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.

 

Etiquetas y colaboradores del documento

 Colaboradores en esta página: garciaFullana, j-light, chech, dennistobar, whitman, Johsua, byverdu, chipsweb, teoli, ovnicraft
 Última actualización por: garciaFullana,