<input type="email">

Los elementos <input> de tipo email se utilizan para permitir que el usuario ingrese y edite una dirección de correoᵉ o, si se especifica el atributo multiple, una lista de direcciones de correoᵉ.

El valor de <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 :valid e :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.

En los navegadores que no admiten entradas de tipo email, una entrada de email vuelve a ser un <input> text estándar.

Value Un DOMString que representa una dirección de correo electrónico o vacío
Eventos change y input
Atributos comunes admitidos autocomplete, list, maxlength, minlength, multiple, name, pattern, placeholder, readonly, required, size y type
IDL attributes list y value
Métodos select()

Value

El atributo value del elemento <input> contiene un 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:

  1. Una cadena vacía ("") — indica que el usuario no ingresó un valor o que el valor fue eliminado.
  2. 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 nombreusuario@dominio o nombreusuario@dominio.tld. Hay más que eso, por supuesto; consulta Validación para obtener una expresión regular que coincida con el algoritmo de validación de la dirección de correoᵉ.
  3. Si y solo se especifica el atributo multiple, 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.

Consulta Validación para obtener detalles sobre cómo se validan las direcciones de correoᵉ para asegurarte de que tengan el formato correcto.

Atributos adicionales

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

Atributo Descripción
list El id del elemento <datalist> que contiene las opciones de autocompletar predefinidas
maxlength El número máximo de caracteres que debe aceptar la entrada
minlength El número mínimo de caracteres que la entrada puede tener y aún se considera válida
multiple Si se permite o no la introducción de varias direcciones de correoᵉ separadas por comas.
pattern Una expresión regular que el contenido de la entrada debe coincidir para que sea válida
placeholder Un valor de ejemplo para mostrar en el campo de entrada siempre y cuando esté vacío
readonly Un atributo booleano que indica si el contenido de la entrada debe ser de solo lectura.
size Un número que indica cuántos caracteres de ancho debe tener el campo de entrada.

list

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

maxlength

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

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

minlength

El número mínimo de caracteres (como unidades de código UTF-16) que el usuario puede ingresar en la entrada de email. 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 email 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.

multiple

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 Permitir varias direcciones de correoᵉ para ver un ejemplo, o HTML el atributo: multiple para más detalles.

Nota: Normalmente, si especificas el atributo required, 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 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 multiple, independientemente del valor de required.

pattern

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

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

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

Consulta la sección Patrón de validación para obtener detalles y ver un ejemplo.

placeholder

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

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

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

readonly

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

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

size

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

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

Usar inputs de tipo email

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 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 type adecuado, 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.

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

Nota: También es crucial recordar que un usuario puede jugar con tu HTML detrás de la escena, por lo que tu sitio no debe utilizar esta validación por motivos de seguridad. Debes 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.

Una sencilla entrada de correoᵉ

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 email se puede implementar así:

<input id="emailAddress" type="email">

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 required, solo se permiten direcciones de correoᵉ con formato válido; la entrada ya no se considera válida cuando está vacía.

Permitir varias direcciones de correoᵉ

Al agregar el atributo booleano multiple, la entrada se puede configurar para aceptar varias direcciones de correoᵉ.

<input id="emailAddress" type="email" multiple>

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.

Nota: Cuando se utiliza multiple, el valor puede estar vacío.

Algunos ejemplos de cadenas válidas cuando se especifica multiple:

  • ""
  • "yo@ejemplo"
  • "yo@ejemplo.org"
  • "yo@ejemplo.org,tu@ejemplo.org"
  • "yo@ejemplo.org, tu@ejemplo.org"
  • "yo@ejemplo.org,tu@example.org, su@ejemplo.org"

Algunos ejemplos de cadenas no válidas:

  • ","
  • "me"
  • "me@example.org you@example.org"

Marcadores de posición

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 <input>. Aquí es donde entran los marcadores de posición (placeholders). Un marcador de posición es un valor que demuestra la forma que debe tomar el 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.

Aquí, tenemos una entrada de email con el marcador de posición chofy@ejemplo.com. Observa cómo el marcador de posición desaparece y reaparece a medida que manipulas el contenido del campo de edición.

<input type="email" placeholder="chofy@ejemplo.com">

Controlar el tamaño del valor ingresado

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.

Tamaño físico del elemento de entrada

El tamaño físico del cuadro de entrada se puede controlar mediante el atributo size. Con él, puedes especificar el número de caracteres que el cuadro de entrada puede mostrar a la vez. En este ejemplo, el cuadro de edición email tiene 15 caracteres de ancho:

<input type="email" size="15">

Longitud del valor del elemento

El 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 minlength; de manera similar, usa maxlength para establecer la longitud máxima de la dirección de correoᵉ ingresada.

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.

