Introduktion til HTML-formkontroller

HTML er markeringssproget til oprettelse af webside. Det definerer websidens struktur og opførsel. HTML består af tags og elementer, der hjælper med at strukturere websiderne. Disse elementer kan grupperes sammen i en formular til at indsamle data fra en bruger på en brugervenlig måde. Bemærk dog, at HTML er en statsløs protokol, som betyder, at den ikke kan gemme noget, og at du mister dataene på en sideopdatering.

HTML-formkontrol

Der er forskellige typer formkontrol, der er defineret i HTML, disse kontroller er ansvarlige for at acceptere brugerinput på en specificeret måde. Lad os se på de forskellige typer tilgængelige formkontroller i HTML.

1) Input tekstkontrol

Indgangstekstkontroller bruges til at indsamle brugerdata som en fri tekst. På websiden danner det et rektangelfelt, hvor brugere kan indtaste dataene.

Der er forskellige typer inputtekstkontroller, der kan bruges i HTML-formularerne. Lad os se på de forskellige typer inputtekstkontroller.

  • Enkelt linje Input Text Control

Dette gør det muligt for brugeren kun at indtaste en enkelt linje med data. Et typisk eksempel på sådanne inputtekstkontroller er at indtaste navn, søgefelt, by osv.

  • Multi-line input tekstkontrol

Denne inputkontroltype giver brugeren mulighed for at indtaste data fra flere linjer. Typisk brug af sådanne inputkontroller er til kommentarer, adresser, beskrivelse og så videre.

Her angiver rækker antallet af linjer i tekstområdet, og col angiver antallet af kolonner.

  • Adgangskodeadgangskontrol

Som navnet antyder, bruges dette typisk til adgangskodefeltet. Dette fungerer på samme måde som inputtekstfeltet, men teksten maskeres af sikkerhedsmæssige formål.

2) Input Type Submit

Når indtastningstype er at indsende, udfører den handlingen defineret i formularhandlingen og sender formdata til serveren.

Her overføres brugernavn og adgangskodeværdier til serveren på knapklikningshændelsen af ​​knappen Send. Handlingen i formen er den servermetode, der accepterer input.

3) Indgangstype Radio

Radioknapper bruges, når du forventer, at brugere skal udfylde data som en boolsk værdi, eller du forventer kun en input som sandt ud af flere indstillinger. Nogle tilfælde af almindelig brug af radioknapper er kønsbestemmelse, medarbejdertype (regelmæssig / midlertidig) og så videre.

4) Indtastning afkrydsningsfelt

Et afkrydsningsfelt giver brugeren mulighed for at vælge de oplysninger, der er sande i hans tilfælde. Det er en meget praktisk måde at acceptere dataene på, når den mulige input allerede er kendt.

For eksempel, hvis du ønsker at indsamle den type forsikring, som en person har, kan du let gøre det med afkrydsningsfelterne, da indstillingerne ville være begrænset.

5) rulleliste med inputtype

Rullelisten giver brugeren mulighed for at vælge en mulighed blandt flere mulige indstillinger. Dette er en meget brugervenlig måde at få detaljer fra brugeren, da den giver en udtømmende liste over mulige indstillinger, der hjælper brugeren til at identificere den mulighed, der bedst passer til ham.

F.eks. Rulleliste for at liste ned den by, hvor en medarbejder kan tilhøre

6) Input Type Optgroup

Optgroup fungerer på samme måde som på rullelisten, den eneste forskel er, at optgruppen giver dig mulighed for logisk at gruppere visse indstillinger under en paraply. Det hjælper brugeren med hurtigt at identificere den relevante mulighed ved hjælp af optgroup-etiketten.

For eksempel rullelister for at liste over byerne i de forskellige stater i Indien grupperet efter stater.

7) fieldset

Fieldset er et andet nyttigt tag i Html-formen, der lader udvikleren logisk gruppere bestemte kontroller under én forklaring, dette hjælper udvikleren med at give brugeren en klar instruktion om, hvad de kan forvente i dette afsnit.

F.eks. Feltset til login-siden

8) HTML output-tag

Dette output-tag introduceres i HTML5. Det giver dig mulighed for at vise output fra en beregning med det samme. Dette er meget nyttigt, når brugeren skal foretage en beregning med det samme og se resultaterne. Et typisk eksempel på sådanne tilfælde er, når brugeren ønsker at kontrollere summen af ​​alle de varer, der findes i kurven.

I eksemplet ovenfor har vi defineret varepriskområdet som 0 til 100 og kan ændres på runtime, det andet tekstfelt, der har en værdi 12 i, er den skat, der opkræves for den vare, det kan også ændres på runtime. Outputresultatet 58 er summen af ​​begge værdier.

Bemærk: Dette tag understøttes ikke på Edge 12 eller Internet Explorer af en tidligere version.

9) Inputtype Farve

Det kræves ofte i formen at bare vise farven i stedet for en tekst. Inputtypefarve i HTML 5 giver dig mulighed for at gøre det. Det viser den farve, du vil vise i formen. Typisk scenario, hvor det bruges, er at vise status for et projekt eller en fase.

Bemærk : Farve understøttes ikke i visse versioner af Internet Explorer og Edge.

10) Inputtype Dato

Datatype for input er ofte brugt, hvor et datatypefelt som input forventes af brugeren, det kan være noget som en fødselsdato, ansættelsesdato, opsigelsesdato og så videre. Det introduceres i HTML 5, og datoformatet varierer lidt med ændringen af ​​browser.

Konklusion

  • Med introduktionen af ​​HTML 5 har der været en enorm stigning i antallet af HTML-kontroller, der understøttes. Disse HTML-formkontroller kan få forskellige effekter og farver ved hjælp af CSS 3 og JavaScript / jQuery / Angular JS.
  • I denne artikel har vi dækket alle de ofte anvendte HTML-formkontroller. Der er mange kontroller som skjult, nulstil, uge, URL, tid, e-mail, fil, DateTime-local, image, tel, der ikke er dækket i denne artikel. Det er meget vigtigt at kontrollere browserens kompatibilitet af disse kontroller, før du implementerer dette i projektet, da mange browserversioner ikke understøtter HTML 5-formkontroller.

Anbefalede artikler

Dette har været en guide til HTML-formkontroller. Her diskuterer vi introduktionen og forskellige typer formkontrol, der er defineret i HTML. Du kan også gennemgå vores andre foreslåede artikler for at lære mere -

  1. HTML-attributter
  2. HTML-format tags
  3. HTML stilark
  4. Karriere i HTML
  5. HTML-rammer
  6. HTML-blokke
  7. Html5 Nye elementer
  8. Indstil en baggrundsfarve i HTML med eksempel

Kategori:

Webudviklingsværktøjer