path: root/files/es/web/html/elemento/input/email/index.html

---
title: <input type="email">
slug: Web/HTML/Elemento/input/email
tags:
  - Email
  - Forms
  - Formulários HTML
  - HTML
  - Input Type
  - Referencia
  - correoᵉ
  - formulários
translation_of: Web/HTML/Element/input/email
---
<div>{{HTMLRef}}</div>

<p><span class="seoSummary">Los elementos {{HTMLElement("input")}} de tipo {{HTMLAttrDef("email")}} se utilizan para permitir que el usuario ingrese y edite una dirección de correoᵉ o, si se especifica el atributo {{web.link("/es/docs/Web/HTML/Attributes/multiple", "multiple")}}, una lista de direcciones de correoᵉ.</span></p>

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

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

<p>El valor de {{HTMLElement("input")}} se valida automáticamente para garantizar que esté vacío o sea una dirección de correoᵉ con el formato adecuado (o una lista de direcciones) antes de que se pueda enviar el formulario. Las pseudoclases {{CSSxRef(":valid")}} e {{CSSxRef(":invalid")}} de CSS se aplican automáticamente según corresponda para indicar visualmente si el valor actual del campo es una dirección de correoᵉ válida o no.</p>

<p>En los navegadores que no admiten entradas de tipo <code>email</code>, una entrada de <code>email</code> vuelve a ser un {{HTMLElement("input")}} {{HTMLElement("input/text", "text")}} estándar.</p>