<input type="email" size="32" minlength="3" maxlength="64">

Proporcionar opciones predeterminadas

Como siempre, puedes proporcionar un valor predeterminado para un cuadro de entrada de tipo email configurando su atributo value:

<input type="email" value="usuario@ejemplo.com">

Ofreciendo valores sugeridos

Yendo un paso más allá, puedes proporcionar una lista de opciones predeterminadas entre las que el usuario puede seleccionar especificando el atributo list. 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 autocomplete. El atributo list especifica el ID de un <datalist>, que a su vez contiene un elemento <option> por valor sugerido; El valor de cada opción es el valor sugerido correspondiente para el cuadro de entrada de correoᵉ.

<input type="email" size="40" list="defaultEmails">

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

Con el elemento <datalist> y sus <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.

Animación: usa la entrada del teclado para filtrar la lista de direcciones de correo electrónico sugeridas

Validación

Hay dos niveles de validación de contenido disponibles para las entradas de email. Primero, está el nivel de validación estándar que se ofrece a todos los <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.

Importante: La validación del formulario HTML no 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.).

Validación básica

Los navegadores que admiten el tipo de entrada 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:

/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[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])?)*$/

Para obtener más información sobre cómo funciona la validación de formularios y cómo aprovechar las propiedades de CSS :valid e :invalid para estilizar la entrada en función de si el el valor actual es válido, consulta Validación de datos de formulario.

Nota: 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 error 15489 en W3C para obtener más detalles.

Patrón de validación

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 pattern para especificar una expresión regular con la cual el valor debe coincidir para que sea válido. Si se especifica el atributo multiple, cada elemento individual en la lista de valores delimitados por comas debe coincidir con la expresión regular.

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.

Dado que las entradas de tipo email se comprueban con la validación de la dirección de correoᵉ estándar y el pattern especificado, se puede implementar así de fácil. Observa cómo:

<form>
 <div class="emailBox">
   <label for="emailAddress">Tu dirección de correoᵉ</label><br>
   <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">
 </div>

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

El <form> contiene un <input> de tipo email para la dirección de correoᵉ del usuario, un <textarea> para ingresar su mensaje y un <input> de tipo submit, que crea un botón para enviar el formulario. Cada cuadro de entrada de texto tiene una <label> asociada para que el usuario sepa lo que se espera de ellos.

Échale un vistazo más de cerca al cuadro de entrada de la dirección de correoᵉ. Sus atributos size y maxlength 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 required, lo cual hace obligatorio que se proporcione una dirección de correoᵉ válida.

Se proporciona un placeholder apropiado, nombreusuario@beststartupever.com, 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 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:

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 "nombreusuario@beststartupever.com". Aquí es donde usarás el pattern. Establece el pattern en .+@beststartupever.com. 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".

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

Es recomendable utilizar el atributo title junto con pattern. Si lo haces, el title debe 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 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 title especificado. Si tu 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.

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

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

Ejemplos

Aquí tenemos una entrada de correoᵉ con el ID emailAddress 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 usuario@ejemplo.gov como marcador de posición cada vez que el campo está vacío. Además, al utilizar el atributo multiple, el cuadro se configura para permitir al usuario ingresar cero o más direcciones de correoᵉ, separadas por comas, como se describe en Permitir varias direcciones de correoᵉ. Como toque final, el atributo list contiene el ID de un <datalist> cuyas <option>es especifican un conjunto de valores sugeridos que el usuario puede elegir.

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

<label for="emailAddress">Correoᵉ</label><br/>
<input id="emailAddress" type="email" placeholder="usuario@ejemplo.gov"
       list="defaultEmails" size="64" maxlength="256" multiple>

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

Especificaciones

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

Compatibilidad del navegador

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
type="email"Chrome Soporte completo 5Edge Soporte completo 12Firefox Soporte completo SiIE Soporte completo 10Opera Soporte completo 11Safari Soporte completo SiWebView Android ? Chrome Android ? Firefox Android Soporte completo 4Opera Android Soporte completo SiSafari iOS Soporte completo 3.1
Notas
Soporte completo 3.1
Notas
Notas Doesn't do validation, but instead offers a custom 'email' keyboard, which is designed to make entering email addresses easier.
Notas The custom 'email' keyboard does not provide a comma key, so users cannot enter multiple email addresses.
Notas Automatically applies a default style of opacity: 0.4 to disable textual <input> elements, including those of type 'email'. Other major browsers don't currently share this particular default style.
Samsung Internet Android ?

Leyenda

Soporte completo  
Soporte completo
Compatibilidad desconocida  
Compatibilidad desconocida
Ver notas de implementación.
Ver notas de implementación.

Ve también