<input type="text">

La fuente de este ejemplo interactivo se almacena en un repositorio de GitHub. Si deseas contribuir al proyecto de ejemplos interactivos, clona https://github.com/mdn/interactive-examples y envíanos una solicitud de extracción.

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 ("").

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

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.

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.

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.

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.

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

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 para esos caracteres.

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.

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

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.

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.

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.

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

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

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

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.

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>

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.

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.

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>

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;
}

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.

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>

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;
}

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

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>

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

p {
  font-size: 80%;
  color: #999;
}

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;
}

Esto se renderiza así:

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.

• Formularios HTML
• <input> y la interfaz HTMLInputElement en que se basa.
• <input type="search">
• <textarea>: Campo de entrada de texto multilínea
• Compatibilidad de propiedades CSS