HTMLInputElement

La interfaz HTMLInputElement proporciona propiedades y métodos especiales para manipular las opciones, el diseño y la presentación de los elementos <input>.

EventTarget Node Element HTMLElement HTMLInputElement

Propiedades de instancia

Algunas propiedades solo se aplican a los tipos de elementos de entrada que admiten los atributos correspondientes.

align Obsoleto

string: Representa la alineación del elemento. Use CSS en su lugar.

autocapitalize Experimental

string: Define el comportamiento de uso de mayúsculas para la entrada del usuario. Los valores válidos son none, off, characters, words o sentences.

defaultValue

string: Devuelve/Establece el valor predeterminado como se especificó originalmente en el código HTML que creó este objeto.

dirName

string: Devuelve/Establece la direccionalidad del elemento.

inputmode

Proporciona una pista a los navegadores sobre el tipo de configuración de teclado virtual que se debe usar al editar este elemento o su contenido.

labels (en-US) Read only

Arreglo de NodeList: Devuelve una lista de elementos <label> que son etiquetas para este elemento.

list Read only

HTMLElement: Devuelve el elemento al que apunta el atributo list. La propiedad puede ser null si no se encuentra ningún elemento HTML en el mismo árbol.

multiple (en-US)

boolean: Devuelve/Establece el atributo multiple del elemento, indicando si es posible más de un valor (por ejemplo, varios archivos).

name

string: Devuelve/Establece el atributo name del elemento, que contiene un nombre que identifica al elemento al enviar el formulario.

popoverTargetAction (en-US)

Obtiene y establece la acción que se realizará ("hide", "show", o "toggle") en un elemento emergente controlado por un elemento <input> de tipo type="button". Refleja el valor del atributo HTML popovertargetaction.

popoverTargetElement (en-US)

Obtiene y establece el control del elemento popover a través de un elemento <input> de type="button". El equivalente JavaScript del atributo HTML popovertarget.

step

string: Devuelve/Establece el atributo step del elemento, que funciona con min y max para limitar los incrementos en los que se puede establecer un valor numérico o de fecha y hora. Puede ser la cadena any o un número de punto flotante positivo. Si esto no se establece en any, el control solo acepta valores en múltiplos del valor de paso mayor que el mínimo.

type (en-US)

string: Devuelve/Establece el atributo type del elemento, indicando el tipo de control a mostrar. Para conocer los posibles valores, consulte la documentación del atributo type.

useMap Obsoleto

string: Representa un mapa de imagen del lado del cliente.

value

string: Devuelve/Establece el valor actual del control. Si el usuario ingresa un valor diferente del valor esperado, esto puede devolver una cadena vacía.

valueAsDate

Date: Devuelve/Establece el valor del elemento, interpretado como una fecha, o null si la conversión no es posible.

valueAsNumber

double: Devuelve el valor del elemento, interpretado como uno de los siguientes, en orden: un valor de tiempo, un número o NaN si la conversión es imposible

Propiedades de instancia relacionadas con el formulario padre

form Read only

HTMLFormElement: Devuelve una referencia al elemento <form> padre.

formAction

string: Devuelve/Establece el atributo formaction del elemento, que contiene la URL de un programa que procesa la información enviada por el elemento. Esto anula el atributo action del formulario padre.

formEnctype

string: Devuelve/Establece el atributo formenctype del elemento, que contiene el tipo de contenido que se utiliza para enviar el formulario al servidor. Esto anula el atributo enctype del formulario padre.

formMethod

string: Devuelve/Establece el atributo formmethod del elemento, que contiene el método HTTP que utiliza el navegador para enviar el formulario. Esto anula el atributo method del formulario padre.

formNoValidate

boolean: Devuelve/Establece el atributo formnovalidate del elemento, indicando que el formulario no debe validarse cuando se envía. Esto anula el atributo novalidate del formulario padre.

formTarget

string: Devuelve/Establece el atributo formtarget del elemento, que contiene un nombre o palabra clave que indica dónde mostrar la respuesta que se recibe después de enviar el formulario. Esto anula el atributo target del formulario padre.

Propiedades de instancia que se aplican a cualquier tipo de elemento de entrada que no esté oculto

autofocus

boolean: Devuelve/Establece el atributo autofocus del elemento, que especifica que un control de formulario debe tener el foco de entrada cuando se carga la página, a menos que el usuario lo anula, por ejemplo, escribiendo en un control diferente. Solo un elemento de formulario en un documento puede tener el atributo autofocus.

disabled (en-US)

