<input type="text">

Los elementos <input> de tipo text crean campos de texto básicos de una sola línea.

Value Un DOMString que representa el texto contenido en el campo de texto.
Eventos change y input
Atributos comunes admitidos autocomplete, list, maxlength, minlength, pattern, placeholder, readonly, required y size
IDL attributes list, value
Métodos select(), setRangeText() y setSelectionRange().

Value

El atributo value es un DOMString que contiene el valor actual del texto ingresado en el campo de texto. Puedes recuperar esto usando la propiedad value en JavaScript.

let theText = myTextInput.value;

Si no existen restricciones de validación para la entrada (consulta Validación para obtener más detalles), el valor puede ser una cadena vacía ("").

Atributos adicionales

Además de los atributos que operan en todos los elementos <input> independientemente de su tipo, las entradas de texto admiten los siguientes atributos:

Atributo Descripción
list El id del elemento <datalist> que contiene las opciones de autocompletar predefinidas
maxlength El número máximo de caracteres que debe aceptar la entrada
minlength El número mínimo de caracteres que la entrada puede tener y aún se considera válida
pattern Una expresión regular que el contenido de la entrada debe coincidir para que sea válida
placeholder Un valor de ejemplo para mostrar en el campo de entrada siempre y cuando esté vacío
readonly Un atributo booleano que indica si el contenido de la entrada debe ser de solo lectura.
size Un número que indica cuántos caracteres de ancho debe tener el campo de entrada.
spellcheck Controla si se habilita o no la revisión ortográfica para el campo de entrada, o si se debe usar la configuración de revisión ortográfica predeterminada

list

Los valores del atributo list son el id de un elemento <datalist> ubicado en el mismo documento. El <datalist> proporciona una lista de valores predefinidos para sugerir al usuario para esta entrada. Cualquier valor de la lista que no sea compatible con type no se incluye en las opciones sugeridas. Los valores proporcionados son sugerencias, no requisitos: los usuarios pueden seleccionar de esta lista predefinida o proporcionar un valor diferente.

maxlength

El número máximo de caracteres (como unidades de código UTF-16) que el usuario puede ingresar en la entrada de text. Debe ser un valor entero 0 o superior. Si no se especifica maxlength, o se especifica un valor no válido, el text de la entrada no tiene una longitud máxima. Este valor también debe ser mayor o igual que el valor de minlength.

La entrada fallará restricción de validación si la longitud del valor de texto del campo es mayor que maxlength Unidades de código UTF-16 de longitud. La validación de la restricción solo se aplica cuando el usuario cambia el valor.

minlength

El número mínimo de caracteres (como unidades de código UTF-16) que el usuario puede ingresar en la entrada de texto. Debe ser un valor entero no negativo menor o igual al valor especificado por maxlength. Si no se especifica minlength, o se especifica un valor no válido, la entrada de text no tiene una longitud mínima.

La entrada fallará restricción de validación si la longitud del texto ingresado en el campo es menor que minlength Unidades de código UTF-16 de longitud. La validación de la restricción solo se aplica cuando el usuario cambia el valor.

pattern

El atributo pattern, cuando se especifica, es una expresión regular que el value de la entrada debe coincidir para que el valor pase restricciones de validación. Debe ser una expresión regular de JavaScript válida, como la usada por el tipo RegExp y como se documenta en la guía sobre expresiones regulares; el indicador 'u' se especifica al compilar la expresión regular, de modo que el patrón se trata como una secuencia de puntos de código Unicode, en lugar de ASCII. No se deben especificar barras diagonales alrededor del texto del patrón.

Si el patrón especificado no se especifica o no es válido, no se aplica ninguna expresión regular y este atributo se ignora por completo.

Consejo:: Utiliza el atributo title para especificar el texto que la mayoría de los navegadores mostrarán como información sobre herramientas para explicar cuáles son los requisitos para coincidir con el patrón. También debes incluir otro texto explicativo cercano.

Consulta Especificación de un patrón para obtener más detalles y un ejemplo.

