Maison > interface Web > tutoriel HTML > Comment utiliser le type de saisie email en HTML ?

Comment utiliser le type de saisie email en HTML ?

WBOY
Libérer: 2023-09-05 13:52:30
avant
936 Les gens l'ont consulté

Comment utiliser le type de saisie email en HTML ?

L'e-mail est un outil sur Internet où nous pouvons envoyer des e-mails formels à d'autres personnes en utilisant des adresses e-mail. Il existe de nombreux fournisseurs de services de messagerie comme Yahoo, Gmail, Hotmail, etc. Nous devons nous inscrire auprès de ces prestataires de services afin de recevoir une adresse e-mail de notre choix. Une adresse e-mail se compose de deux parties : un nom d'utilisateur et un nom de domaine. Les noms d’utilisateur peuvent être composés de lettres majuscules ou minuscules, de chiffres, de caractères spéciaux et de points. La longueur maximale d'un nom d'utilisateur est de 64 caractères et la longueur maximale d'un nom de domaine est de 253 caractères. Le nom d'utilisateur et le nom de domaine sont toujours séparés par le symbole "@". Nous saisissons les identifiants de messagerie à de nombreux endroits et vous devez avoir remarqué que la page Web accepte toujours des adresses valides.

Dans le formulaire HTML, nous créons un contrôle de saisie sur une seule ligne de type « email ». Une fois typemail utilisé, il vérifie automatiquement la validité de l’adresse e-mail. La validation de l’adresse email est en effet très importante, sinon l’utilisateur risque également de saisir une mauvaise adresse email. Bien qu'il ne vérifie pas l'intégralité de l'adresse e-mail, il vérifie uniquement les extensions @ et TLD, qui sont les domaines de premier niveau.

Voyons comment utiliser le courrier électronique en HTML.

Exemple

<html>
<body>
   <form name="form1">
      <label for="sub">Enter your e-mail id : </label>
      <input type="email">
      <br><br>
      <input type="submit" value="Submit">
   </form>
</body>
</html>
Copier après la connexion

Dans cette application, si l'utilisateur ne saisit pas le bon format d'adresse e-mail, un message d'erreur s'affichera.

Nous pouvons également faire en sorte que notre contrôle de messagerie accepte plusieurs adresses e-mail. Par exemple, lorsque nous rédigeons un e-mail, nous pouvons saisir plusieurs adresses dans les champs À, Cc et Cci. Ainsi, si vous souhaitez également effectuer un contrôle permettant de saisir plusieurs adresses e-mail, vous pouvez utiliser la propriété MULTIPLE.

Exemple

Regardons un exemple pour clarifier ce concept.

<html>
<body>
   <form name="form1">
      <table>
         <tr>
            <td>
               <label for="to">To </label>
            </td>
            <td>
               <input type="email" multiple>
            </td>
         </tr>
         <tr>
            <td>
               <label for="cc">Cc </label>
            </td>
            <td>
               <input type="email" multiple>
            </td>
         </tr>
         <tr>
            <td>
               <label for="bcc">Bcc </label>
            </td>
            <td>
               <input type="email" multiple>
            </td>
         </tr>
         <tr>
            <td></td><td>
               <textarea rows="10" cols="50">
               </textarea></td>
         </tr>
         <tr>
            <td></td>
            <td>
            <input type="submit" value="Submit"></td>
         </tr>
      </table>
   </form>
</body>
</html>
Copier après la connexion

Dans le champ "À" ou "Cc" ou "Cci", nous pouvons saisir les adresses e-mail de plusieurs destinataires à l'aide d'une virgule (,)

Supposons que sur votre site Web, vous souhaitiez définir une limite sur le nombre de caractères dans une adresse e-mail, vous pouvez alors utiliser les attributs MINLENGTH et MAXLENGTH dans la balise MINLENGTH spécifiera le nombre minimum de caractères qu'une adresse e-mail peut accepter, tandis que MAXLENGTH limitera le nombre maximum de caractères dans une adresse e-mail.

Exemple

<html>
<body>
   <form name="form1">
      <label for="sub">Enter your e-mail id : </label>
      <input type="email" minlength="15" maxlength="25">
      <br><br>
            
      <input type="submit" value="Submit">
   </form>
</body>
</html>
Copier après la connexion

Le contenu saisi ne peut pas dépasser la limite. Une fois la limite dépassée, le curseur cessera de taper.

Pour définir la valeur par défaut du contrôle de messagerie, cela signifie que l'ID de messagerie par défaut apparaîtra dans le champ de texte de l'e-mail (en utilisant la propriété VALEUR) au lieu d'un champ de texte vide. Vous pouvez également en faire un champ obligatoire à l'aide de l'attribut REQUIRED.

Exemple

<html>
<body>
   <form name="form1">
      <label for="sub">Enter your e-mail id : </label>
      <input type="email" value="abc@gmail.com" required>
      <br><br>
            
      <input type="submit" value="Submit">
   </form>
</body>
</html>
Copier après la connexion

Si laissé vide, une erreur sera affichée.

Supposons que, sur un site Web, le format dans lequel l'adresse e-mail peut être saisie doive être affiché afin que l'utilisateur puisse facilement la saisir dans le format correct. A cet effet, des espaces réservés peuvent être créés.

Exemple

<html>
<body>
   <form name="form1">
      <label for="sub">Enter your e-mail id : </label>
      <input type="email" placeholder="abc@gmail.com">
      <br><br>
            
      <input type="submit" value="Submit">
   </form>
</body>
</html>
Copier après la connexion

Enfin, parlons de l'attribut pattern, grâce auquel nous pouvons limiter la saisie aux seules adresses e-mail d'un domaine spécifique. Il n'acceptera pas les adresses e-mail d'autres domaines.

Exemple

<html>
<body>
   <form name="form1">
      <label for="sub">Enter your e-mail id : </label>
      <input type="email" pattern=".+@gmail\.com"><br>
          
      <input type="submit" value="Submit">
   </form>
</body>
</html>
Copier après la connexion

Selon cette application, seules les adresses Gmail sont autorisées.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:tutorialspoint.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal