Html <input> Tag -attributter | Forklart
- Type attributt
- Navnattributt
- Min og maks attributt
- Autofokusattributt
- Deaktivert attributt
- Plassholderattributt
- Readonly attributt
- Påkrevd attributt
- Flere attributter
- Størrelse attributt
- Autoplete attributt
Denne oppskrivningen vil presentere en omfattende oversikt over alle ovennevnte attributter. La oss fortsette!
Type attributt
Som navnet i seg selv antyder typen attributt i taggen, bestemmer inngangstypen, er tekst-verdien av typen attributt tekst. Vi kan tilordne forskjellige verdier til type attributtet som passord, e -post osv. Den grunnleggende syntaks for typeattributtet vises i følgende figur:
Ulike verdier er spesifisert for typeattributtet i taggen. Oppførselen til typeattributtet vil være forskjellig for forskjellige verdier.
Navnattributt
Den spesifiserer navnet på inngangselementet, følgende vil være den grunnleggende syntaks for navnattributtet:
Det vil ikke påvirke utdataene i stedet navnet til navnet forteller serveren om inngangsfeltet.
Min og maks attributt
Disse attributtene brukes til å spesifisere minimums- og maksimumsverdiene for inngangselementet. Synket nedenfor viser syntaksen til Min- og Max -attributtene:
Autofokusattributt
Attributtet for autofokus bestemmer at et element skal få autofokus når siden lastes og figuren nedenfor viser syntaks for autofokusattributt:
Deaktivert attributt
Det funksjonshemmede attributtet lar oss deaktivere et element, i et slikt tilfelle vil bruker ikke kunne bruke eller klikke på det feltet:
Eksempel
La oss vurdere den undergitte koden som implementerer alle de ovennevnte attributtene for forskjellige felt:
Ovennevnte utdrag oppretter flere inngangsfelt, er autofokusattributtet aktivert i det første feltet, så når vi laster inn siden, vil markøren peke på det feltet. Vi ville ikke kunne klikke på det andre feltet fordi det inneholder funksjonshemmede attributt. Det tredje inngangsfeltet er et talltypefelt, og vi spesifiserer Min- og Max -attributter i det, slik at det vil ta verdien mellom bare 20 og 60:
Utgangen verifiserer at alle attributtene opererer ordentlig.
Plassholderattributt
Det gir et hint om den forventede verdien av inngangsfeltet. Den grunnleggende syntaks for plasseringsattributtet vil være som følger:
Alt vi spesifiserer i plassholderen vil vises som et hint som vist nedenfor:
Readonly attributt
Det bestemmer at feltet er skrivebeskyttet, noe som betyr at feltet ikke kan endres. Syntaksen til det skrivebeskyttede attributtet er vist i følgende figur:
Vi spesifiserer verdi = “Michael” og aktiverer den skrivebeskyttede attributtet. Som et resultat ville vi ikke kunne endre verdien av det inngangsfeltet:
Påkrevd attributt
Det nødvendige attributtet bestemmer at skjemaet ikke kan sendes inn hvis inngangsfeltet ikke er fylt. Den grunnleggende syntaks for det nødvendige attributtet vises i følgende utdrag:
Hvis vi klikker på sendeknappen uten å fylle inngangsfeltet, får vi følgende resultat:
Flere attributter
Det lar oss legge inn flere verdier, og den brukes mest med "fil" -inngangstypen der den lar en bruker velge flere filer. Under kodebit viser syntaks for "flere" attributt:
Over utdrag genererer følgende utgang:
Størrelse attributt
Den brukes til å angi størrelsen (bredden) på inngangsfeltet, syntaks for størrelsesattributtet vises i det undergitte utdraget:
Standardstørrelsen på inngangsfeltene er 20 tegn, og vi endret størrelsen på det første inngangsfeltet som 35, så det vil generere følgende utgang:
Autoplete attributt
Aktivering av det autofullføringsattributtet lar en nettleser forutsi og automatisk fullføre inngangsfeltet. Det undergitte utdraget viser hvordan du bruker AutoComplete-attributt i inngangskoden:
Over kodesnippet viser følgende utdata:
Utgangen bekreftet at hvis AutoComplete = “ON”, så foreslår nettleseren de allerede angitte dataene.
Konklusjon
Tag -attributtene brukes til å kontrollere oppførselen til formens inngangsfelt e.g. Type -attributtet bestemmer inngangstypen, AutoFocus -attributtet brukes til å fokusere på det spesifikke elementet på sidelastning. Aktivering av AutoComplete -attributtet gir allerede angitt data som forslag og flere attributter lar oss legge til flere filer. Denne oppskrivningen demonstrerte en detaljert guide for den dype forståelsen av HTML-tag-attributter.