HTML -Eingabe type = ”tel” | Erklärt

Webentwickler nutzen die HTML “Eingang"Element mit dem Typ"TelSo erstellen Sie das Eingabefeld für Telefonnummern. Diese Art von Eingabefeld kann von den Benutzern zum Senden einer Telefonnummer verwendet werden. Darüber hinaus kann das Erstellen eines Eingabebuchs für die spezifische Eingabe der Telefonnummer Ihre Webseite professionell aussehen und sich von den Wettbewerbern unterscheiden.

Dieser Artikel erläutert den HTML -Eingangstyp = “Tel" Element.

So erstellen Sie ein HTML -Eingangstyp = "Tel" -Element?

Befolgen Sie die angegebenen Schritte, um einen HTML -Eingangstyp zu erstellen.

Schritt 1: Erstellen Sie das Eingabefeld für die Telefonnummer

Erstellen Sie in der HTML -Datei zunächst ein Div -Element mit dem Namen “hauptsächlich”. In diesem DIV -Element hinzufügen und Elemente. Erwähnen Sie zuerst innerhalb des Labelelements die Bildunterschrift und fügen Sie dann ein Eingabetag hinzu, das den Typ- und Namensattributen zugeordnet ist. Danach ein Tag mit der Bildunterschrift angeben “Einreichen”:

Telefonnummer eingeben:

Einreichen

Speichern Sie die Datei und öffnen Sie sie in Ihrem Browser. In diesem Moment sieht die Webseite so aus:

Schritt 2: Wenden Sie Stile auf das Eingabefeld an

Wenden wir Stile auf den Eingangstyp mit CSS -Eigenschaften an.

Stil „Haupt“ Div

.hauptsächlich
Hintergrundfarbe: RGBA (0, 0, 0, 0, 0.159);
Max-Breite: 600px;
Rand: 15px Auto;
Höhe: 200px;
Grenzradius: 30px;

Der ".hauptsächlich”Wird verwendet, um mit der Klasse der Klasse auf das DIV -Element zuzugreifen, und die darauf angewendeten Eigenschaften werden nachstehend beschrieben:

• “HintergrundfarbeDie Eigenschaft wird für die Einstellung der Hintergrundfarbe des Elements verwendet.
• “maximale BreiteEigenschaft wird für die Einstellung der maximalen Breite des Elements verwendet.
• “Rand”Eigenschaft mit dem Wert“15px”Repräsentiert den Raum von 15px am Top-Bottom und das“Auto”Erzeugt den gleichen Raum auf der links-rechts-Seite des Elements.
• “HöheDie Eigenschaft wird verwendet, um die Höhe des Elements auf 200px zu setzen.
• “GrenzradiusDie Eigenschaft wird für die Einstellung der Breite des Elements auf 30px verwendet.

Stil „Form-Main“ Div

.Form-Main
Anzeige: Flex;
Justify-Content: Center;
Ausrichtung: Zentrum;
Höhe: 100%;
Schriftgröße: 24px;

Der ".Form-Main”Wird verwendet, um mit der Klassenform-Main auf das DIV-Element zuzugreifen. Die Beschreibung der angewandten Eigenschaften wird unten erwähnt:

• “Anzeige”Eigenschaft mit dem Wert festgelegt als“biegen”Erstellt ein flexibles Layout für die Elemente.
• “RechtfertigungsbekämpfungDie Eigenschaft wird verwendet, um die flexiblen Gegenstände horizontal auszurichten.
• “AusrichtungEigenschaften werden verwendet, um die flexiblen Elemente vertikal auszurichten.
• “HöheEigenschaft wird für die Einstellung der Höhe des Elements verwendet.
• “SchriftgrößeDie Eigenschaft wird für die Einstellung der Schriftgröße des Elements verwendet.

Stil „Eingabe“ von Form-Main Div

.Form-Main-Eingabe
Grenze: 1PX Solid RGB (47, 63, 63);
Polsterung: 10px;
Schriftgröße: 22px;
Hintergrundfarbe: RGB (85, 104, 104);
Farbe: #ffffff;
Umriss: Keine;

Die Form-Main-Klasse wird mit CSS-Eigenschaften angewendet, die unten erklärt werden:

