Inngangstyper i HTML

HTML -skjemaer brukes til å ta innspill fra brukeren og for å gjøre det et skjema bruker forskjellige inngangsmerker. Med enkle ord er HTML -formene ufullstendige uten stikkord. De Tagger kan brukes i skjema -taggen for å deklarere inngangskontrollene som lar en bruker legge inn dataene på forskjellige måter som å samle inn data ved hjelp av tekstfelt, rullegardinlister osv.

Denne oppskrivningen presenterer en fullstendig oversikt over følgende inngangstyper:

1. Tekst
2. Sende inn
3. E -post
4. Passord
5. Knapp
6. Radio
7. Avkrysningsrute
8. Fil
9. Farge
10. Dato
11. Tid
12. DATETIME-LOCAL
13. Uke
14. Måned
15. Tlf

Denne oppskrivningen vil presentere en komplett guide for alle ovennevnte inngangstyper, så la oss komme i gang!

Type tekst

Teksttypen bestemmer et enkeltlinjetekstfelt.

Eksempel
Det gitte utdraget oppretter et inngangsfelt for teksttype innenfor en skjema tag:

Navn

Ovennevnte kodebit vil generere utdataene noe slikt:

Utgangen verifiserer at inngangsfeltet tar teksttype -data.

Skriv inn innsending

Send typeknappen sender skjemaets data til URL som er spesifisert i taggen.

Eksempel
Underbukken nedenfor viser hvordan innsendingstype fungerer:

Navn

Sende inn

Ovennevnte kode spesifiserer en URL for en HTML -fil i skjemakoden, dessuten oppretter den en knapp og et tekstfelt. Hvis du klikker på sendeknappen, vil du sende dataene som er lagt inn innen tekstfeltet til skjemaer.html side.

Før vi klikker på knappen er vi på Formattributter.html Side, så utdataene fra ovennevnte kodebit vil være slik:

Hvis du klikker på knappen, vil du vise de bruker-leggede dataene på skjemaer.html side:

Slik fungerer sendeknappen i HTML.

Skriv e -post

Det brukes til å ta e -postadressen til brukeren, og hvis noen legger inn de irrelevante dataene, vil ikke e -posttypen sende inn disse dataene:

E -post

Sende inn

Følgende vil være utdataene fra denne koden:

Skriv inn passord

Passordetypen brukes til å bestemme et passordfelt:

Passord

Ovennevnte kode produserer følgende utgang:

Skriveknapp

Den brukes til å opprette en klikkbar knapp:

Ovennevnte kodelinje viser først følgende utdata:

Type radio

Den brukes til å opprette en alternativknapp som lar en bruker velge ett alternativ ut av flere alternativer:

Front-end


Baksiden

Ovennevnte kode vil gi følgende utdata:

Skriv inn avkrysningsruten

Avkrysningsruten Type brukes til å opprette en avkrysningsrute som lar en bruker velge en enkelt eller flere alternativer:

Jeg er en frontendutvikler


Jeg er en back end utvikler

Ovennevnte utdrag viser følgende utgang:

Utgangen autentiserer arbeidet med avmerkingsboksen.

Filtype

For å legge ved en fil på et nettsted kan filinngangstypen brukes:

Velg en fil:

Opprinnelig viser den “Ingen fil valgt”:

Når en bruker velger en fil, vises filnavnet "Velg Fil" alternativ:

Fargetype

Denne inngangstypen brukes til å lage en fargelukker. Den som standardverdi er imidlertid svart, en bruker kan velge en farge ved hjelp av RGB -fargeverdier:

Velg en farge

Ovennevnte kode gir følgende utdata:

Å klikke på fargen vil vise vil tillate en bruker å velge en farge etter eget valg:

Datatype

Det brukes til å opprette et datatypefelt som lar en bruker velge en dato:

Velg en dato

Følgende vil være utdataene for ovennevnte kodebit:

En bruker kan velge en dato som følger:

Tidstype

Det brukes til å lage et tidstypefelt som lar en bruker velge en tid. Tidsinngangstypen kan implementeres på samme måte som datatypen:

Velg en tid

Opprinnelig vil kodelinjene ovenfor gi følgende utdata:

En bruker kan velge en tid etter eget valg:

DATETIME-LOCAL

Den kan brukes til å spesifisere dato og tid samtidig:

Velg en dato og tid

Utgangen fra ovennevnte kodebit vil se slik ut:

En bruker kan velge både dato og tid samtidig som vist nedenfor:

Uke

Det brukes til å velge en uke, vil utdraget nedenfor gi en bedre forståelse:

Velg en uke

Det undergitte utdraget viser utdataene fra kodelinjer:

Måned

Det brukes til å velge en måned, beskriver kodebiten nedenfor arbeidet med månedens inngangstype:

Velg en måned

Utgangen fra overgitt utdrag vil se slik ut:

Tel -type

Det brukes til å ta et telefonnummer fra brukeren. Vi kan spesifisere et spesifikt mønster som må følges. Underbukken nedenfor viser arbeidet med Tel -inngangstype:

Tast inn ditt telefonnummer:

Hvis noen legger inn et irrelevant mønster, vil en advarsel vises for å oppgi det forespurte formatet:

Utgang verifiserer at “Tlf” Inngangstypen fungerer som den skal.

Konklusjon

Taggen gir inputkontroller for å godta dataene fra brukeren på forskjellige måter. I HTML kan forskjellige inngangstyper brukes til å ta innspill fra brukeren, for eksempel tekst, e -post, passord, knapp, sende inn og mange flere. Alle disse inngangstypene kommer med forskjellige funksjonaliteter. Denne artikkelen gir en omfattende oversikt over noen mest brukte inngangstyper og vurderte flere eksempler for bedre forståelse.