--- title: slug: Web/HTML/Elemento/input/text tags: - Entrada de texto - Form input - Formulários HTML - HTML - Input - Input Type - Referencia - Text - Texto - formulários - text input translation_of: Web/HTML/Element/input/text ---
{{HTMLRef}}

Los elementos {{HTMLElement("input")}} de tipo {{HTMLAttrDef("text")}} crean campos de texto básicos de una sola línea.

{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-shorter")}}
{{anch("Value")}} Un {{DOMxRef("DOMString")}} que representa el texto contenido en el campo de texto.
Eventos {{event("change")}} y {{event("input")}}
Atributos comunes admitidos {{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}} y {{htmlattrxref("size", "input")}}
IDL attributes {{htmlattrxref("list", "input")}}, {{HTMLAttrDef("value")}}
Métodos {{DOMxRef("HTMLInputElement.select", "select()")}}, {{DOMxRef("HTMLInputElement.setRangeText", "setRangeText()")}} y {{DOMxRef("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}.

Value

El atributo {{HTMLAttrxRef("value", "input")}} es un {{DOMxRef("DOMString")}} que contiene el valor actual del texto ingresado en el campo de texto. Puedes recuperar esto usando la propiedad {{DOMxRef("HTMLInputElement.value", "value")}} en JavaScript.

let theText = myTextInput.value;

Si no existen restricciones de validación para la entrada (consulta {{anch("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 {{HTMLElement("input")}} independientemente de su tipo, las entradas de texto admiten los siguientes atributos:

Atributo Descripción
{{anch("list")}} El id del elemento {{HTMLElement("datalist")}} que contiene las opciones de autocompletar predefinidas
{{anch("maxlength")}} El número máximo de caracteres que debe aceptar la entrada
{{anch("minlength")}} El número mínimo de caracteres que la entrada puede tener y aún se considera válida
{{anch("pattern")}} Una expresión regular que el contenido de la entrada debe coincidir para que sea válida
{{anch("placeholder")}} Un valor de ejemplo para mostrar en el campo de entrada siempre y cuando esté vacío
{{anch("readonly")}} Un atributo booleano que indica si el contenido de la entrada debe ser de solo lectura.
{{anch("size")}} Un número que indica cuántos caracteres de ancho debe tener el campo de entrada.
{{anch("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

{{HTMLAttrDef("list")}}

Los valores del atributo {{HTMLAttrDef("list")}} son el {{DOMxRef("Element.id", "id")}} de un elemento {{HTMLElement("datalist")}} ubicado en el mismo documento. El {{HTMLElement("datalist")}} proporciona una lista de valores predefinidos para sugerir al usuario para esta entrada. Cualquier valor de la lista que no sea compatible con {{HTMLAttrxRef("type", "input")}} 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.

{{HTMLAttrDef("maxlength")}}

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

La entrada fallará {{web.link("/es/docs/Web/Guide/HTML/HTML5/Constraint_validation", "restricción de validación")}} si la longitud del valor de texto del campo es mayor que {{HTMLAttrxRef("maxlength", "input")}} Unidades de código UTF-16 de longitud. La validación de la restricción solo se aplica cuando el usuario cambia el valor.

{{HTMLAttrDef("minlength")}}

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

La entrada fallará {{web.link("/es/docs/Web/Guide/HTML/HTML5/Constraint_validation", "restricción de validación")}} si la longitud del texto ingresado en el campo es menor que {{HTMLAttrDef("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.

{{HTMLAttrDef("pattern")}}

El atributo {{HTMLAttrDef("pattern")}}, cuando se especifica, es una expresión regular que el {{HTMLAttrxRef("value")}} de la entrada debe coincidir para que el valor pase {{web.link("/es/docs/Web/Guide/HTML/HTML5/Constraint_validation", "restricciones de validación")}}. Debe ser una expresión regular de JavaScript válida, como la usada por el tipo {{JSxRef("RegExp")}} y como se documenta en la {{web.link("/es/docs/Web/JavaScript/Guide/Regular_Expressions", "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 {{HTMLAttrxRef("title", "input")}} 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 {{anch("Especificación de un patrón")}} para obtener más detalles y un ejemplo.

{{HTMLAttrDef("placeholder")}}

El atributo {{HTMLAttrDef("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 ({{Glossary("LTR")}} o {{Glossary("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 {{SectionOnPage("/es/docs/Web/Localization/Unicode_Bidirectional_Text_Algorithm", "Anulación de BiDi mediante caracteres de control Unicode")}} para esos caracteres.

Nota: Evita utilizar el atributo {{HTMLAttrDef("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 {{SectionOnPage("/es/docs/Web/HTML/Element/input", "Etiquetas y marcadores de posición")}} para obtener más información.

{{HTMLAttrDef("readonly")}}

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

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

{{HTMLAttrDef("size")}}

El atributo {{HTMLAttrDef("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 {{CSSxRef("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 {{anch("maxlength")}}.

{{HTMLAttrDef("spellcheck")}}

{{HTMLAttrDef("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 ({{HTMLAttrxRef("spellcheck")}} en elementos {{HTMLElement("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 {{anch("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 {{Glossary("agente de usuario", "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
{{anch("autocorrect")}} Una cadena que indica si la autocorrección está activa (on) o (off). Solo Safari.
{{anch("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.

{{HTMLAttrDef("autocorrect")}} {{non-standard_inline}}

Una extensión de Safari, el atributo {{HTMLAttrDef("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.

{{HTMLAttrDef("mozactionhint")}} {{non-standard_inline}}

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 {{HTMLAttrxRef("enterkeyhint")}}, pero aún no está ampliamente implementado. Para ver el estado del cambio que se está implementando en Firefox, consulta {{bug(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 {{HTMLElement("input")}} de tipo {{HTMLAttrDef("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 {{web.link("/es/docs/Web/HTML/Element/input/datetime-local", "date")}}, {{web.link("/es/docs/Web/HTML/Element/input/url", "URL")}}, {{web.link("/es/docs/Web/HTML/Element/input/email", "email")}}, o {{web.link("/es/docs/Web/HTML/Element/input/search", "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í:

{{EmbedLiveSample("Ejemplo_básico", 600, 50)}}

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 {{HTMLAttrxRef("name", "input")}} en el elemento {{HTMLElement("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 {{HTMLAttrxRef("placeholder", "input")}}. 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:

{{EmbedLiveSample("Establecer_marcadores_de_posición", 600, 50)}}

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 {{HTMLAttrDef("value")}}.

Tamaño físico del elemento de entrada

El tamaño físico del cuadro de entrada se puede controlar mediante el atributo {{HTMLAttrxRef("size", "input")}}. 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>

{{ EmbedLiveSample('Tamaño_físico_del_elemento_de_entrada', 600, 50) }}

Validación

Los elementos {{HTMLElement("input")}} de tipo {{HTMLAttrDef("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 {{CSSxRef(": valid")}} e {{CSSxRef(":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 {{HTMLElement("span")}} después del elemento {{HTMLElement("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 {{HTMLAttrxRef("required", "input")}} 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í:

{{ EmbedLiveSample('Hacer_entrada_requerida', 600, 70) }}

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 {{HTMLAttrxRef("minlength", "input")}}; de manera similar, usa {{HTMLAttrxRef("maxlength", "input")}} 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í:

{{ EmbedLiveSample('Longitud_del_valor_de_entrada', 600, 70) }}

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 {{HTMLAttrDef("minlength")}} pero no especificas {{HTMLAttrDef("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 {{HTMLAttrxRef("pattern", "input")}} 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 {{web.link("/es/docs/Learn/HTML/Forms/Form_validation#Validación_con_una_expresión_regular", "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í:

{{ EmbedLiveSample('Especificación_de_un_patrón', 600, 110) }}

Ejemplos

Puedes ver buenos ejemplos de entradas de texto utilizadas en contexto en los artículos {{web.link("/es/docs/Learn/HTML/Forms/Your_first_HTML_form", "Mi primer formulario HTML")}} y {{web.link("/es/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form", "Cómo estructurar un formulario HTML")}}.

Especificaciones

Especificación Estado Comentario
{{SpecName('HTML WHATWG', 'input.html#text-(type=text)-state-and-search-state-(type=search)', '<input type="text">')}} {{ Spec2('HTML WHATWG') }} Definición inicial
{{SpecName('HTML5.1', 'sec-forms.html#text-typetext-state-and-search-state-typesearch', '<input type="text">')}} {{Spec2('HTML5.1')}} Definición inicial

Compatibilidad del navegador

{{Compat("html.elements.input.input-text")}}

Ve también