Wie verwende ich den E-Mail-Eingabetyp in HTML?-HTML-Tutorial-php.cn

Wie verwende ich den E-Mail-Eingabetyp in HTML?

WBOY

Freigeben： 2023-09-05 13:52:30

nach vorne

927 Leute haben es durchsucht

Wie verwende ich den E-Mail-Eingabetyp in HTML?

E-Mail ist ein Tool im Internet, mit dem wir mithilfe von E-Mail-Adressen formelle E-Mails an andere senden können. Es gibt viele E-Mail-Dienstanbieter wie Yahoo, Gmail, Hotmail usw. Um eine von uns gewählte E-Mail-Adresse zu erhalten, ist eine Registrierung bei diesen Dienstleistern erforderlich. Eine E-Mail-Adresse besteht aus zwei Teilen – einem Benutzernamen und einem Domänennamen. Benutzernamen können aus Groß- und Kleinbuchstaben, Zahlen, Sonderzeichen und Punkten bestehen. Die maximale Länge eines Benutzernamens beträgt 64 Zeichen und die maximale Länge eines Domänennamens beträgt 253 Zeichen. Benutzername und Domänenname werden immer durch das Symbol „@“ getrennt. Wir geben an vielen Stellen E-Mail-IDs ein und Sie müssen beachtet haben, dass die Webseite immer gültige Adressen akzeptiert.

Im HTML-Formular erstellen wir ein einzeiliges Eingabesteuerelement vom Typ „E-Mail“. Sobald Typemail verwendet wird, prüft es automatisch die Gültigkeit der E-Mail-Adresse. Die Validierung der E-Mail-Adresse ist in der Tat sehr wichtig, da der Benutzer sonst möglicherweise auch eine falsche E-Mail-Adresse eingibt. Es überprüft zwar nicht die gesamte E-Mail-Adresse, sondern nur die @- und TLD-Erweiterungen, bei denen es sich um die Top-Level-Domains handelt.

Lassen Sie uns verstehen, wie E-Mails in HTML verwendet werden.

Beispiel

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

Nach dem Login kopieren

Wenn der Benutzer in dieser App nicht das richtige E-Mail-Adressformat eingibt, wird eine Fehlermeldung angezeigt.

Wir können unsere E-Mail-Kontrolle auch so gestalten, dass sie mehrere E-Mail-Adressen akzeptiert. Wenn wir beispielsweise eine E-Mail verfassen, können wir mehrere Adressen in die Felder „An“, „Cc“ und „Bcc“ eingeben. Wenn Sie also auch ein solches Steuerelement erstellen möchten, das die Eingabe mehrerer E-Mail-Adressen ermöglicht, können Sie die MULTIPLE-Eigenschaft verwenden.

Beispiel

Schauen wir uns ein Beispiel an, um dieses Konzept zu verdeutlichen.

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

Nach dem Login kopieren

Im Feld „An“ oder „Cc“ oder „Bcc“ können wir die E-Mail-Adressen mehrerer Empfänger mit Komma (,) eingeben

Angenommen, Sie möchten auf Ihrer Website die Anzahl der Zeichen in einer E-Mail-Adresse begrenzen, dann können Sie die Attribute MINLENGTH und MAXLENGTH im -Tag verwenden. MINLENGTH gibt die Mindestanzahl an Zeichen an, die eine E-Mail-Adresse akzeptieren kann, während MAXLENGTH die maximale Anzahl an Zeichen in einer E-Mail-Adresse begrenzt.

Beispiel

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

Nach dem Login kopieren

Der Eingabeinhalt darf das Limit nicht überschreiten. Sobald das Limit überschritten wird, stoppt der Cursor die Eingabe.

Um den Standardwert des E-Mail-Steuerelements festzulegen, bedeutet dies, dass die Standard-E-Mail-ID im E-Mail-Textfeld (unter Verwendung der VALUE-Eigenschaft) anstelle eines leeren Textfelds angezeigt wird. Sie können es auch mithilfe des Attributs REQUIRED zu einem Pflichtfeld machen.

Beispiel

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

Nach dem Login kopieren

Wenn das Feld leer bleibt, wird ein Fehler angezeigt.

Angenommen, auf einer Website muss das Format, in dem eine E-Mail-Adresse eingegeben werden kann, angezeigt werden, damit der Benutzer sie einfach im richtigen Format eingeben kann. Zu diesem Zweck können Platzhalter erstellt werden.

Beispiel

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

Nach dem Login kopieren

Lassen Sie uns abschließend das Musterattribut besprechen, mit dem wir die Eingabe nur auf E-Mail-Adressen einer bestimmten Domain beschränken können. Es werden keine E-Mail-Adressen von anderen Domänen akzeptiert.

Beispiel

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

Nach dem Login kopieren

Laut dieser App sind nur Gmail-Adressen zulässig.

Das obige ist der detaillierte Inhalt vonWie verwende ich den E-Mail-Eingabetyp in HTML?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!