boolean: Devuelve/Establece el atributo disabled del elemento, indicando que el control no está disponible para la interacción. Los valores de entrada no se enviarán con el formulario. Vea también readonly.

required

boolean: Devuelve/Establece el atributo required del elemento, indicando que el usuario debe llenar un valor antes de enviar un formulario.

validationMessage Read only

string: Devuelve un mensaje específico que describe las restricciones de validación que el control no cumple (si las hay). Esta es la cadena vacía si el control no es candidato para la validación de restricciones (willValidate (en-US) es false), o cumple sus restricciones. Este valor se puede establecer mediante el método setCustomValidity() (en-US).

validity Read only

ValidityState (en-US): Devuelve el estado de validez actual del elemento.

willValidate Read only

boolean: Devuelve si el elemento es candidato para la validación de restricciones. Es false si alguna condición le impide la validación de restricciones, incluyendo: si type es hidden, reset o button, tiene un antecesor <datalist> o su propiedad disabled es true.

Propiedades de instancia que se aplican solo a elementos de tipo checkbox o radio

checked

boolean: Devuelve/Establece el estado actual del elemento.

defaultChecked

boolean: Devuelve/Establece el estado predeterminado de un botón de radio o casilla de verificación como se especificó originalmente en el HTML que creó este objeto.

indeterminate

boolean: Devuelve si la casilla de verificación o el botón de opción están en un estado indeterminado. Para las casillas de verificación, el efecto es que la apariencia de la casilla de verificación está oscurecida o atenuada de alguna manera para indicar que su estado es indeterminado (no está marcada pero tampoco no está marcada). No afecta el valor del atributo checked y al hacer clic en la casilla de verificación se establecerá el valor en falso.

Propiedades de instancia que se aplican solo a elementos de tipo imagen

alt

string: Devuelve/Establece el atributo alt del elemento, que contiene texto alternativo a utilizar.

height

string: Devuelve/Establece el atributo height del elemento, que define la altura de la imagen mostrada para el botón.

src

string: Devuelve/Establece el atributo src del elemento, que especifica un URI para la ubicación de una imagen que se mostrará en el botón de envío gráfico.

width

string: Devuelve/Establece el atributo width del elemento, que define el ancho de la imagen mostrada para el botón.

Propiedades de instancia que se aplican solo a elementos de tipo archivo

accept

string: Devuelve/Establece el atributo accept del elemento, que contiene una lista separada por comas de los tipos de archivos que se pueden seleccionar.

allowdirs Non-standard

boolean: Parte de la API de carga de directorios no estándar. Indica si se permite o no la selección de directorios y archivos en la lista de archivos. Implementado solo en Firefox y está oculto detrás de una preferencia.

files (en-US)

FileList (en-US): Devuelve/Establece una lista de objetos File que representan los archivos seleccionados para cargar.

webkitdirectory (en-US)

boolean: Devuelve el atributo webkitdirectory. Si es true, la interfaz del selector del sistema de archivos solo acepta directorios en lugar de archivos.

webkitEntries (en-US)

Arreglo de FileSystemEntry (en-US): Describe los archivos o directorios actualmente seleccionados.

Propiedades de instancia que se aplican solo a elementos visibles que contienen texto o números

autocomplete

string: Devuelve/Establece el atributo autocompletar del elemento, indicando si el valor del control puede ser completado automáticamente por el navegador.

max

string: Devuelve/Establece el atributo max del elemento, que contiene el valor máximo (numérico o de fecha y hora) para este elemento, que no debe ser menor que su valor mínimo (atributo min).

maxLength

unsigned long: Devuelve/Establece el atributo maxlength del elemento, que contiene el número máximo de caracteres (en puntos de código Unicode) que puede tener el valor.

min

string: Devuelve/Establece el atributo min del elemento, que contiene el valor mínimo (numérico o de fecha y hora) para este elemento, que no debe ser mayor que su valor máximo (atributo max).

minLength

unsigned long: Devuelve/Establece el atributo minlength del elemento, que contiene el número mínimo de caracteres (en puntos de código Unicode) que puede tener el valor.

pattern

string: Devuelve/Establece el atributo pattern del elemento, que contiene una expresión regular con la que se compara el valor del control. Use el atributo title para describir el patrón para ayudar al usuario. Este atributo solo aplica cuando el valor del atributo type es text, search, tel, url o email `.

placeholder

string: Devuelve/Establece el atributo placeholder del elemento, que contiene una pista para el usuario de lo que se puede ingresar en el control. El texto del marcador de posición no debe contener retornos de carro ni saltos de línea. Este atributo solo aplica cuando el valor del atributo type es text, search, tel, url o email `.

