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

HTMLInputElementPropiedades 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`

`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`

`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`

`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`

`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.

`search` (en-US) 
Non-standard

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 with JavaScript enabled. Enable JavaScript to view data.

Véase también
-------------

* Elemento HTML que implementa esta interfaz: `<input>`