• “Grenze"Eigenschaft wird mit dem Wert angewendet"1px fester RGB (47, 63, 63)”, Wobei 1PX die Breite des Randes repräsentiert, durchgeführt.
• “Polsterung"Eigenschaft wird mit dem Wert zugewiesen"10px”, Wobei der erste 10px den Raum oben und unten im Inhalt darstellt, und der zweite bezieht sich auf den 10px -Speicherplatz auf der linken und rechten Seite des Inhalts des Elements.
• “SchriftgrößeDie Eigenschaft wird verwendet, um die Schriftgröße festzulegen.
• “HintergrundfarbeDie Eigenschaft wird für die Einstellung der Hintergrundfarbe des Elements verwendet.
• “FarbeEigenschaft wird verwendet, um die Schriftfarbe festzulegen.
• “UmrissEigenschaft mit dem Wert, der keine.

Stil „Platzhalter“ der Input

.Form-Main-Eingabe :: Platzhalter
Farbe: #dadada;

Wir haben nur Farbe auf den Eingaberplatzhalter angewendet.

Stylen Sie den „Knopf“ der Form-Main

.Form-Main-Schaltfläche
Grenze: 1PX Solid RGB (47, 63, 63);
Polsterung: 10px 20px;
Schriftgröße: 22px;
Hintergrundfarbe: RGB (12, 33, 33);
Farbe: #a3a3a3;
Cursor: Zeiger;
Rand-Links: 5px;
Übergang: alle 0.3s Leichtigkeit;

Hier ist die Beschreibung der angegebenen Eigenschaften:

• “Grenze"Eigenschaft wird mit dem Wert angewendet"1px fester RGB (47, 63, 63)”, Wobei 1PX die Breite des Randes repräsentiert, durchgeführt.
• “Polsterung"Eigenschaft wird mit dem Wert zugewiesen"10px”, Wobei 10px den Raum oben und unten am Inhalt und 10px -Speicherplatz auf der linken und rechten Seite des Inhalts repräsentiert.
• “SchriftgrößeDie Eigenschaft wird verwendet, um die Schriftgröße festzulegen.
• “HintergrundfarbeDie Eigenschaft wird für die Einstellung der Hintergrundfarbe des Elements verwendet.
• “FarbeEigenschaft wird verwendet, um die Schriftfarbe festzulegen.
• “Mauszeiger”Mit dem Wert festgelegt als"Zeiger”Wechselt den Cursor in eine zeigende Hand, wenn Sie auf den Knopf platziert werden.
• “linksDie Eigenschaft setzt einen Platz von 5px auf die linke Elemente.
• “ÜbergangEigenschaft mit dem Wert als alle 0 festgelegt.3S -Leichtigkeit ermöglicht es, dass das Element allmählich bewegt wird.

Stylen Sie den „Knopf“ im Schweber

.Form-Main-Schaltfläche: Hover
Transformation: Translatey (-5px);

Durch die Bereitstellung des oben genannten Codes generiert der Bildschirm Ausgabe das Ergebnis wie unten gezeigt:

Schritt 3: Hinzufügen von "Erforderlich" zu Eingabefeld hinzugefügt

Es ist oft obligatorisch, ein bestimmtes Muster der Telefonnummer in unseren Formularen hinzuzufügen, das vor der Einreichung der Formulierung validiert werden kann.

Um dies zu tun, die “erforderlichDas Attribut wird so verwendet, dass, wenn ein Benutzer ein leeres Eingangsfeld einreicht, eine Nachricht generiert wird, um das Feld wie folgt zu füllen:

Aus dem folgenden Bild ist es obligatorisch:

Schritt 4: Hinzufügen von "Muster" -Merkmal zum Eingabefeld hinzufügen

Wie wir wissen, gibt es kein Validierungsverfahren für Telefonnummern, da sie von Ort zu Ort variieren. Das Musterattribut wird für die Spezifikation des Formats der Telefonnummer verwendet. Infolgedessen kann der Benutzer nur eine Telefonnummer gemäß dem Muster hinzufügen:

Lassen Sie uns ein falsches Muster angeben und sehen, was passiert:

Es kann beobachtet werden, dass das Eingabefeld dem Benutzer benachrichtigt, um eine Nummer einzugeben, die mit dem Muster übereinstimmt.

Geben Sie also eine Telefonnummer mit dem richtigen Muster ein und klicken Sie auf die "EinreichenSchaltfläche und sehen, was passiert:

Cool! Wir haben erfolgreich gelernt, wie man ein Eingabeelement vom Typ tel verwendet.

Abschluss

Um ein Telefonnummer -Feld zu erstellen, kann der HTML -Eingangstyp TEL verwendet werden. Dieser Typ kann mehrere Attribute haben, um zusätzliche Funktionen wie Platzhalter, Muster, Erforderliche und mehr hinzuzufügen. Insbesondere wird das Musterattribut verwendet. Dieser Artikel hat den HTML -Eingangstyp und seine Attribute mit Beispielen demonstriert.