Formelementer i HTML
HTML -formelementene hjelper til med å lage en form med forskjellige funksjonaliteter. Et inngangsskjema inkluderer input, output, knapp, velg, textarea, etikett, datalist, fieldsetetc,. Blant disse er inngangskoden det mest brukte elementet og regnes som kjernedelen av en HTML -form. Mens andre formelementer har sin egen funksjonalitet. Når du viser skjemaelementene, serverer denne artikkelen følgende læringsutbytte.
- Grunnleggende informasjon og bruk av hvert formelement
- Ulike eksempler for hvert element
Formelementer i HTML
Denne delen gir en liste over forskjellige formelementer som har en nøkkelrolle i å generere skjemaer. La oss grave i dem en etter en:
Inngangselement
Dette elementet regnes som kjerneelementet i HTML -skjemaer, og det er ganske umulig å spore en form som ikke inneholder noe inngangselement. Inngangselementets funksjonalitet avhenger av settet med attributter som støttes av dem. For eksempel definerer Type-attributtet typen (tekstboksen, radioknapp, avkrysningsrute) for inngangsfeltet.
Eksempel
Ved å bruke HTML -kode, oppretter følgende kodelinjer et tekstfelt med inngangselementet.
Ved siden av inngangselementet har vi brukt et attributt (plassholder) av inngangselementet.
Produksjon
Utgangen viser at tekstfeltet opprettes ved hjelp av inngangselementet. Som vi har brukt plasseringsattributtet, vises også dummy -teksten i tekstboksen.
Etikettelement
Etikettelementet definerer formålet med forskjellige formelementer til sluttbrukerne. Et etikettelement kan erklæres ved hjelp av følgende syntaks.
Som de fleste av HTML -elementene, er innholdet for etikettelement skrevet mellom taggene.
Eksempel:
Bruken av etikettelementet er utdypet ved hjelp av følgende kode.
En etikett er opprettet for å knytte den til et tekstfelt som får navnet på brukeren. De for attributt (av etikettelement) og ID (av inngangselement) må ha de samme verdiene slik at de kan binde sammen.
Produksjon
Utgangen inneholder en etikett som leder deg til å oppgi navnet ditt i tekstboksen.
Velg element
Select -elementet oppretter en rullegardinliste over forskjellige alternativer. Elementet genererer flere valg i en rullegardinliste.
Eksempel
Følgende kodeutøvelse Select Element for å opprette en rullegardinliste.
Ovennevnte kode er beskrevet som,
- For det første er en etikettlapp erklært (bare for å lede sluttbrukeren).
- SELECT -taggen er definert og den inneholder tre opsjonskode
Produksjon
Utgangen viser en etikett, en rullegardinmeny og en knapp.
TextArea Element
Textarea -elementet lager et tekstfelt som tillater å skrive flere linjer. Selv om inngangselementet kan lage et tekstfelt, men det støtter bare enkeltlinjeinnganger.
Eksempel
Koden som er gitt nedenfor viser bruken av Textarea -elementet
Ovennevnte kode lager en etikett for et tekstfelt og tekstfeltet ved hjelp av Textarea-elementet. Opprinnelig utøves standardhøyden og bredden på Textarea -elementet. Du kan imidlertid bruke høyden og breddeattributtet for å få den tilpassede størrelsen på et tekstarealelement.
Produksjon
Knappelement
En handlingsbar knapp kan opprettes ved hjelp av knappelementet i HTML -skjemaene.
Eksempel
Koden skrevet nedenfor praktiserer knappelementet
Koden skrevet over oppretter to knapper ved å bruke knappelementer.
Produksjon
Feltsetelement
Dette elementet brukes til å gruppere flere elementer i en form til et enkelt felt.
Eksempel
Ovennevnte kode oppretter et feltsett ved hjelp av feltsetelementet i HTML, og bildeteksten er definert ved hjelp av legendelementet. Feltsetelementet inneholder to inngangselementer som får navn og e -post til brukeren.
Produksjon
Datalistelement
Datalistelementet utvider funksjonaliteten til inngangselementet. Datalistelementet gir deg en liste over forhåndsdefinerte oppføringer for å velge oppføringen fra dem (eller du kan også legge inn din egen verdi).
Eksempel
Koden gitt nedenfor praktiserer bruken av datalistelementet
I koden ovenfor,
- En inngangsliste opprettes, og deretter blir datalistelementet erklært
- Inne i datalistelementet brukes taggen til å lage alternativer for datalistelementet.
Produksjon
Utgangselement
Dette elementet brukes til å vise utgangen fra enhver handling (skjemainnlevering).
Eksempel
Følgende kode praktiserer utdanningsattributtet for å få summen av to tallfelt.
I koden ovenfor,
- To inngangstyper = ”Antall”Er definert med ID -er a og b henholdsvis
- de produksjon Element vurderer begge ID -ene for behandling
- de Oninput Hendelse av formelement legger til både nummeret (når de er satt inn)
Produksjon
Ved å gå gjennom denne artikkelen, ville du ha lært å lage en funksjonell HTML -skjema.
Konklusjon
Formelementene er den viktigste interessenten i å lage en detaljert form. Formelementene inkluderer input, etikett, textarea, knapp og mange flere. Denne artikkelen viser skjemaelementene i HTML, og et eksempel på hvert element er også gitt. En enkel HTML -form kan opprettes ved hjelp av noen få formelementer. Imidlertid, hvis du vil ha et skjema med detaljerte funksjoner, blir det gitt mange HTML -formelementer for å øve i denne guiden.