readOnly

boolean: Devuelve/Establece el atributo readonly del elemento, indicando que el usuario no puede modificar el valor del control. Esto se ignora si type es hidden, range, color, checkbox, radio, file, o un tipo de botón.

selectionEnd (en-US)

unsigned long: Devuelve/Establece el índice final del texto seleccionado. Cuando no hay selección, esto devuelve el desplazamiento del carácter que sigue inmediatamente a la posición actual del cursor de entrada de texto.

selectionStart (en-US)

unsigned long: Devuelve/Establece el índice inicial del texto seleccionado. Cuando no se selecciona nada, esto devuelve la posición del cursor de entrada de texto (signo de intercalación ^) dentro del elemento <input>.

selectionDirection (en-US)

string: Devuelve/Establece la dirección en la que ocurrió la selección. Los valores posibles son: forward (la selección se realizó en la dirección de principio a fin de la ubicación actual), backward (la dirección opuesta) o none (la dirección es desconocida).

size

unsigned long: Devuelve/Establece el atributo size del elemento, que contiene el tamaño visual del control. Este valor está en píxeles a menos que el valor type sea text o password, en cuyo caso, es un número entero de caracteres . Se aplica solo cuando type se establece en text, search, tel, url, email o password.

Instance methods

blur() (en-US)

Elimina el foco del elemento de entrada; las pulsaciones de teclas no irán a ninguna parte.

click()

Simula un clic en el elemento de entrada.

focus()

Se enfoca en el elemento de entrada; las pulsaciones de teclas irán posteriormente a este elemento.

select()

Selecciona todo el texto en el elemento de entrada y lo enfoca para que el usuario pueda reemplazar todo su contenido posteriormente.

setSelectionRange() (en-US)

Selecciona un rango de texto en el elemento de entrada (pero no lo enfoca).

setRangeText() (en-US)

Reemplaza un rango de texto en el elemento de entrada con texto nuevo.

setCustomValidity() (en-US)

Establece un mensaje de validación personalizado para el elemento. Si este mensaje no es la cadena vacía, entonces el elemento sufre un error de validación personalizado y no se valida.

showPicker() (en-US)

Muestra un selector del navegador para fecha, hora, color y archivos.

checkValidity() (en-US)

Devuelve un valor booleano que es false si el elemento es candidato para la validación de restricciones y no satisface sus restricciones. En este caso, también activa un evento invalid en el elemento. Devuelve true si el elemento no es candidato para la validación de restricciones, o si satisface sus restricciones.

reportValidity() (en-US)

Ejecuta el método checkValidity() y, si devuelve falso (por una entrada no válida o porque no se proporcionó ningún atributo de patrón), informa al usuario que la entrada no es válida de la misma manera que si hubiera enviado un formulario.

stepDown() (en-US)

Decrementa value en (step * n) , donde n por defecto es 1 si no se especifica. Lanza una excepción InvalidStateError:

  • si el método no es aplicable para el valor actual de type,
  • si el elemento no tiene valor step,
  • si value no se puede convertir a un número,
  • si el valor resultante está por encima de max o por debajo de [min](/es/docs/Web/HTML/Element/input #min).
stepUp() (en-US)

Incrementa value en (step * n) , donde n por defecto es 1 si no se especifica. Lanza una excepción InvalidStateError:

  • si el método no es aplicable para el valor actual de type,
  • si el elemento no tiene valor step,
  • si value no se puede convertir a un número,
  • si el valor resultante está por encima de max o por debajo de [min](/es/docs/Web/HTML/Element/input #min).

Eventos

Detecte estos eventos usando addEventListener() o asignando un detector de eventos a la propiedad oneventname de esta interfaz:

input

Se activa cuando se modifica value de un elemento <input>, <select> o <textarea>. Tenga en cuenta que esto se activa en la interfaz HTMLElement y también se aplica a los elementos contenteditable, pero lo hemos enumerado aquí porque se usa más comúnmente con elementos de entrada de formulario.

invalid

Se activa cuando un elemento no satisface sus restricciones durante la validación de restricciones.

Se activa cuando se inicia una búsqueda en un <input> con type="search".

selectionchange (en-US) event Experimental

Se activa cuando se cambia la selección de texto en un elemento <input>.

Especificaciones

Specification
HTML Standard
# htmlinputelement

Compatibilidad con navegadores

BCD tables only load in the browser

Véase también

  • Elemento HTML que implementa esta interfaz: <input>