I moduli sono la parte principale del documento HTML per la raccolta di dati e informazioni degli utenti. Per ottenere un input corretto nel modulo dagli utenti, è necessario impedire agli utenti di inserire informazioni non valide. Gli sviluppatori sono tenuti ad aggiungere alcuni controlli di convalida sui documenti HTML. A tale scopo, l'utente può aggiungere convalida su diversi oggetti del modulo, come la convalida del numero di telefono tramite "modello"Attributo.

Questo post spiegherà come applicare la convalida del numero di telefono HTML5 con il modello.

Come applicare la convalida del numero di telefono HTML5 con il modello?

Per aggiungere la convalida del numero di telefono con uno schema, seguire le istruzioni fornite.

Passaggio 1: crea un contenitore "div"

Inizialmente, crea un contenitore "div" utilizzando il ""Elemento e assegnare il"id"Attributo.

Passaggio 2: Aggiungi intestazioni

Quindi, aggiungi due intestazioni usando "

" E "

"Tag. IL "

"Il tag viene utilizzato per incorporare l'intestazione del livello uno e"

"Specifica l'intestazione del livello due.

Passaggio 3: crea forma

Quindi, crea un modulo usando il ""Tag insieme ai seguenti elementi:

• Inserire un “Tag insieme al "per"Attributo per etichettare l'elemento. L'attributo "per" mette in relazione l'elemento specifico con l'etichetta.
• ""L'elemento viene aggiunto dopo il""Tag, che si riferisce a un campo di input per inserire i dati.
• L'elemento "" è fornito con attributi "tipo" e "pattern".
• IL "tipo"L'attributo determina il tipo particolare di input definito. Utilizzare il "tel"Valore per ottenere il numero di telefono dall'utente.
• IL "modello"Definisce il formato dei tipi di input dichiarati, inclusi e -mail, data, testo, ricerca, URL, tel e password.
• Crea un pulsante usando "Digita" come "pulsante"E" valore "come"accedere":

Linuxhint Ltd UK

Convalida del numero di telefono HTML5 con pattern

Formato del numero di telefono: XXX-XXX-XXXX


Numero di telefono:

Produzione

Passaggio 4: elemento "div" stile

Per modellare il "div"Elemento, prima accedere all'elemento per ID"#validation"E applica le seguenti proprietà:

#validation
Testo-align: centro;
Border in stile: Ridge;
Margine: 50px;
Border-color: RGB (85, 85, 245);
Background-color: RGB (243, 242, 160);

Qui:

• "allineamentoLa proprietà "è impostata come"centro"Per allineare il testo al centro.
• "stile del bordo"Viene utilizzato per determinare lo stile del bordo. Ad esempio, abbiamo applicato il "cresta" stile del bordo.
• "margine"Assegna lo spazio all'esterno dell'elemento.
• "colore del bordo"Utilizzato per specificare il confine colorato attorno all'elemento definito.
• "colore di sfondo"Specifica il colore di sfondo del contenitore.

Produzione

Abbiamo dimostrato come applicare la convalida del numero di telefono HTML5 con il modello.

Conclusione

Per applicare il modello di convalida del numero di telefono HTML5, in primo luogo, creare un modulo utilizzando il “Tag e aggiungi ""Ciò etichetta il campo di input. Dopodiché, aggiungi il ""Elemento insieme al"tipo" COME "telAttributi "e" pattern ". IL "modello"L'attributo specifica il modello per la convalida del numero di telefono. Questo post ha dimostrato la procedura per aggiungere la convalida del numero di telefono HTML5 con il modello.