Los elementos<input> de tipoemail se utilizan para permitir que el usuario ingrese y edite una dirección de correo electrónico o, si se especifica el atributomultiple, una lista de direcciones de correo.

Pruébalo

<label for="email">Enter your example.com email:</label><input type="email" pattern=".+@example\.com" size="30" required />

label {  display: block;  font:    1rem "Fira Sans",    sans-serif;}input,label {  margin: 0.4rem 0;}

El valor de la entrada es automáticamente validado para asegurarse que no está vacía o que el correo (o la lista de correos) introducidos están con el formato correcto antes de que el formulario puede ser enviado. Las pseudoclases:valid e:invalid son automáticamente aplicadas como corresponde para denotar visualmente si el valor actual del campo es una dirección válida de correo o no.

En los navegadores que no sopartan el tipoemail, la entradaemail se degrada para ser una entrada estándartext.

Valor

El atributovalue del elemento<input> contiene unDOMString 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 significanombreusuario@dominio onombreusuario@dominio.tld. Hay más que eso, por supuesto; consultaValidación para obtener unaregular expression que coincida con el algoritmo de validación de la dirección de correo.
3. Si y solo si se especifica el atributomultiple, el valor puede ser una lista de direcciones de correo correctamente formadas separadas por coma. Los espacios en blanco iniciales y finales se eliminan de cada dirección de la lista.

VéaseValidación para más detalles de como las dirrecciones de correo son validadas para asegurarse que están formadas correctamente.

Atributos adicionales

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

list

El valor del atributo lista es elid del elemento<datalist> ubicado en el mismo documento.<datalist> aporta una lista de valores predefinidos sugeridos al usuario para la entrada. Cualquier valor de la lista que no sea compatible contype no son incluidos en las opciones sugeridas. Los valores proporcionados son sugerencias, no valores requeridos: los usuarios pueden seleccionar elementos de la lista o proporcionar uno diferente.

maxlength

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

La entrada fallará larestricción de validación si la longitud del valor de texto del campo es mayor que la longitud demaxlength en unidades de código UTF-16. 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 entradaemail. Debe ser un valor entero no negativo menor o igual al valor especificado pormaxlength. Si no se especificaminlength o se especifica un valor no válido, la entrada deemail no tiene una longitud mínima.

La entrada fallará larestricción de validación si la longitud del texto ingresado en el campo es menor que la longitud deminlength en unidades de código UTF-16. 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 coma y, opcionalmente, espacios en blanco. ConsultaPermitiendo múltiples dirreciones de correo para ver un ejemplo oAtributo HTML: multiple para más detalles.

pattern

El atributopattern, cuando es especificado, es una expresión regular que elvalue del input debe seguir para que el valor pase larestricción de validación. Debe ser una expresión regular de JavaScript válida, como las usadas en el tipoRegExp, y como se explica en nuestraguía sobre expresiones regulares; la bandera'u' es especificada cuando se compila la expresión regular, por lo tanto el patrón es tratado como una secuencia de puntos de código Unicode, y no como ASCII. No deben colocarse barras diagonales alrededor del patrón de texto.

Si el patrón no está especificado o es inválido, no se aplica la expresión regular y el atributo es completamente ignorado.

Véase la secciónValidación de patrón para más detalles y un ejemplo.

placeholder

El atributoplaceholder es una cadena de texto que proporciana una breve pista al usuario sobre qué tipo de información hay que introducir en el campo. Debe ser una palabra o una frase corta que muestre el tipo de dato esperado y no un mesaje explicativo. El textono tiene que incluir saltos de lineas o lineas nuevas.

Si el contenido del control tiene una direccionalidad (LTR oRTL) pero necesita presentar el marcador de posición en la dirección opuesta, puedes usar el algotimo bidireccional Unicode para formatear caracteres para sobreescribir la direccionalidad dentro del marcador de posición; véaseComo usar los controles de Unicode para texto bidireccional.

readonly

Un atributo Booleano que, si está presente, significa que el campo no puede ser editado por el usuario. Suvalue puede, aun así, ser cambiado directamente con código JavaScript configurando la propiedadHTMLInputElementvalue.

size

El atributosize es una valor número que indica cuántos caracteres de ancho debe tener la entrada. El valor debe ser un número más grande que cero. El valor por defecto es 20. Desde que el ancho de los caracteres varía, esto puede ser o no exacto 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 configuración de la fuente (font en uso).