placeholder

El atributo placeholder es una cadena que proporciona una breve pista al usuario sobre el tipo de información que se espera en el campo. Debe ser una palabra o frase corta que demuestre el tipo de datos esperado, en lugar de un mensaje explicativo. El texto no debe incluir retornos de carro o saltos de línea.

Si el contenido del control tiene una direccionalidad (LTR o RTL) pero necesitas presentar el marcador de posición en la direccionalidad opuesta, puedes usar caracteres de formato de algoritmo bidireccional Unicode para anular la direccionalidad dentro del marcador de posición; consulta Anulación de BiDi mediante caracteres de control Unicode in [Page not yet written] para esos caracteres.

Nota: Evita utilizar el atributo placeholder si puedes. No es tan útil semánticamente como otras formas de explicar tu formulario y puede causar problemas técnicos inesperados con tu contenido. Consulta Etiquetas y marcadores de posición in [Page not yet written] para obtener más información.

readonly

Un atributo booleano que, si está presente, significa que el usuario no puede editar este campo. Su value, sin embargo, aún se puede cambiar mediante el código JavaScript configurando directamente la propiedad HTMLInputElement.value.

Nota: Debido a que un campo de solo lectura no puede tener un valor, required no tiene ningún efecto en las entradas con el atributo readonly también especificado.

size

El atributo size es un valor numérico que indica cuántos caracteres de ancho debe tener el campo de entrada. El valor debe ser un número mayor que cero, y el valor predeterminado es 20. Dado que el ancho de los caracteres varía, esto puede ser exacto o no y no se debe confiar en que lo sea; la entrada resultante puede ser más estrecha o más ancha que el número especificado de caracteres, dependiendo de los caracteres y la fuente (configuración de fuente en uso).

Esto no establece un límite en la cantidad de caracteres que el usuario puede ingresar en el campo. Solo especifica aproximadamente cuántos se pueden ver a la vez. Para establecer un límite superior en la longitud de los datos de entrada, utiliza el atributo maxlength.

spellcheck