<table class="properties">
 <tbody>
  <tr>
   <td><strong>{{anch("Value")}}</strong></td>
   <td>Un {{DOMxRef("DOMString")}} que representa una dirección de correo electrónico o vacío</td>
  </tr>
  <tr>
   <td><strong>Eventos</strong></td>
   <td>{{DOMxRef("HTMLElement/change_event", "change")}} y {{DOMxRef("HTMLElement/input_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("multiple", "input")}}, {{HTMLAttrxRef("name", "input")}}, {{HTMLAttrxRef("pattern", "input")}}, {{HTMLAttrxRef("placeholder", "input")}}, {{HTMLAttrxRef("readonly", "input")}}, {{HTMLAttrxRef("required", "input")}}, {{HTMLAttrxRef("size", "input")}} y {{HTMLAttrxRef("type", "input")}}</td>
  </tr>
  <tr>
   <td><strong>IDL attributes</strong></td>
   <td><code>list</code> y <code>value</code></td>
  </tr>
  <tr>
   <td><strong>Métodos</strong></td>
   <td>{{domxref("HTMLInputElement.select", "select()")}}</td>
  </tr>
 </tbody>
</table>

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

<p>El atributo {{HTMLAttrxRef("value", "input")}} del elemento {{HTMLElement("input")}} contiene un {{DOMxRef("DOMString")}} que se valida automáticamente conforme a la sintaxis del correoᵉ. Específicamente, hay tres posibles formatos de valor que pasarán la validación:</p>

<ol>
 <li>Una cadena vacía ("") — indica que el usuario no ingresó un valor o que el valor fue eliminado.</li>
 <li>Una única dirección de correoᵉ debidamente formada. Esto no necesariamente significa que exista la dirección de correo electrónico, pero al menos tiene el formato correcto. En términos simples, esto significa <code>nombreusuario@dominio</code> o <code>nombreusuario@dominio.tld</code>. Hay más que eso, por supuesto; consulta {{anch("Validación")}} para obtener una {{Glossary("expresión regular")}} que coincida con el algoritmo de validación de la dirección de correoᵉ.</li>
 <li>Si y solo se especifica el atributo {{HTMLAttrxRef("multiple", "input")}}, el valor puede ser una lista de direcciones de correoᵉ correctamente formadas separadas por comas. Los espacios en blanco iniciales y finales se eliminan de cada dirección de la lista.</li>
</ol>

<p>Consulta {{anch("Validación")}} para obtener detalles sobre cómo se validan las direcciones de correoᵉ para asegurarte de que tengan el formato correcto.</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 <code> email </code> 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("multiple")}}</code></td>
   <td>Si se permite o no la introducción de varias direcciones de correoᵉ separadas por comas.</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>
 </tbody>
</table>

<p id="htmlattrdeflist">{{page("/es/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}</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 {{HTMLAttrxRef("email", "input")}}. Debe ser un valor entero 0 o superior. Si no se especifica {{HTMLAttrxRef("maxlength", "input")}}, o se especifica un valor no válido, la entrada de {{HTMLAttrxRef("email", "input")}} 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 {{HTMLAttrxRef("email", "input")}}. Debe ser un valor entero no negativo menor o igual al valor especificado por {{HTMLAttrxRef("maxlength", "input")}}. Si no se especifica {{HTMLAttrxRef("minlength", "input")}} o se especifica un valor no válido, la entrada de {{HTMLAttrDef("email")}} 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="HTMLAttrDefmultiple">{{HTMLAttrDef("multiple")}}</h3>

<p>Un atributo booleano que, si está presente, indica que el usuario puede ingresar una lista de múltiples direcciones de correoᵉ, separadas por comas y, opcionalmente, espacios en blanco. Consulta {{anch("Permitir varias direcciones de correoᵉ")}} para ver un ejemplo, o {{web.link("/es/docs/Web/HTML/Attributes/multiple", "HTML el atributo: multiple")}} para más detalles.</p>

<div class="note">
<p><strong>Nota</strong>: Normalmente, si especificas el atributo {{HTMLAttrxRef("required", "input")}}, el usuario debe ingresar una dirección de correoᵉ válida para que el campo se considere válido. Sin embargo, si agregas el atributo {{HTMLAttrDef("multiple")}}, una lista de cero direcciones de correo electrónico (una cadena vacía o una que sea completamente en blanco) es un valor válido. En otras palabras, el usuario no tiene que ingresar ni siquiera una dirección de correo electrónico cuando se especifica {{HTMLAttrDef("multiple")}}, independientemente del valor de {{HTMLAttrDef("required")}}.</p>
</div>

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

<p>{{page("/es/docs/Web/HTML/Element/input/text", "pattern-include")}}</p>

<p>Consulta la sección {{anch("Patrón de validación")}} para obtener detalles y ver un ejemplo.</p>

<p>{{page("/es/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p>

<p>{{page("/es/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p>

<p>{{page("/es/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}</p>

<h2 id="Usar_inputs_de_tipo_email">Usar <code>input</code>s de tipo <code>email</code></h2>

<p>Las direcciones de correoᵉ se encuentran entre los formularios de datos textuales que se ingresan con mayor frecuencia en la web; se utilizan al iniciar sesión en sitios web, al solicitar información, para permitir la confirmación de pedidos, para correo web, etc. Por lo tanto, el tipo de entrada {{HTMLAttrDef("email")}} puede hacer que tu trabajo como desarrollador web sea mucho más fácil, ya que puede ayudar a simplificar la tarea al crear la interfaz de usuario y la lógica para las direcciones de correoᵉ. Cuando creas una entrada de correoᵉ con el valor de {{HTMLAttrDef("type")}} adecuado, {{HTMLAttrDef("email")}}, obtienes validación automática de que el texto ingresado esté por lo menos en la forma correcta para potencialmente ser una dirección de correoᵉ legítima. Esto puede ayudar a evitar casos en los que el usuario escribe mal su dirección o proporciona una dirección no válida.</p>

<p>Sin embargo, es importante tener en cuenta que esto no es suficiente para garantizar que el texto especificado sea una dirección de correoᵉ que realmente exista, que corresponda al usuario del sitio o que sea aceptable de cualquier otra manera. Simplemente garantiza que el valor del campo tenga el formato adecuado para ser una dirección de correoᵉ.</p>

<div class="note">
<p><strong>Nota</strong>: También es crucial recordar que un usuario puede jugar con tu HTML detrás de la escena, por lo que tu sitio <em>no debe</em> utilizar esta validación por motivos de seguridad. <em>Debes</em> verificar la dirección de correoᵉ en el lado del servidor de cualquier transacción en la que el texto proporcionado pueda tener implicaciones de seguridad de cualquier tipo.</p>
</div>

<h3 id="Una_sencilla_entrada_de_correoᵉ">Una sencilla entrada de correoᵉ</h3>

<p>Actualmente, todos los navegadores que admiten este elemento lo implementan como un campo de entrada de texto estándar con características básicas de validación. Sin embargo, la especificación permite a los navegadores cierta libertad en esto. Por ejemplo, el elemento se podría integrar con la libreta de direcciones incorporada del dispositivo del usuario para permitir seleccionar direcciones de correoᵉ de esa lista. En su forma más básica, una entrada de tipo {{HTMLAttrDef("email")}} se puede implementar así:</p>

<pre class="brush: html notranslate">&lt;input id="emailAddress" type="email"&gt;</pre>

<p>{{ EmbedLiveSample('Una_sencilla_entrada_de_correoᵉ', 600, 40) }}</p>

<p>Ten en cuenta que se considera válido cuando está vacío y cuando se ingresa una única dirección de correoᵉ con formato válido, pero por lo demás no se considera válido. Al agregar el atributo {{HTMLAttrxRef("required", "input")}}, solo se permiten direcciones de correoᵉ con formato válido; la entrada ya no se considera válida cuando está vacía.</p>

<h3 id="Permitir_varias_direcciones_de_correoᵉ">Permitir varias direcciones de correoᵉ</h3>

<p>Al agregar el atributo booleano {{web.link("/es/docs/Web/HTML/Attributes/multiple", "multiple")}}, la entrada se puede configurar para aceptar varias direcciones de correoᵉ.</p>

<pre class="brush: html notranslate">&lt;input id="emailAddress" type="email" multiple&gt;</pre>

<p>{{ EmbedLiveSample('permitir_varias_direcciones_de_correoᵉ', 600, 40) }}</p>

<p>La entrada ahora se considera válida cuando se ingresa una sola dirección de correoᵉ, o cuando cualquier número de direcciones de correo electrónico separadas por comas y, opcionalmente, algún número de espacios en blanco están presentes.</p>

<div class="note">
<p><strong>Nota</strong>: Cuando se utiliza {{HTMLAttrDef("multiple")}}, el valor <em>puede</em> estar vacío.</p>
</div>

<p>Algunos ejemplos de cadenas válidas cuando se especifica {{HTMLAttrDef("multiple")}}:</p>

<ul>
 <li><code>""</code></li>
 <li><code>"yo@ejemplo"</code></li>
 <li><code>"yo@ejemplo.org"</code></li>
 <li><code>"yo@ejemplo.org,tu@ejemplo.org"</code></li>
 <li><code>"yo@ejemplo.org, tu@ejemplo.org"</code></li>
 <li><code>"yo@ejemplo.org,tu@example.org, su@ejemplo.org"</code></li>
</ul>

<p>Algunos ejemplos de cadenas no válidas:</p>

<ul>
 <li><code>","</code></li>
 <li><code>"me"</code></li>
 <li><code>"me@example.org you@example.org"</code></li>
</ul>

<h3 id="Marcadores_de_posición">Marcadores de posición</h3>

<p>A veces es útil ofrecer una pista en contexto sobre qué forma deben tomar los datos de entrada. Esto puede ser importante especialmente si el diseño de la página no ofrece etiquetas descriptivas para cada {{HTMLElement("input")}}. Aquí es donde entran los marcadores de posición ({{HTMLAttrDef("placeholder")}}s). Un marcador de posición es un valor que demuestra la forma que debe tomar el {{HTMLAttrDef("value")}} al presentar un ejemplo de un valor válido, que se muestra dentro del cuadro de edición cuando el valor del elemento es "". Una vez que se ingresan datos en el cuadro, el marcador de posición desaparece; si se vacía la caja, vuelve a aparecer el marcador de posición.</p>

<p>Aquí, tenemos una entrada de {{HTMLAttrDef("email")}} con el marcador de posición <code>chofy@ejemplo.com</code>. Observa cómo el marcador de posición desaparece y reaparece a medida que manipulas el contenido del campo de edición.</p>

<pre class="brush: html notranslate">&lt;input type="email" placeholder="chofy@ejemplo.com"&gt;</pre>

<p>{{ EmbedLiveSample('Marcadores_de_posición', 600, 40) }}</p>

<h3 id="Controlar_el_tamaño_del_valor_ingresado">Controlar el tamaño del valor ingresado</h3>

<p>Puedes controlar no solo la longitud física del cuadro de entrada, sino también las longitudes mínima y máxima permitidas para el texto de entrada en sí mismo.</p>

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

<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 el cuadro de entrada puede mostrar a la vez. En este ejemplo, el cuadro de edición {{HTMLAttrDef("email")}} tiene 15 caracteres de ancho:</p>

<pre class="brush: html notranslate">&lt;input type="email" size="15"&gt;</pre>

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

<h4 id="Longitud_del_valor_del_elemento">Longitud del valor del elemento</h4>

<p>El {{HTMLAttrDef("size")}} es independiente de la limitación de longitud de la dirección de correoᵉ ingresada, por lo que puedes hacer que los campos quepan en un espacio pequeño y, al mismo tiempo, permitir que se ingresen cadenas de direcciones de correoᵉ más largas. Puedes especificar una longitud mínima, en caracteres, para la dirección de correoᵉ ingresada usando el atributo {{HTMLAttrxRef("minlength", "input")}}; de manera similar, usa {{HTMLAttrxRef("maxlength", "input")}} para establecer la longitud máxima de la dirección de correoᵉ ingresada.</p>

<p>El siguiente ejemplo crea un cuadro de entrada de dirección de correoᵉ de 32 caracteres de ancho, que requiere que el contenido tenga no menos de 3 caracteres y no más de 64 caracteres.</p>

<pre class="brush: html notranslate">&lt;input type="email" size="32" minlength="3" maxlength="64"&gt;</pre>

<p>{{EmbedLiveSample("Longitud_del_valor_del_elemento", 600, 40) }}</p>

<h3 id="Proporcionar_opciones_predeterminadas">Proporcionar opciones predeterminadas</h3>

<p>Como siempre, puedes proporcionar un valor predeterminado para un cuadro de entrada de tipo <code>email</code> configurando su atributo {{HTMLAttrxRef("value", "input")}}:</p>

<div id="Default_value">
<pre class="brush: html notranslate">&lt;input type="email" value="usuario@ejemplo.com"&gt;</pre>
</div>

<p>{{EmbedLiveSample("Default_value", 600, 40)}}</p>

<h4 id="Ofreciendo_valores_sugeridos">Ofreciendo valores sugeridos</h4>

<p>Yendo un paso más allá, puedes proporcionar una lista de opciones predeterminadas entre las que el usuario puede seleccionar especificando el atributo {{HTMLAttrxRef("list", "input")}}. Esto no limita al usuario a esas opciones, pero le permite seleccionar rápidamente las direcciones de correoᵉ de uso común. Esto también ofrece sugerencias para {{HTMLAttrxRef("autocomplete", "input")}}. El atributo {{HTMLAttrDef("list")}} especifica el ID de un {{HTMLElement("datalist")}}, que a su vez contiene un elemento {{HTMLElement("option")}} por valor sugerido; El valor de cada opción es el valor sugerido correspondiente para el cuadro de entrada de correoᵉ.</p>

<pre class="brush: html notranslate">&lt;input type="email" size="40" list="defaultEmails"&gt;

&lt;datalist id="defaultEmails"&gt;
  &lt;option value="jbond007@mi6.defence.gov.uk"&gt;
  &lt;option value="jbourne@unknown.net"&gt;
  &lt;option value="nfury@shield.org"&gt;
  &lt;option value="tony@starkindustries.com"&gt;
  &lt;option value="hulk@grrrrrrrr.arg"&gt;
&lt;/datalist&gt;</pre>

<p>{{EmbedLiveSample("Ofreciendo_valores_sugeridos", 600, 40)}}</p>

<p>Con el elemento {{HTMLElement("datalist")}} y sus {{HTMLElement("option")}}es en su lugar, el navegador ofrecerá los valores especificados como valores potenciales para la dirección de correoᵉ; normalmente se presenta como un menú emergente o desplegable que contiene las sugerencias. Si bien la experiencia del usuario específico puede variar de un navegador a otro, normalmente al hacer clic en el cuadro de edición se muestra un menú desplegable con las direcciones de correoᵉ sugeridas. Luego, a medida que el usuario escribe, la lista se filtra para mostrar solo los valores coincidentes. Cada carácter escrito reduce la lista hasta que el usuario realiza una selección o escribe un valor personalizado.</p>

<p><img alt="Animación: usa la entrada del teclado para filtrar la lista de direcciones de correo electrónico sugeridas" src="https://mdn.mozillademos.org/files/14831/html-input-email1.gif" style="border-style: solid; border-width: 1px; height: 168px; width: 352px;"></p>

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

<p>Hay dos niveles de validación de contenido disponibles para las entradas de {{HTMLAttrDef("email")}}. Primero, está el nivel de validación estándar que se ofrece a todos los {{HTMLElement("input")}}s, que automáticamente asegura que el contenido cumple con los requisitos para ser una dirección de correoᵉ válida. Pero también existe la opción de agregar filtros adicionales para garantizar que se satisfagan tus propias necesidades especializadas, si las tienes.</p>

<div class="warning">
<p><strong>Importante</strong>: La validación del formulario HTML <em>no</em> sustituye a los scripts que garantizan que los datos ingresados 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="Validación_básica">Validación básica</h3>

<p>Los navegadores que admiten el tipo de entrada {{HTMLAttrDef("email")}} automáticamente proporcionan una validación para garantizar que solo se introduzca en el cuadro de entrada el texto que coincida con el formato estándar para las direcciones de correoᵉ de Internet. Los navegadores que implementan la especificación deben utilizar un algoritmo equivalente a la siguiente expresión regular:</p>

<pre class="brush: js notranslate">/^[a-zA-Z0-9.!#$%&amp;'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}
  [a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
</pre>

<p>Para obtener más información sobre cómo funciona la validación de formularios y cómo aprovechar las propiedades de CSS {{CSSxRef(":valid")}} e {{CSSxRef(":invalid")}} para estilizar la entrada en función de si el el valor actual es válido, consulta {{web.link("/es/docs/Learn/HTML/Forms/Form_validation", "Validación de datos de formulario")}}.</p>

<div class="note">
<p><strong>Nota</strong>: Existen problemas de especificación conocidos relacionados con los nombres de dominio internacionales y la validación de direcciones de correo electrónico en HTML. Consulta el <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15489">error 15489 en W3C</a> para obtener más detalles.</p>
</div>

<h3 id="Patrón_de_validación">Patrón de validación</h3>

<p>Si necesitas restringir la dirección de correo electrónico ingresada más allá de "cualquier cadena que parezca una dirección de correo electrónico", puedes usar el atributo {{HTMLAttrxRef("pattern", "input")}} para especificar una {{Glossary("expresión regular")}} con la cual el valor debe coincidir para que sea válido. Si se especifica el atributo {{HTMLAttrxRef("multiple", "input")}}, cada elemento individual en la lista de valores delimitados por comas debe coincidir con la {{Glossary("expresión regular")}}.</p>

<p>Por ejemplo, supón que estás creando una página para los empleados de "Best Startup Ever, Inc". lo que les permitirá ponerse en contacto con su departamento de TI para obtener ayuda. En nuestro formulario simplificado, el usuario debe ingresar su dirección de correoᵉ y un mensaje que describa el problema con el que necesita ayuda. Queremos asegurarnos de que el usuario no solo proporcione una dirección de correoᵉ válida, sino que, por motivos de seguridad, requerimos que la dirección sea una dirección de correo electrónico corporativa interna.</p>

<p>Dado que las entradas de tipo {{HTMLAttrDef("email")}} se comprueban con la validación de la dirección de correoᵉ estándar <em>y</em> el {{HTMLAttrxRef("pattern", "input")}} especificado, se puede implementar así de fácil. Observa cómo:</p>

<div class="hidden">
<pre class="brush: css notranslate">body {
  font: 16px sans-serif;
}

.emailBox {
  padding-bottom: 20px;
}

.messageBox {
  padding-bottom: 20px;
}

[parcial]label :
  [parcial]line-height: 1.5;
}

label::after {
  content: ":";
}</pre>
</div>

<pre class="brush: html notranslate">&lt;form&gt;
 &lt;div class="emailBox"&gt;
   &lt;label for="emailAddress"&gt;Tu dirección de correoᵉ&lt;/label&gt;&lt;br&gt;
   &lt;input id="emailAddress" type="email" size="64" maxLength="64" required
          placeholder="nombreusuario@beststartupever.com" pattern=".+@beststartupever.com"
          title="Por favor, solo proporciona una dirección de correoᵉ corporativa que te haya proporcionado Best Startup Ever"&gt;
 &lt;/div&gt;

 &lt;div class="messageBox"&gt;
   &lt;label for="message"&gt;Solicitud&lt;/label&gt;&lt;br&gt;
   &lt;textarea id="message" cols="80" rows="8" required
             placeholder="Mis zapatos están demasiado apretados y he olvidado cómo bailar."&gt;&lt;/textarea&gt;
 &lt;/div&gt;
  &lt;input type="submit" value="Envía solicitud"&gt;
&lt;/form&gt;
</pre>

<p>{{EmbedLiveSample("Patrón_de_validación", 700, 275)}}</p>

<p>El {{HTMLElement("form")}} contiene un {{HTMLElement("input")}} de tipo {{HTMLAttrxRef("email", "input")}} para la dirección de correoᵉ del usuario, un {{HTMLElement("textarea")}} para ingresar su mensaje y un {{HTMLElement("input")}} de tipo {{web.link("/es/docs/Web/HTML/Element/input/submit", "submit")}}, que crea un botón para enviar el formulario. Cada cuadro de entrada de texto tiene una {{HTMLElement("label")}} asociada para que el usuario sepa lo que se espera de ellos.</p>

<p>Échale un vistazo más de cerca al cuadro de entrada de la dirección de correoᵉ. Sus atributos {{HTMLAttrxRef("size", "input")}} y {{HTMLAttrxRef("maxlength", "input")}} se establecen en 64 para mostrar espacio para 64 caracteres en direcciones de correoᵉ y limitar la cantidad de caracteres ingresados realmente a un máximo de 64. Se especifica el atributo {{HTMLAttrxRef("required", "input")}}, lo cual hace obligatorio que se proporcione una dirección de correoᵉ válida.</p>

<p>Se proporciona un {{HTMLAttrxRef("placeholder", "input")}} apropiado, <code>nombreusuario@beststartupever.com</code>, para demostrar lo que constituye una entrada válida. Esta cadena demuestra que se debe ingresar una dirección de correoᵉ y sugiere que debe ser una cuenta corporativa de "beststartupever.com". Esto se suma al hecho de que el uso del tipo {{HTMLAttrDef("email")}} validará el texto para garantizar que tenga el formato de una dirección de correoᵉ. Si el texto en el cuadro de entrada no es una dirección de correoᵉ, recibirá un mensaje de error similar a este:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/14855/enter-valid-email-address.png" style="height: 125px; width: 530px;"></p>

<p>Si dejas las cosas así, al menos estarías validando direcciones de correoᵉ legítimas. Pero quieres ir un paso más allá: quieres asegurarte de que la dirección de correoᵉ tenga el formato "<em>nombreusuario</em>@beststartupever.com". Aquí es donde usarás el {{HTMLAttrxRef("pattern", "input")}}. Establece el {{HTMLAttrDef("pattern")}} en <code>.+@beststartupever.com</code>. Esta simple expresión regular solicita una cadena que consta de al menos un carácter de cualquier tipo, luego una "@" seguida por el nombre de dominio "beststartupever.com".</p>

<p>Ten en cuenta que esto ni siquiera se acerca a un filtro adecuado para direcciones de correo electrónico válidas; permitiría cosas como "@ beststartupever.com" (tenga en cuenta el espacio inicial) o "@@ beststartupever.com", ninguna de las cuales es válida. Sin embargo, el navegador ejecuta tanto el filtro de dirección de correoᵉ estándar <em>como</em> nuestro patrón personalizado contra el texto especificado. Como resultado, terminamos con una validación que dice "asegúrate de que se asemeje a una dirección de correoᵉ válida, y si lo es, asegúrate de que también sea una dirección beststartupever.com".</p>

<p>Es recomendable utilizar el atributo {{HTMLAttrxRef("title")}} junto con {{HTMLAttrDef("pattern")}}. Si lo haces, el {{HTMLAttrDef("title")}} <em>debe</em> describir el patrón. Es decir, debe explicar qué formato deben adoptar los datos, en lugar de cualquier otra información. Esto se debe a que el {{HTMLAttrDef("title")}} se puede mostrar o pronunciar como parte de un mensaje de error de validación. Por ejemplo, el navegador puede presentar el mensaje "El texto ingresado no coincide con el patrón requerido". seguido de su {{HTMLAttrDef("title")}} especificado. Si tu {{HTMLAttrDef("title")}} es algo así como "Dirección de correoᵉ", el resultado sería el mensaje "El texto ingresado no coincide con el patrón requerido. Dirección de correoᵉ", no es muy buena.</p>

<p>Es por eso que, en cambio, especificamos la cadena "Por favor, proporciona solo una dirección de correoᵉ corporativo de Best Startup Ever", Al hacerlo, el mensaje de error completo resultante podría ser algo como "El texto ingresado no coincide con el patrón requerido. Proporciona solo una dirección de correoᵉ corporativo de Best Startup Ever."</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/14853/email-pattern-match-bad.png" style="height: 140px; width: 536px;"></p>

<div class="note">
<p><strong>Nota</strong>: Si tienes problemas al escribir tus expresiones regulares de validación y no funcionan correctamente, consulta la consola de tu navegador; posiblemente haya útiles mensajes de error que te ayudarán a resolver el problema.</p>
</div>

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

<p>Aquí tenemos una entrada de correoᵉ con el ID <code>emailAddress</code> que puede tener un máximo de 256 caracteres. El cuadro de entrada en sí mismo, físicamente tiene 64 caracteres de ancho y muestra el texto <code>usuario@ejemplo.gov</code> como marcador de posición cada vez que el campo está vacío. Además, al utilizar el atributo {{web.link("/es/docs/Web/HTML/Attributes/multiple", "multiple")}}, el cuadro se configura para permitir al usuario ingresar cero o más direcciones de correoᵉ, separadas por comas, como se describe en {{anch("Permitir varias direcciones de correoᵉ")}}. Como toque final, el atributo {{web.link("/es/docs/Web/HTML/Attributes/list", "list")}} contiene el ID de un {{HTMLElement("datalist")}} cuyas {{HTMLElement("option")}}es especifican un conjunto de valores sugeridos que el usuario puede elegir.</p>

<p>Como toque adicional, el elemento {{HTMLElement("label")}} se utiliza para establecer una etiqueta para el cuadro de entrada de Correoᵉ, con su atributo {{HTMLAttrxRef("for", "label")}} que hace referencia al ID <code>emailAddress</code> del elemento {{HTMLElement("input")}}. Al asociar los dos elementos de esta manera, entonces al hacer clic en la etiqueta se enfocará el elemento de entrada.</p>

<pre class="brush: html notranslate">&lt;label for="emailAddress"&gt;Correoᵉ&lt;/label&gt;&lt;br/&gt;
&lt;input id="emailAddress" type="email" placeholder="usuario@ejemplo.gov"
       list="defaultEmails" size="64" maxlength="256" multiple&gt;

&lt;datalist id="defaultEmails"&gt;
  &lt;option value="jbond007@mi6.defence.gov.uk"&gt;
  &lt;option value="jbourne@unknown.net"&gt;
  &lt;option value="nfury@shield.org"&gt;
  &lt;option value="tony@starkindustries.com"&gt;
  &lt;option value="hulk@grrrrrrrr.arg"&gt;
&lt;/datalist&gt;</pre>

<p>{{EmbedLiveSample('Ejemplos', 600, 50)}}</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', 'forms.html#e-mail-state-(type=email)', '&lt;input type="email"&gt;')}}</td>
   <td>{{ Spec2('HTML WHATWG') }}</td>
   <td>Definición inicial</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', 'sec-forms.html#email-state-typeemail', '&lt;input type="email"&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 class="external" 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-email")}}</p>

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

<ul>
 <li>{{web.link("/es/docs/Learn/HTML/Forms", "Guía de formularios HTML")}}</li>
 <li>{{HTMLElement("input")}}</li>
 <li><code><a href="/es/docs/Web/HTML/Element/input/tel">&lt;input type="tel"&gt;</a></code></li>
 <li><code><a href="/es/docs/Web/HTML/Element/input/url">&lt;input type="url"&gt;</a></code></li>
 <li>Atributos:
  <ul>
   <li>{{web.link("/es/docs/Web/HTML/Attributes/list", "list")}}</li>
   <li>{{web.link("/es/docs/Web/HTML/Attributes/minlength", "minlength")}}</li>
   <li>{{web.link("/es/docs/Web/HTML/Attributes/maxlength", "maxlength")}}</li>
   <li>{{web.link("/es/docs/Web/HTML/Attributes/multiple", "multiple")}}</li>
   <li>{{web.link("/es/docs/Web/HTML/Attributes/pattern", "pattern")}}</li>
   <li>{{web.link("/es/docs/Web/HTML/Attributes/placeholder", "placeholder")}}</li>
   <li>{{web.link("/es/docs/Web/HTML/Attributes/readonly", "readonly")}}</li>
   <li>{{web.link("/es/docs/Web/HTML/Attributes/size", "size")}}</li>
  </ul>
 </li>
 <li>{{web.link("/es/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets", "Compatibilidad de propiedades CSS")}}</li>
</ul>