Estono establece un límite en cuántos caracteres puede introducir en la entrada el usuario. Solo especifica aproximadamente cuantos pueden ser vistos de una vez. Para esablecer un límite de extensión en el largo de la entrada, usa el atributomaxlength.

Usando la entrada de dirección de correo

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

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

<input 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 atributorequired, 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 booleanomultiple, la entrada se puede configurar para aceptar varias direcciones de correo.

<input 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 coma y opcionalmente, algún número de espacios en blanco están presentes

Algunos ejemplos de cadenas válidas cuando se especificamultiple:

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

Algunos ejemplos de cadenas no válidas:

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

Marcadores de posición (placeholders)

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 losmarcadores de posición. Un marcador de posición es un valor que demuestra la forma que debe tomar elvalue al presentar un ejemplo de un valor válido, que se muestra dentro del cuadro de edición cuando elvalue 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 deemail con el marcador de posiciónsophie@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="sophie@example.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 atributosize. 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ónemail tiene 15 caracteres de ancho:

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

Longitud del valor del elemento

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 atributominlength; de manera similar, usamaxlength 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 tipoemail configurando su atributovalue:

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

<input type="email" value="default@example.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 atributolist. 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 paraautocomplete. El atributolist especifica el ID de un<datalist>, que a su vez contiene un elemento<option> por valor sugerido; Elvalue de cadaoption es el valor sugerido correspondiente para el cuadro de entrada de correo.

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

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

Validación

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

Validación básica

Los navegadores que admiten el tipo de entradaemail 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, consultavalidación de datos de formulario.

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 atributopattern para especificar unaregular expression con la cual el valor debe coincidir para que sea válido. Si se especifica el atributomultiple, cada elemento individual en la lista de valores delimitados por comas debe coincidir con laregular expression.

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 tipoemail se comprueban con la validación de la dirección de correo estándary elpattern especificado, se puede implementar así de fácil. Observa cómo:

body {  font: 16px sans-serif;}.emailBox {  padding-bottom: 20px;}.messageBox {  padding-bottom: 20px;}label {  line-height: 22px;}label::after {  content: ":";}

<form>  <div>    <label for="emailAddress">Tu dirección de correo electrónico</label><br />    <input           type="email"      size="64"      maxlength="64"      required      placeholder="username@beststartupever.com"      pattern=".+@beststartupever\.com"      title="Proporcione solo una dirección de correo electrónico corporativa de Best Startup Ever" />  </div>  <div>    <label for="message">Solicitud</label><br />    <textarea           cols="80"      rows="8"      required      placeholder="Mis zapatos están demasiado apretados y he olvidado cómo bailar."></textarea>  </div>  <input type="submit" value="Enviar solicitud" /></form>

El<form> contiene un<input> de tipoemail 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 atributossize ymaxlength 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 atributorequired, lo cual hace obligatorio que se proporcione una dirección de correo válida.

Se proporciona unplaceholder 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 tipoemail 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 elpattern. Establece elpattern 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ándarcomo 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 atributotitle junto conpattern. Si lo haces, eltitledebe 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 eltitle 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 sutitle especificado. Si tutitle es algo así como "Dirección de correo electrónico", el resultado sería el mensaje "El texto ingresado no coincide con el patrón requerido. Dirección de correo electrónico", no es muy buena.

Es por eso que, en cambio, especificamos la cadena "Por favor, proporciona solo una dirección de correo electrónico 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 electrónico corporativo de Best Startup Ever."

Ejemplos

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

Adicionalmente, el elemento<label> se utiliza para establecer una etiqueta para el cuadro de entrada de correo, con su atributofor que hace referencia al IDemailAddress 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 electrónico</label><br /><input   type="email"  placeholder="user@example.gov"  list="defaultEmails"  size="64"  maxlength="256"  multiple /><datalist>  <option value="jbond007@mi6.defence.gov.uk"></option>  <option value="jbourne@unknown.net"></option>  <option value="nfury@shield.org"></option>  <option value="tony@starkindustries.com"></option>  <option value="hulk@grrrrrrrr.arg"></option></datalist>

Especificaciones

Compatibilidad con navegadores

Véase también

• Guía sobre formularios HTML

• <input>

• <input type="tel">

• <input type="url">

• Atributos:

  • list
  • minlength
  • maxlength
  • multiple
  • pattern
  • placeholder
  • readonly
  • size

• Compatibilidad con propiedades CSS