Html wejście type = ”Tel” | Wyjaśnione

Twórcy stron internetowych korzystają z HTML ”wejście„Element z typem„teren„Aby utworzyć pole wejściowe dla numerów telefonów. Tego rodzaju pole wejściowe mogą być wykorzystane przez użytkowników do przesłania numeru telefonu. Ponadto utworzenie pola wejściowego do konkretnego wprowadzania numeru telefonu może sprawić, że Twoja strona będzie wyglądać profesjonalnie i różni się od konkurentów.

W tym artykule wyjaśniono html wejściowy typ = „teren" element.

Jak utworzyć element wejściowy HTML = „Tel”?

Aby utworzyć typ wejściowy HTML Tel, wykonaj podane kroki.

Krok 1: Utwórz pole wejściowe dla numeru telefonu

W pliku HTML najpierw utwórz element DIV o nazwie „główny". Wewnątrz tego elementu Div, dodawania i elementów. Najpierw w elemencie etykiety wspomnij o podpisie, a następnie dodaj znacznik wejściowy powiązany z atrybutami typu i nazwy. Następnie dołącz znacznik z podpisem „Składać”:

Wpisz numer telefonu:

Składać

Zapisz plik i otwórz go w przeglądarce. W tej chwili strona internetowa będzie wyglądać tak:

Krok 2: Zastosuj style do pola wejściowego

Zastosujmy style do typu wejściowego Tel z właściwościami CSS.

Styl „główny” div

.główny
kolor tła: RGBA (0, 0, 0, 0.159);
maksymalna szerokość: 600px;
Margines: 15px Auto;
Wysokość: 200px;
Radiusz graniczny: 30px;

„„.główny”Jest wykorzystywany do dostępu do elementu DIV z klasą Main, a właściwości, które są do niego zastosowane, opisano poniżej:

• "kolor tła„Właściwość jest wykorzystywana do ustawienia koloru tła elementu.
• "maksymalna szerokość„Własność jest wykorzystywana do ustawienia maksymalnej szerokości elementu.
• "margines„Własność o wartości”15px”Reprezentuje przestrzeń 15px na najwyższym dnie i„automatyczny”Generuje równą przestrzeń po lewej stronie elementu.
• "wysokość„Właściwość jest wykorzystywana do ustawienia wysokości elementu na 200px.
• "Radiusz graniczny„Właściwość jest wykorzystywana do ustawienia szerokości elementu na 30px.

Styl „forma-main” div

.formularz
Wyświetlacz: Flex;
Justify-Content: Center;
Wyrównanie: Center;
Wysokość: 100%;
Rozmiar czcionki: 24px;

„„.formularz”Jest wykorzystywany do dostępu do elementu DIV z formą klasową. Opis zastosowanych właściwości jest wspomniany poniżej:

• "wyświetlacz„Właściwość z ustawioną wartością jako„przewód”Stworzy elastyczny układ dla elementów.
• "justify-content„Nieruchomość jest wykorzystywana do wyrównania elastycznych elementów poziomo.
• "Wyrównanie„Własność jest wykorzystywana do wyrównania elastycznych elementów pionowych.
• "wysokość„Własność jest wykorzystywana do ustawienia wysokości elementu.
• "rozmiar czcionki„Właściwość jest wykorzystywana do ustawienia rozmiaru czcionki elementu.

Styl „wejście” formy-main div

.formularz wejściowy
granica: 1px stały RGB (47, 63, 63);
Wyściółka: 10px;
Rozmiar czcionki: 22px;
kolor tła: RGB (85, 104, 104);
Kolor: #ffffff;
Zarys: Brak;

Klasa formularza jest stosowana z właściwościami CSS, które zostały wyjaśnione poniżej:

• "granica„Nieruchomość jest stosowana z wartością”1px stały RGB (47, 63, 63)”, Gdzie 1px reprezentuje szerokość granicy, typ linii ciągłej i RGB (47, 63, 63) reprezentuje kolor.
• "wyściółka„Własność jest przypisana do wartości”10px”, Gdzie pierwsze 10px reprezentuje przestrzeń na górze i dolnej części treści, a druga odnosi się do miejsca 10px po lewej i prawej stronie zawartości elementu.
• "rozmiar czcionki„Właściwość jest wykorzystywana do ustawiania rozmiaru czcionki.
• "kolor tła„Właściwość jest wykorzystywana do ustawienia koloru tła elementu.
• "kolor„Właściwość jest wykorzystywana do ustawienia koloru czcionki.
• "zarys”Właściwość o wartości Brak usunie zarys pola wejściowego po wybraniu.

Styl „symbol zastępczy” danych wejściowych

.Forma-Main Input :: zastępca
Kolor: #dadada;

Zastosowaliśmy tylko kolor do wejścia zastępczego.

Styl „przycisk” formy-main

.przycisk formularza
granica: 1px stały RGB (47, 63, 63);
Wyściółka: 10px 20px;
Rozmiar czcionki: 22px;
kolor tła: RGB (12, 33, 33);
Kolor: #A3A3A3;
Kursor: wskaźnik;
Margin-left: 5px;
przejście: wszystkie 0.3s łatwość;

Oto opis danych właściwości:

• "granica„Nieruchomość jest stosowana z wartością”1px stały RGB (47, 63, 63)”, Gdzie 1px reprezentuje szerokość granicy, typ linii ciągłej i RGB (47, 63, 63) reprezentuje kolor.
• "wyściółka„Własność jest przypisana do wartości”10px”, Gdzie 10px reprezentuje przestrzeń na górze i dolnej części zawartości oraz 10px przestrzeni po lewej i prawej stronie zawartości.
• "rozmiar czcionki„Właściwość jest wykorzystywana do ustawiania rozmiaru czcionki.
• "kolor tła„Właściwość jest wykorzystywana do ustawienia koloru tła elementu.
• "kolor„Właściwość jest wykorzystywana do ustawienia koloru czcionki.
• "kursor”Z wartością ustawioną jako„wskaźnik”Zmieni kursor na rękę wskazującą, gdy umieści na przycisku.
• "margines lewic„Właściwość wyznaczy przestrzeń 5px na lewo elementu.
• "przemiana„Właściwość z ustawioną wartością jako wszystkie 0.Łatwość 3s pozwala stopniowo przenosić element.

Styl „przycisk” na zawisie

.Przycisk formularza: Hover
Transform: Translatey (-5px);

Podając wyżej wymieniony kod, ekran wyjściowy wygeneruje wynik, jak pokazano poniżej:

Krok 3: Dodaj atrybut „wymagany” do pola wejściowego

Często obowiązkowe jest dodanie określonego wzoru numeru telefonu w naszych formularzach, który można zatwierdzić przed przesłaniem formularza.

Aby to zrobić, „wymagany„Atrybut jest wykorzystywany w taki sposób, że jeśli użytkownik złoży puste pole wejściowe, zostanie wygenerowana wiadomość, aby wypełnić pole w następujący sposób:

Z poniższego obrazu widać, że wprowadzanie wartości w polu wejściowym jest obowiązkowe:

Krok 4: Dodaj atrybut „Wzór” do pola wejściowego

Jak wiemy, nie ma procedury sprawdzania poprawności numerów telefonów, ponieważ różnią się one w zależności od miejsca. Atrybut wzorca jest wykorzystywany do specyfikacji formatu numeru telefonu. W rezultacie użytkownik może dodać numer telefonu tylko zgodnie z wzorem:

Podajmy zły wzór i zobaczmy, co się stanie:

Można zauważyć, że pole wejściowe powiadomi użytkownika do wprowadzenia liczby, która powinna pasować do wzoru.

Wprowadźmy więc numer telefonu o właściwym wzorze, kliknij „Składać”Przycisk i zobacz, co się stanie:

Fajny! Z powodzeniem nauczyliśmy się używać elementu wejściowego typu Tel.

Wniosek

Aby stworzyć pole numeru telefonu, można zastosować typ wejściowy HTML. Ten typ może mieć kilka atrybutów, aby dodać dodatkowe funkcje, takie jak symbol zastępczy, wzór, wymagany i więcej. Mówiąc dokładniej, atrybut wzorca jest używany do ustawiania wzorca dla numeru telefonu, a wymagane atrybuty ograniczają użytkownika do przesłania wartości nie pustej. W tym artykule pokazano typ wejściowy HTML Tel i jego atrybuty z przykładami.