Formularze są główną częścią dokumentu HTML do gromadzenia danych i informacji użytkownika. Aby uzyskać prawidłowe dane wejściowe w formularzu od użytkowników, konieczne jest ograniczenie użytkowników przed wprowadzeniem nieprawidłowych informacji. Deweloperzy są zobowiązani do dodania kontroli sprawdzania poprawności dokumentów HTML. W tym celu użytkownik może dodać sprawdzanie poprawności różnych obiektów formularza, takich jak sprawdzanie poprawności numeru telefonu za pośrednictwem „wzór" atrybut.

Ten post wyjaśni, jak zastosować sprawdzanie poprawności numeru telefonu HTML5.

Jak zastosować sprawdzanie poprawności numeru telefonu HTML5 z wzorem?

Aby dodać sprawdzanie poprawności numeru telefonu, postępuj zgodnie z podanymi instrukcjami.

Krok 1: Utwórz pojemnik „Div”

Początkowo zrób pojemnik „DIV”, wykorzystując „”Element i przypisanie„ID" atrybut.

Krok 2: Dodaj nagłówki

Następnie dodaj dwa nagłówki za pomocą „

" I "

”Tagi. „„

„Tag służy do osadzania nagłówka poziomu pierwszego i”

”Określa nagłówek poziomu drugiego.

Krok 3: Utwórz formularz

Następnie utwórz formularz za pomocą „”Tag wraz z następującymi elementami:

• Wstaw „„”Tag wraz z„Do”Atrybut oznaczenia elementu. Atrybut „for” odnosi konkretny element z etykietą.
• "”Element jest dodawany po„„Tag, który odnosi się do pola wejściowego do wstawienia danych.
• Element „” jest dostarczany z atrybutami „typu” i „wzorca”.
• „„typ”Atrybut określa konkretny typ zdefiniowanych wejściów. Użyj „teren„Wartość za uzyskanie numeru telefonu od użytkownika.
• „„wzór”Definiuje format określonych typów wejściowych, w tym e -mail, data, tekst, wyszukiwanie, adres URL, Tel i hasło.
• Utwórz przycisk za pomocą „Typ” jako „przycisk”I„ wartość ”jako„Wchodzić”:

Linuxhint Ltd UK

Walidacja numeru telefonu HTML5 ze wzorem

Format numeru telefonu: xxx-xxx-xxxx


Numer telefonu:

Wyjście

Krok 4: Element „Div” stylu

Stylizować „div„Element, najpierw dostęp do elementu według id”#walidacja”I zastosuj następujące właściwości:

#walidacja
Text-Align: Center;
Styl graniczny: grzbiet;
Margines: 50px;
kolor graniczny: RGB (85, 85, 245);
kolor tła: RGB (243, 242, 160);

Tutaj:

• "tekst-align„Własność jest ustalona jako„Centrum”W celu wyrównania tekstu w środku.
• "styl graniczny”Służy do określenia stylu granicznego. Na przykład zastosowaliśmy „grzbiet„Styl graniczny.
• "margines„Przydziela przestrzeń na zewnątrz elementu.
• "kolor ramki”Wykorzystane do określenia kolorowej granicy wokół zdefiniowanego elementu.
• "kolor tła”Określa kolor tła pojemnika.

Wyjście

Wykazaliśmy, jak zastosować sprawdzanie poprawności numeru telefonu HTML5.

Wniosek

Aby zastosować wzór sprawdzania poprawności numeru telefonu HTML5, najpierw utwórz formularz, wykorzystując „”Tag i dodaj„„To etykietuje pole wejściowe. Następnie dodaj „”Element wraz z„typ" Jak "teren”Atrybuty„ wzorców ”. „„wzór”Atrybut określa wzorzec do sprawdzania poprawności numeru telefonu. Ten post wykazał procedurę dodania sprawdzania poprawności numeru telefonu HTML5.