spellcheck es un atributo global que se utiliza para indicar si se habilita o no la revisión ortográfica de un elemento. Se puede usar en cualquier contenido editable, pero aquí consideramos los detalles relacionados con el uso del corrector ortográfico (spellcheck en elementos <input>. Los valores permitidos para el corrección ortográfica son:

false
Desactive la corrección ortográfica de este elemento.
true
Habilita la revisión ortográfica de este elemento.
"" (cadena vacía) o sin valor
Sigue el comportamiento predeterminado del elemento para la revisión ortográfica. Esto se puede basar en la configuración de la corrección ortográfica de los padres u otros factores.

Un campo de entrada puede tener habilitado el corrector ortográfico si no tiene el atributo readonly configurado y no está deshabilitado.

Es posible que el valor devuelto al leer el corrector ortográfico puede no reflejar el estado real del corrector ortográfico dentro de un control, si las preferencias de agentes de usuario anulan la configuración.

Atributos no estándar

Los siguientes atributos no estándar también están disponibles en algunos navegadores. Como regla general, debes evitar usarlos a menos que no puedas evitarlo.

Atributo Descripción
autocorrect Una cadena que indica si la autocorrección está activa (on) o (off). Solo Safari.
mozactionhint Una cadena que indica el tipo de acción que se realizará cuando el usuario presione la tecla Intro o Retorno mientras editas el campo; esto se usa para determinar una etiqueta apropiada para esa tecla en un teclado virtual. Solo Firefox para Android.

autocorrect

Una extensión de Safari, el atributo autocorrect es una cadena que indica si activar o no la corrección automática mientras el usuario está editando este campo. Los valores permitidos son:

on
Habilita la corrección automática de errores tipográficos, así como el procesamiento de sustituciones de texto, si los hay.
off
Desactiva la corrección automática y las sustituciones de texto.

mozactionhint

Una extensión de Mozilla, compatible con Firefox para Android, que proporciona una pista sobre qué tipo de acción se realizará si el usuario presiona la tecla Intro o Retorno mientras edita el campo. Esta información se usa para decidir qué tipo de etiqueta usar en la tecla Intro del teclado virtual.

Nota: Este se ha estandarizado como el atributo global enterkeyhint, pero aún no está ampliamente implementado. Para ver el estado del cambio que se está implementando en Firefox, consulta error 1490661.

Los valores permitidos son: go, done, next, search y send. El navegador decide, utilizando esta sugerencia, qué etiqueta poner en la tecla Intro.

Usar entradas de texto

Los elementos <input> de tipo text crean entradas básicas de una sola línea. Los debes usar en cualquier lugar donde desees que el usuario ingrese un valor de una sola línea y no hay un tipo de entrada más específico disponible para recopilar ese valor (por ejemplo, si es un date, URL, email, o término de búsqueda, tiene mejores opciones disponibles).

Ejemplo básico

<form>
  <div>
    <label for="uname">Elige un nombre de usuario: </label>
    <input type="text" id="uname" name="name">
  </div>
  <div>
    <button>Enviar</button>
  </div>
</form>

Esto se renderiza así:

Cuando se envía, el par de nombre/valor de datos enviado al servidor será uname=Chris (si se ingresó "Chris" como valor de entrada antes del envío). Debes recordar incluir el atributo name en el elemento <input>; de lo contrario, el valor del campo de texto no se incluirá con los datos enviados.

Establecer marcadores de posición

Puedes proporcionar un marcador de posición útil dentro de tu entrada de texto que puede proporcionar una pista sobre qué ingresar al incluir el uso del atributo placeholder. Mira el siguiente ejemplo:

<form>
  <div>
    <label for="uname">Elige un nombre de usuario: </label>
    <input type="text" id="uname" name="name"
           placeholder="Una sola palabra, en minúsculas">
  </div>
  <div>
    <button>Enviar</button>
  </div>
</form>

Puedes ver cómo se representa el marcador de posición a continuación:

El marcador de posición generalmente se representa en un color más claro que el color de primer plano del elemento y desaparece automáticamente cuando el usuario comienza a ingresar texto en el campo (o siempre que el campo tiene un valor establecido programáticamente al establecer su atributo value.

Tamaño físico del elemento de entrada

El tamaño físico del cuadro de entrada se puede controlar mediante el atributo size. Con él, puedes especificar el número de caracteres que la entrada de texto puede mostrar a la vez. Esto afecta el ancho del elemento, lo cual te permite especificar el ancho en términos de caracteres en lugar de píxeles. En este ejemplo, por ejemplo, la entrada tiene 30 caracteres de ancho:

<form>
  <div>
    <label for="uname">Elige un nombre de usuario: </label>
    <input type="text" id="uname" name="name"
           placeholder="Una sola palabra, en minúsculas"
           size="30">
  </div>
  <div>
    <button>Enviar</button>
  </div>
</form>

Validación

Los elementos <input> de tipo text no tienen validación automática aplicada (ya que una entrada de texto básica debe ser capaz de aceptar cualquier cadena arbitraria), pero hay algunas opciones de validación de lado del cliente disponibles, que verás a continuación.

Nota: La validación del formulario HTML no sustituye a la de los scripts del servidor que garantizan que los datos introducidos tengan el formato adecuado. Es demasiado fácil para alguien realizar ajustes en el HTML que le permitan omitir la validación o eliminarla por completo. También es posible que alguien simplemente omita tu HTML por completo y envíe los datos directamente a tu servidor. Si tu código del lado del servidor no valida los datos que recibe, podría ocurrir un desastre cuando se ingresen en tu base de datos datos con formato incorrecto (o datos que son demasiado grandes, son del tipo incorrecto, etc.).

Una nota sobre estilizado

Hay pseudoclases útiles disponibles para diseñar elementos de formulario para ayudar al usuario a ver cuándo sus valores son válidos o no. Estos son : valid e :invalid. En esta sección, usaremos el siguiente CSS, que colocará una marca de verificación (tilde) junto a las entradas que contienen valores válidos y una cruz (X) junto a las entradas que contienen valores no válidos.

div {
  margin-bottom: 10px;
  position: relative;
}

input + span {
  padding-right: 30px;
}

input:invalid+span:after {
  position: absolute; content: '✖';
  padding-left: 5px;
}

input:valid+span:after {
  position: absolute;
  content: '✓';
  padding-left: 5px;
}

La técnica también requiere que se coloque un elemento <span> después del elemento <form>, que actúa como contenedor de los iconos. Esto era necesario porque algunos tipos de entrada en algunos navegadores no muestran muy bien los iconos colocados directamente después de ellos.

Hacer entrada requerida

Puedes usar el atributo required como una manera fácil de hacer que se requiera ingresar un valor antes de que se permita el envío del formulario:

<form>
  <div>
    <label for="uname">Elige un nombre de usuario: </label>
    <input type="text" id="uname" name="name" required>
    <span class="validity"></span>
  </div>
  <div>
    <button>Enviar</button>
  </div>
</form>

Esto se renderiza así:

Si intentas enviar el formulario sin ningún término de búsqueda ingresado, el navegador mostrará un mensaje de error.

Longitud del valor de entrada

Puedes especificar una longitud mínima (en caracteres) para el valor ingresado usando el atributo minlength; de manera similar, usa maxlength para establecer la longitud máxima del valor ingresado, en caracteres.

El siguiente ejemplo requiere que el valor ingresado tenga entre 4 y 8 caracteres de longitud.

<form>
  <div>
    <label for="uname">Elige un nombre de usuario: </label>
    <input type="text" id="uname" name="name" required size="10"
           placeholder="nombreusuario"
           minlength="4" maxlength="8">
    <span class="validity"></span>
  </div>
  <div>
    <button>Enviar</button>
  </div>
</form>

Esto se renderiza así:

Si intentas enviar el formulario con menos de 4 caracteres, se te dará un mensaje de error apropiado (que difiere entre los navegadores). Si intentas ingresar más de 8 caracteres, el navegador no te lo permitirá.

Nota: Si especificas un minlength pero no especificas required, la entrada se considera válida, ya que no se requiere que el usuario especifique un valor.

Especificación de un patrón

Puedes utilizar el atributo pattern para especificar una expresión regular con la que el valor ingresado debe coincidir para que se considere válido (ve un curso intensivo simple en Validación con una expresión regular sobre el uso de expresiones regulares para validar entradas).

El siguiente ejemplo restringe el valor a 4-8 caracteres y requiere que contenga solo letras minúsculas.

<form>
  <div>
    <label for="uname">Elige un nombre de usuario: </label>
    <input type="text" id="uname" name="name" required size="45"
           pattern="[a-z]{4,8}">
    <span class="validity"></span>
    <p>Los nombres de usuario deben estar en minúsculas y tener entre 4 y 8 caracteres de longitud.</p>
  </div>
  <div>
    <button>Enviar</button>
  </div>
</form>

Esto se renderiza así:

Ejemplos

Puedes ver buenos ejemplos de entradas de texto utilizadas en contexto en los artículos Mi primer formulario HTML y Cómo estructurar un formulario HTML.

Especificaciones

Especificación Estado Comentario
HTML Living Standard
La definición de '<input type="text">' en esta especificación.
Living Standard Definición inicial
HTML 5.1
La definición de '<input type="text">' en esta especificación.
Recommendation Definición inicial

Compatibilidad del navegador

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
type="text"Chrome Soporte completo 1Edge Soporte completo 12Firefox Soporte completo 1IE Soporte completo SiOpera Soporte completo SiSafari Soporte completo 1WebView Android Soporte completo SiChrome Android Soporte completo SiFirefox Android Soporte completo 4Opera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android Soporte completo Si

Leyenda

Soporte completo  
Soporte completo

Ve también