In diesem Artikel lernen wir, wie man die Telefonnummer des Benutzers in ein HTML-Formular einfügt. Wir wissen, dass Telefonnummern so viele Vorteile haben Ein Telefonnummernfeld ist der wichtigste Bestandteil des Formulars. im Falle eines direkten Kontakts mit dem Benutzer. Ein Benutzer kann auch verschiedene Nachrichten oder Benachrichtigungen bezüglich der Dienste des Formulars erhalten.  

Ansatz: Hier ist der grundlegende einfache Ansatz, um die Aufgabe abzuschließen. Die Schritte sind unten angegeben

  • Erstellen Sie ein HTML-Dokument, das ein <input> -Tag enthält.
  • Verwenden Sie das type-Attribut mit dem <input>-Tag, das auf den Wert „tel“ gesetzt ist.

Syntax

<input type="tel">

Beispiel 1: 

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to add a Telephone number 
        into a Form using HTML5
    </title>
  
    <style>
        #Geek_p {
            font-size: 30px;
            color: green;
        }
  
        h1,
        h2 {
            font-family: impact;
        }
    </style>
</head>
  
<body style="text-align: center">
    <h1 style="color: green">GeeksForGeeks</h1>
  
    <h2>
        How to add a Telephone number
        into a Form using HTML5
    </h2>
    <form>
        Name:
        <input type="text" 
            placeholder="Enter your name here--" />
        <br />
  
        Address:
        <input type="text" 
            placeholder="Enter your  permanent Address" />
        <br />
  
        Phone No.:
        <input type="tel" 
            placeholder="Enter phone number" />
        <br />
        <br />
          
        <button>Submit</button>
    </form>
</body>
  
</html>
 

Ausgabe:

Beispiel 2:

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to add a Telephone number 
        into a Form using HTML5
    </title>
  
    <style>
        #Geek_p {
            font-size: 30px;
            color: green;
        }
  
        h1,
        h2 {
            font-family: impact;
        }
    </style>
</head>
  
<body style="text-align: center">
    <h1 style="color: green">
        GeeksForGeeks
    </h1>
  
    <h2>
        How to add a Telephone number
        into a Form using HTML5
    </h2>
  
    <form>
        Phone No.:
        <input type="tel" 
            placeholder="Enter phone number" />
        <br />
        <br />
          
        <button>Get OTP</button>
    </form>
</body>
  
</html>

Ausgabe: