HTML Input Type = ”Tlf” | Forklart
Nettutviklere bruker HTML “inngang”Element med typen”Tlf”For å lage inngangsfeltet for telefonnumre. Denne typen inngangsfelt kan brukes av brukerne for å sende inn et telefonnummer. Dessuten kan det å lage et inngangsfelt for spesifikt å legge inn telefonnummeret gjøre at websiden din ser profesjonell ut og forskjellig fra konkurrentene.
Denne artikkelen vil forklare HTML -inngangstypen = "Tlf”Element.
Hvordan lage et HTML -inngangstype = “Tlf” -element?
Følg de gitte trinnene for å lage en HTML -inngangstype.
Trinn 1: Opprett inngangsfelt for telefonnummer
I HTML -filen, først, opprette et DIV -element med navnet "hoved-”. Inne i dette divelementet, legg til og elementer. Innenfor etikettelementet, først, nevn bildeteksten og legg deretter til en inngangskode tilknyttet type og navneattributter. Etter det, inkluder en tag med bildeteksten “Sende inn”:
Lagre filen og åpne den i nettleseren din. For øyeblikket vil websiden se slik ut:
Trinn 2: Bruk stiler på inngangsfeltet
La oss bruke stiler på inngangstypen Tel med CSS -egenskaper.
Stil “Main” Div
.hoved
Bakgrunnsfarge: RGBA (0, 0, 0, 0.159);
Maks bredde: 600px;
Margin: 15px Auto;
Høyde: 200px;
Border-Radius: 30px;
“.hoved-”Brukes for å få tilgang til DIV -elementet med klassehoved, og egenskapene som brukes på det er beskrevet nedenfor:
- “bakgrunnsfarge”Eiendom brukes til innstilling av elementets bakgrunnsfarge.
- “Maks bredde”Eiendom brukes til innstilling av elementets maksimale bredde.
- “margin”Eiendom med verdien”15px”Representerer plassen til 15px i toppbunnen, og“bil”Genererer lik plass på venstre høyre side av elementet.
- “høyde”Eiendom brukes til å sette elementets høyde til 200px.
- “Border-Radius”Eiendom brukes til innstilling av elementets bredde til 30px.
Stil “form-main” div
.form-main
Display: Flex;
Justify-Content: Center;
Align-elementer: sentrum;
Høyde: 100%;
Font-størrelse: 24px;
“.form-main”Brukes for å få tilgang til DIV-elementet med klasseform-main. Beskrivelsen av de anvendte egenskapene er nevnt nedenfor:
- “vise”Eiendom med verdien som er“Flex”Vil skape en fleksibel utforming for elementene.
- “Justify-Content”Eiendom brukes til å justere de fleksible gjenstandene horisontalt.
- “Align-elementer”Eiendom brukes til å justere de fleksible varene vertikalt.
- “høyde”Eiendom brukes til innstilling av elementets høyde.
- “skriftstørrelse”Eiendom brukes til innstilling av elementets skriftstørrelse.
Stil “input” av form-main div
.form-main input
grense: 1px fast RGB (47, 63, 63);
polstring: 10px;
Font-størrelse: 22px;
bakgrunnsfarge: RGB (85, 104, 104);
Farge: #FFFFFF;
Oversikt: Ingen;
Form-main-klassen brukes med CSS-egenskaper som er forklart nedenfor:
- “grense”Eiendom brukes med verdien”1px fast RGB (47, 63, 63)”, Der 1px representerer bredden på grensen, solid linetype og RGB (47, 63, 63) representerer fargen.
- “polstring”Eiendom er tilordnet verdien”10px”, Der den første 10px representerer plassen på toppen og bunnen av innholdet, og den andre refererer til 10px -plassen på venstre og høyre side av elementets innhold.
- “skriftstørrelse”Eiendom brukes til å angi skriftstørrelse.
- “bakgrunnsfarge”Eiendom brukes til innstilling av elementets bakgrunnsfarge.
- “farge”Eiendom brukes til å stille inn skriftfargen.
- “skissere”Eiendom med verdien ingen vil fjerne omrisset av inngangsfeltet når det er valgt.
Stil "plassholder" av input
.Form-Main Input :: Placeholder
Farge: #Dadada;
Vi har bare brukt farge på inngangsplassholderen.
Style "-knappen" i form-main
.form-main-knapp
grense: 1px fast RGB (47, 63, 63);
polstring: 10px 20px;
Font-størrelse: 22px;
bakgrunnsfarge: RGB (12, 33, 33);
Farge: #A3A3A3;
Markør: peker;
margin-venstre: 5px;
Overgang: alle 0.3s letthet;
Her er beskrivelsen av de gitte egenskapene:
- “grense”Eiendom brukes med verdien”1px fast RGB (47, 63, 63)”, Der 1px representerer bredden på grensen, solid linetype og RGB (47, 63, 63) representerer fargen.
- “polstring”Eiendom er tilordnet verdien”10px”, Der 10px representerer plassen på toppen og bunnen av innholdet og 10px -plassen på venstre og høyre side av innholdet.
- “skriftstørrelse”Eiendom brukes til å angi skriftstørrelse.
- “bakgrunnsfarge”Eiendom brukes til innstilling av elementets bakgrunnsfarge.
- “farge”Eiendom brukes til å stille inn skriftfargen.
- “markør”Med verdien satt som“peker”Vil endre markøren til en pekende hånd når den plasseres på knappen.
- “margin-venstreEiendom vil sette et rom på 5px til elementets venstre.
- “overgang”Eiendom med verdien som alle 0.3s Ease gjør at elementet kan flyttes gradvis.
Style "-knappen" på svevet
.form-main-knapp: Hopp
Transform: Translatey (-5px);
Ved å gi den ovennevnte koden, genererer utgangsskjermen resultatet som vist nedenfor:
Trinn 3: Legg til "påkrevd" attributt til inngangsfeltet
Det er ofte obligatorisk å legge til et spesifisert mønster av telefonnummeret i våre skjemaer, som kan valideres før skjemainnlevering.
For å gjøre det, “påkrevd”Attributt brukes på en slik måte at hvis en bruker sender inn et tomt inngangsfelt, vil en melding bli generert for å fylle feltet som følger:
Det kan sees fra bildet nedenfor at det å legge inn verdien i inngangsfeltet er obligatorisk:
Trinn 4: Legg til "mønster" attributt til inngangsfeltet
Som vi vet er det ingen valideringsprosedyre for telefonnumre da de varierer fra sted til sted. Mønsterattributtet brukes for spesifikasjonen av telefonnummerets format. Som et resultat kan brukeren bare legge til et telefonnummer i henhold til mønsteret:
La oss gi et feil mønster og se hva som skjer:
Det kan observeres at inngangsfeltet varsler brukeren om å legge inn et nummer som skal samsvare med mønsteret.
Så la oss angi et telefonnummer med riktig mønster, klikk på "Sende inn”Knapp og se hva som skjer:
Kul! Vi har lært hvordan du bruker et inngangselement av typen Tlf.
Konklusjon
For å lage et telefonnummerfelt, kan HTML -inngangstypen Tel brukes. Denne typen kan ha flere attributter for å legge til flere funksjoner som plassholder, mønster, påkrevd og mer. Mer spesifikt brukes mønsterattributtet for å stille inn mønsteret for telefonnummeret, og de nødvendige attributtene begrenser brukeren til å sende inn en ikke-tom verdi. Denne artikkelen har demonstrert HTML -inngangstypen Tel og dens attributter med eksempler.