path: root/files/es/web/html/element/input/text/index.html

---
title: <input type="text">
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
---
<div>{{HTMLRef}}</div>

<p><span class="seoSummary">Los elementos {{HTMLElement("input")}} de tipo {{HTMLAttrDef("text")}} crean campos de texto básicos de una sola línea.</span></p>

<div>{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-shorter")}}</div>

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

<table class="properties">
 <tbody>
  <tr>
   <td><strong>{{anch("Value")}}</strong></td>
   <td>Un {{DOMxRef("DOMString")}} que representa el texto contenido en el campo de texto.</td>
  </tr>
  <tr>
   <td><strong>Eventos</strong></td>
   <td>{{event("change")}} y {{event("input")}}</td>
  </tr>
  <tr>
   <td><strong>Atributos comunes admitidos</strong></td>
   <td>{{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")}}</td>
  </tr>
  <tr>
   <td><strong>IDL attributes</strong></td>
   <td>{{htmlattrxref("list", "input")}}, {{HTMLAttrDef("value")}}</td>
  </tr>
  <tr>
   <td><strong>Métodos</strong></td>
   <td>{{DOMxRef("HTMLInputElement.select", "select()")}}, {{DOMxRef("HTMLInputElement.setRangeText", "setRangeText()")}} y {{DOMxRef("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}.</td>
  </tr>
 </tbody>
</table>

<h2 id="Value"><code>Value</code></h2>

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

<pre class="brush: js notranslate">let theText = myTextInput.value;
</pre>

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

<h2 id="Atributos_adicionales">Atributos adicionales</h2>

<p>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:</p>

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

<h3 id="HTMLAttrDeflist">{{HTMLAttrDef("list")}}</h3>

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

<h3 id="HTMLAttrDefmaxlength">{{HTMLAttrDef("maxlength")}}</h3>

<p>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")}}.</p>

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

<h3 id="HTMLAttrDefminlength">{{HTMLAttrDef("minlength")}}</h3>

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

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

<h3 id="HTMLAttrDefpattern">{{HTMLAttrDef("pattern")}}</h3>

<div id="pattern-include">
<p>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 <code>'u'</code> 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.</p>

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

<div class="note">
<p><strong>Consejo</strong>:: 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.</p>
</div>
</div>

<p>Consulta {{anch("Especificación de un patrón")}} para obtener más detalles y un ejemplo.</p>

<h3 id="HTMLAttrDefplaceholder">{{HTMLAttrDef("placeholder")}}</h3>

<p>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 <em>no debe</em> incluir retornos de carro o saltos de línea.</p>

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

<div class="note">
<p><strong>Nota</strong>: 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.</p>
</div>

<h3 id="HTMLAttrDefreadonly">{{HTMLAttrDef("readonly")}}</h3>

<p>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")}}.</p>

<div class="note">
<p><strong>Nota</strong>: 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.</p>
</div>

<h3 id="HTMLAttrDefsize">{{HTMLAttrDef("size")}}</h3>

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

<p>Esto <em>no</em> 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")}}.</p>

<h3 id="HTMLAttrDefspellcheck">{{HTMLAttrDef("spellcheck")}}</h3>

<p>{{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:</p>

<dl>
 <dt><code>false</code></dt>
 <dd>Desactive la corrección ortográfica de este elemento.</dd>
 <dt><code>true</code></dt>
 <dd>Habilita la revisión ortográfica de este elemento.</dd>
 <dt>"" (cadena vacía) o sin valor</dt>
 <dd>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.</dd>
</dl>

<p>Un campo de entrada puede tener habilitado el corrector ortográfico si no tiene el atributo {{anch("readonly")}} configurado y no está deshabilitado.</p>

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

<h2 id="Atributos_no_estándar">Atributos no estándar</h2>

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

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Atributo</th>
   <th scope="col">Descripción</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>{{anch("autocorrect")}}</code></td>
   <td>Una cadena que indica si la autocorrección está activa (<code>on</code>) o (<code>off</code>). <strong>Solo Safari.</strong></td>
  </tr>
  <tr>
   <td><code>{{anch("mozactionhint")}}</code></td>
   <td>Una cadena que indica el tipo de acción que se realizará cuando el usuario presione la tecla <kbd>Intro</kbd> o <kbd>Retorno</kbd> mientras editas el campo; esto se usa para determinar una etiqueta apropiada para esa tecla en un teclado virtual. <strong>Solo Firefox para Android.</strong></td>
  </tr>
 </tbody>
</table>

<h3 id="HTMLAttrDefautocorrect_non-standard_inline">{{HTMLAttrDef("autocorrect")}} {{non-standard_inline}}</h3>

<div id="autocorrect-include">
<p>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:</p>

<dl>
 <dt><code>on</code></dt>
 <dd>Habilita la corrección automática de errores tipográficos, así como el procesamiento de sustituciones de texto, si los hay.</dd>
 <dt><code>off</code></dt>
 <dd>Desactiva la corrección automática y las sustituciones de texto.</dd>
</dl>
</div>

<h3 id="HTMLAttrDefmozactionhint_non-standard_inline">{{HTMLAttrDef("mozactionhint")}} {{non-standard_inline}}</h3>

<div id="mozactionhint-include">
<p>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 <kbd>Intro</kbd> o <kbd>Retorno</kbd> mientras edita el campo. Esta información se usa para decidir qué tipo de etiqueta usar en la tecla <kbd>Intro</kbd> del teclado virtual.</p>

<div class="note">
<p><strong>Nota</strong>: Este <a href="https://html.spec.whatwg.org/#input-modalities:-the-enterkeyhint-attribute">se ha estandarizado</a> 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)}}.</p>
</div>

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

<h2 id="Usar_entradas_de_texto">Usar entradas de texto</h2>

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

<h3 id="Ejemplo_básico">Ejemplo básico</h3>

<pre class="brush: html notranslate">&lt;form&gt;
  &lt;div&gt;
    &lt;label for="uname"&gt;Elige un nombre de usuario: &lt;/label&gt;
    &lt;input type="text" id="uname" name="name"&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;button&gt;Enviar&lt;/button&gt;
  &lt;/div&gt;
&lt;/form&gt;</pre>

<p>Esto se renderiza así:</p>

<p>{{EmbedLiveSample("Ejemplo_básico", 600, 50)}}</p>

<p>Cuando se envía, el par de nombre/valor de datos enviado al servidor será <code>uname=Chris</code> (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.</p>

<h3 id="Establecer_marcadores_de_posición">Establecer marcadores de posición</h3>

<p>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:</p>

<pre class="brush: html notranslate">&lt;form&gt;
  &lt;div&gt;
    &lt;label for="uname"&gt;Elige un nombre de usuario: &lt;/label&gt;
    &lt;input type="text" id="uname" name="name"
           placeholder="Una sola palabra, en minúsculas"&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;button&gt;Enviar&lt;/button&gt;
  &lt;/div&gt;
&lt;/form&gt;</pre>

<p>Puedes ver cómo se representa el marcador de posición a continuación:</p>

<p>{{EmbedLiveSample("Establecer_marcadores_de_posición", 600, 50)}}</p>

<p>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")}}.</p>

<h3 id="Tamaño_físico_del_elemento_de_entrada">Tamaño físico del elemento de entrada</h3>

<p>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:</p>

<pre class="brush: html notranslate">&lt;form&gt;
  &lt;div&gt;
    &lt;label for="uname"&gt;Elige un nombre de usuario: &lt;/label&gt;
    &lt;input type="text" id="uname" name="name"
           placeholder="Una sola palabra, en minúsculas"
           size="30"&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;button&gt;Enviar&lt;/button&gt;
  &lt;/div&gt;
&lt;/form&gt;</pre>

<p>{{ EmbedLiveSample('Tamaño_físico_del_elemento_de_entrada', 600, 50) }}</p>

<h2 id="Validación">Validación</h2>

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

<div class="note">
<p><strong>Nota</strong>: La validación del formulario HTML <em>no</em> 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.).</p>
</div>

<h3 id="Una_nota_sobre_estilizado">Una nota sobre estilizado</h3>

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

<pre class="brush: css notranslate">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;
}</pre>

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

<h3 id="Hacer_entrada_requerida">Hacer entrada requerida</h3>

<p>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:</p>

<pre class="brush: html notranslate">&lt;form&gt;
  &lt;div&gt;
    &lt;label for="uname"&gt;Elige un nombre de usuario: &lt;/label&gt;
    &lt;input type="text" id="uname" name="name" required&gt;
    &lt;span class="validity"&gt;&lt;/span&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;button&gt;Enviar&lt;/button&gt;
  &lt;/div&gt;
&lt;/form&gt;</pre>

<div class="hidden">
<pre class="brush: css notranslate">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; }</pre>
</div>

<p>Esto se renderiza así:</p>

<p>{{ EmbedLiveSample('Hacer_entrada_requerida', 600, 70) }}</p>

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

<h3 id="Longitud_del_valor_de_entrada">Longitud del valor de entrada</h3>

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

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

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

<div class="hidden">
<pre class="brush: css notranslate">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; }</pre>
</div>

<p>Esto se renderiza así:</p>

<p>{{ EmbedLiveSample('Longitud_del_valor_de_entrada', 600, 70) }}</p>

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

<div class="note">
<p><strong>Nota</strong>: 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.</p>
</div>

<h3 id="Especificación_de_un_patrón">Especificación de un patrón</h3>

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

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

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

<div class="hidden">
<pre class="brush: css notranslate">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;
}</pre>
</div>

<p>Esto se renderiza así:</p>

<p>{{ EmbedLiveSample('Especificación_de_un_patrón', 600, 110) }}</p>

<h2 id="Ejemplos">Ejemplos</h2>

<p>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")}}.</p>

<h2 id="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentario</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'input.html#text-(type=text)-state-and-search-state-(type=search)', '&lt;input type="text"&gt;')}}</td>
   <td>{{ Spec2('HTML WHATWG') }}</td>
   <td>Definición inicial</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', 'sec-forms.html#text-typetext-state-and-search-state-typesearch', '&lt;input type="text"&gt;')}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td>Definición inicial</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>

<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div>

<p>{{Compat("html.elements.input.input-text")}}</p>

<h2 id="Ve_también">Ve también</h2>

<ul>
 <li>{{web.link("/es/docs/Learn/HTML/Forms", "Formularios HTML")}}</li>
 <li>{{HTMLElement("input")}} y la interfaz {{DOMxRef("HTMLInputElement")}} en que se basa.</li>
 <li><code><a href="/en-US/docs/Web/HTML/Element/input/search">&lt;input type="search"&gt;</a></code></li>
 <li>{{HTMLElement("textarea")}}: Campo de entrada de texto multilínea</li>
 <li>{{web.link("/es/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets", "Compatibilidad de propiedades CSS")}}</li>
</ul>