HTML Input Type = Tel | Spiegato
Gli sviluppatori Web utilizzano HTML "ingresso"Elemento con il tipo"tel"Per creare il campo di input per i numeri di telefono. Questo tipo di campo di input può essere utilizzato dagli utenti per l'invio di un numero di telefono. Inoltre, la creazione di un campo di input per inserire specificamente il numero di telefono può rendere la tua pagina web professionale e diversa dai concorrenti.
Questo articolo spiegherà il tipo di input HTML = "tel"Elemento.
Come creare un elemento di input html = "tel"?
Per creare un tipo di input HTML Tel, seguire i passaggi dati.
Passaggio 1: creare campo di input per il numero di telefono
Nel file HTML, in primo luogo, crea un elemento div con il nome "principale". All'interno di questo elemento div, aggiungi ed elementi. All'interno dell'elemento etichetta, prima menziona la didascalia e quindi aggiungi un tag di input associato agli attributi di tipo e nome. Successivamente, includi un tag con la didascalia "Invia":
Salva il file e aprilo nel browser. In questo momento, la pagina web sembrerà così:
Passaggio 2: applicare gli stili al campo di input
Applichiamo stili al tipo di input Tel con proprietà CSS.
Stile "Main" Div
.principale
Background-color: RGBA (0, 0, 0, 0.159);
Licromra massima: 600px;
Margine: 15px Auto;
Altezza: 200px;
raggio di confine: 30px;
IL ".principale"Viene utilizzato per accedere all'elemento Div con la classe principale e le proprietà applicate ad esso sono descritte di seguito:
- "colore di sfondo"La proprietà viene utilizzata per l'impostazione del colore di sfondo dell'elemento.
- "larghezza massima"La proprietà viene utilizzata per l'impostazione della larghezza massima dell'elemento.
- "margine"Proprietà con il valore"15px"Rappresenta lo spazio di 15px al fondo superiore e"auto"Genera lo spazio uguale sul lato sinistro-destro dell'elemento.
- "altezza"La proprietà viene utilizzata per impostare l'altezza dell'elemento su 200px.
- "raggio di confine"La proprietà viene utilizzata per l'impostazione della larghezza dell'elemento a 30px.
Stile "forma-main"
.forma-main
display: flex;
giustificare contento: centro;
ALIGE-ITMS: CENTRO;
Altezza: 100%;
Font-size: 24px;
IL ".forma di forma"Viene utilizzato per accedere all'elemento Div con la forma di classe. La descrizione delle proprietà applicate è menzionata di seguito:
- "Schermo"Proprietà con il valore impostato come"flettere"Creerà un layout flessibile per gli elementi.
- "giustificare il contenuto"La proprietà viene utilizzata per allineare gli oggetti flessibili in orizzontale.
- "allineare"La proprietà viene utilizzata per allineare gli articoli flessibili in verticale.
- "altezza"La proprietà viene utilizzata per l'impostazione dell'altezza dell'elemento.
- "dimensione del font"La proprietà viene utilizzata per l'impostazione della dimensione del carattere dell'elemento.
Stile "Input" di Div Form-Main
.input di forma-main
bordo: 1px solido RGB (47, 63, 63);
imbottitura: 10px;
Font-size: 22px;
Background-color: RGB (85, 104, 104);
Colore: #ffffff;
contorno: nessuno;
La classe di forma di forma viene applicata con le proprietà CSS spiegate di seguito:
- "confineLa proprietà "viene applicata con il valore"1px Solid RGB (47, 63, 63)", Dove 1px rappresenta la larghezza del bordo, il tipo di linea solida e RGB (47, 63, 63) rappresentano il colore.
- "imbottitura"La proprietà è assegnata con il valore"10px", Dove il primo 10px rappresenta lo spazio nella parte superiore e inferiore del contenuto e il secondo si riferisce allo spazio 10px sul lato sinistro e destro del contenuto dell'elemento.
- "dimensione del font"La proprietà viene utilizzata per impostare la dimensione del carattere.
- "colore di sfondo"La proprietà viene utilizzata per l'impostazione del colore di sfondo dell'elemento.
- "colore"La proprietà viene utilizzata per impostare il colore del carattere.
- "contorno"Proprietà con il valore nessuno rimuoverà il profilo del campo di input quando selezionato.
Stile "segnaposto" dell'input
.Form-Main Input :: Placeholder
Colore: #dadada;
Abbiamo applicato solo il colore al segnaposto input.
Modella il "pulsante" della forma-main
.Pulsante forma-main
bordo: 1px solido RGB (47, 63, 63);
imbottitura: 10px 20px;
Font-size: 22px;
Background-color: RGB (12, 33, 33);
Colore: #A3A3A3;
Cursore: puntatore;
margine-sinistra: 5px;
Transizione: tutti 0.3s facilità;
Ecco la descrizione delle proprietà fornite:
- "confineLa proprietà "viene applicata con il valore"1px Solid RGB (47, 63, 63)", Dove 1px rappresenta la larghezza del bordo, il tipo di linea solida e RGB (47, 63, 63) rappresentano il colore.
- "imbottitura"La proprietà è assegnata con il valore"10px", Dove 10px rappresenta lo spazio in alto e in basso del contenuto e lo spazio 10px sul lato sinistro e destro del contenuto.
- "dimensione del font"La proprietà viene utilizzata per impostare la dimensione del carattere.
- "colore di sfondo"La proprietà viene utilizzata per l'impostazione del colore di sfondo dell'elemento.
- "colore"La proprietà viene utilizzata per impostare il colore del carattere.
- "cursore"Con il valore impostato come"Pointer"Cambierà il cursore in una mano puntata quando posizionato sul pulsante.
- "margine-sinistra"La proprietà imposterà uno spazio di 5px sulla sinistra dell'elemento.
- "transizione"Proprietà con il valore impostato come tutti 0.La facilità 3S consente di spostare gradualmente l'elemento.
Modella il "pulsante" sul mouse
.Pulsante forma-main: hover
trasformazione: traduzione (-5px);
Fornendo il codice sopra menzionato, la schermata di output genererà il risultato come mostrato di seguito:
Passaggio 3: aggiungi l'attributo "richiesto" al campo di input
È spesso obbligatorio aggiungere un modello specificato del numero di telefono nei nostri moduli, che può essere convalidato prima della presentazione del modulo.
Per farlo, il "necessario"L'attributo viene utilizzato in modo tale che se un utente presenta un campo di input vuoto, verrà generato un messaggio per riempire il campo come segue:
Si può vedere dall'immagine seguente che immettere il valore nel campo di input è obbligatorio:
Passaggio 4: aggiungi l'attributo "pattern" al campo di input
Come sappiamo, non esiste una procedura di convalida per i numeri di telefono in quanto variano da un luogo all'altro. L'attributo del modello viene utilizzato per la specifica del formato del numero di telefono. Di conseguenza, l'utente può aggiungere solo un numero di telefono in base al modello:
Forniamo uno schema sbagliato e vediamo cosa succede:
Si può osservare che il campo di input notifica all'utente di inserire un numero che dovrebbe corrispondere al modello.
Quindi, inseriamo un numero di telefono con il modello corretto, fai clic su "Invia"Pulsante e vedere cosa succede:
Freddo! Abbiamo imparato con successo come utilizzare un elemento di input di tipo tel.
Conclusione
Per creare un campo Numero di telefono, è possibile utilizzare il tipo di input HTML. Questo tipo può avere diversi attributi per aggiungere ulteriori funzionalità come segnaposto, modello, richiesto e altro ancora. Più specificamente, l'attributo modello viene utilizzato per l'impostazione del modello per il numero di telefono e gli attributi richiesti limitano l'utente a inviare un valore non vuoto. Questo articolo ha dimostrato il tipo di input HTML Tel e i suoi attributi con esempi.