Sådan opretter du en formular i HTML

Sådan opretter du en formular i HTML

Indsamling af data fra en webstedsbruger kan gøres på flere forskellige måder. Formularer på websteder kan have en simpel funktion som f.eks. At abonnere en bruger på et nyhedsbrev eller et mere komplekst formål som at fungere som en ansøgningsskema.





En ting, som alle disse enkle til komplekse former har til fælles, er HTML og mere specifikt HTML tag.



Brug af formularen

Det tag er et HTML -element, der bruges som en beholder til at omslutte andre elementer, der kan betragtes som byggesten til formularer. Nogle af disse grundlæggende elementer omfatter tag, den tag, og tag.





Det tag har en vigtig attribut, der bidrager til dets funktionalitet. Denne attribut kaldes handling og bruges til at identificere den fil, som dataene, der er indtastet i formularen, vil blive videregivet til.

Brug af mærkeeksemplet





Eksemplet ovenfor viser, hvordan du bruger formtagget i dine projekter. En af de vigtigste takeaways er, at hvis du åbner et formulartag, skal du huske at lukke det. Dette vil oprette en formularstruktur og også sikre, at de data, der er indtastet i formularen, behandles korrekt.



Brug af mærket

Det tag bruges til at beskrive dataene i hvert inputfelt i en form. Dette mærke har en til attribut, som bruges til at forbedre formularens funktionalitet.

Relaterede: De bedste gratis online HTML -redaktører til at teste din kode



Hvis id'et, der er tildelt det tilsvarende inputfelt, matcher til værdi i tag, så vil dette inputfelt automatisk blive fremhævet, når du klikker på etiketten.

Brug af mærkeeksemplet


First Name:

I eksemplet ovenfor kan du se, at til attribut tildeles værdien fnavn . Derfor, hvis du opretter et inputfelt med fnavn id, vil dette felt blive fremhævet hver gang du klikker på Først Navn etiket.



Brug af mærket

I sin mest grundlæggende form, tag kan ses som en tekstboks. Det tag fanger data fra brugeren, og en af ​​dens mere afgørende funktioner er type attribut. Det type attribut angiver, hvilken type data denne tekstboks kan indsamle.

Relaterede: Sådan opretter du en stablet formular i CSS

Der er flere forskellige værdier, som du kan tildele til type attribut, men nogle af de mere populære er som følger.

  • Tekst
  • Nummer
  • E -mail
  • Billede
  • Dato
  • Afkrydsningsfelt
  • Radio
  • Adgangskode

Brug af mærket Eksempel


First Name:

Det tag i koden ovenfor har tre forskellige attributter, der hver har en unik funktion. Det type attribut er tildelt en tekstværdi, hvilket betyder, at tekstboksen kun accepterer tegn.

Det id attribut er en unik identifikator for tekstboksen, og den er vigtig, fordi den giver adgang til dette element fra en CSS -fil. Det navn attribut er også en unik identifikator; navneattributten bruges imidlertid til at interagere med et element fra serversiden af ​​udviklingen.

Det id og navn attributter tildeles normalt den samme værdi som den ene giver adgang til et element fra klientsiden og den anden fra serversiden.

Brug af afkrydsningsfeltet

Afkrydsningsfeltelementet er meget unikt i forhold til de andre elementer, du kan bruge med tag. Det giver en bruger mulighed for at vælge en eller flere muligheder fra en liste over relaterede valg. Afkrydsningsfelter identificeres let, fordi de er repræsenteret af små firkantede felter, der indeholder en markering, når de er markeret.

Brug af afkrydsningsfeltelementeksemplet


Programming Languages:
Java
JavaScript
Python

I eksemplet ovenfor har hvert af afkrydsningsfeltelementerne en værdiattribut, og dette er vigtigt, fordi det hjælper med at skelne hver afkrydsningsfeltindstilling fra samlingen. Derfor, hvis en bruger vælger 'Java' fra indstillingerne ovenfor, vil dataene afspejle det.

Brug af mærket og radioelementerne

Det tag og radioelementerne er ens i den forstand, at de kun tillader en bruger at vælge en enkelt værdi ad gangen; derfor kan man sige, at de har den samme funktion. De ser imidlertid meget forskellige ud.

Radioelementet er tættere på afkrydsningsfeltelementet i udseende, men med radioelementet har du cirkler i stedet for firkanter.

Det tag producerer det, der i det væsentlige er en rulleliste, som giver en bruger mulighed for at vælge en enkelt værdi.

Brug af mærke- og radioelementeksempel


Sex:

Male
Female
Other


Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer

Brug af datoelementet

Datoelementet producerer en lille tekstboks, der genererer en kalender, når der klikkes på den. Ved brug af dato som inputtype i dine formularer sikrer mod, at en bruger potentielt indtaster en forkert dato, hvilket potentielt kan føre til indsamling af fejlagtige data.

Brug af eksempel på datoelement


Brug af e -mail- og adgangskodeelementet

Når en udvikler tildeler enten e -mail- eller adgangskodeværdierne til typeattributten for en tag, producerer de hver en identisk tekstboks. Men når du begynder at bruge disse kasser, bliver forskellene tydelige.

E -mailelementet overvåger de data, der er indtastet i tekstboksen, og sikrer, at hver indsendelse opfylder standardkravet for en e -mail -adresse; hvilket betyder at have en lokal del efterfulgt af @ -symbolet og slutte med et domæne.

Brug af e -mailelementeksemplet


I eksemplet ovenfor introduceres du til en ny attribut kaldet pladsholder , og denne attribut tager en tekstværdi, der vises i tekstboksen i falmet grå. Denne tekst bruges til at angive de data, der skal placeres i tekstboksen, som det ses i eksemplet ovenfor.

Kodeordselementet gør tegn til stjerner, når de indtastes i tekstboksen. Derfor, hvis din computerskærm er synlig for andre mennesker, kan de ikke se den adgangskode, du indtaster.

Brug af kodeordselementeksemplet


Brug af knapmærket

I en form er der normalt to forskellige typer knapper. Den første er knappen Send, som sender dataene, der er indtastet i formularen, til den værdi, der er tildelt handlingsattributten (som er placeret i < form> mærke).

Send knapeksempel

Submit

Den anden type knap, der normalt bruges i en formular, er en nulstillingsknap, som sletter dataene i en form, så brugeren kan indtaste friske data. Det tag har en type attribut, som bruges til at angive knappens funktion. I eksemplet ovenfor type attribut er tildele værdien Indsend derfor en knap, der har en type Værdi af Nulstil bruges til at nulstille formularen.

Nulstil knapeksempel

Reset

Oprettelse af en formular

For at oprette en simpel form i HTML skal du vedlægge alle de ovennævnte elementer i en tag.

Oprettelse af et formulareksempel






Forms








First Name:

Last Name:




Date of birth:

Age:




Gender:

Male
Female
Other

Email Address:




Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer



Programming Languages:
Java
JavaScript
Python



Password:

Confirm Password:



Submit
Reset




Ovenstående kode frembringer følgende formular:

hvad er skaberfonden på tiktok

Nu kan du oprette en simpel formular i HTML

Denne artikel giver dig alle værktøjer til at oprette en funktionel HTML -form. Den identificerer de forskellige HTML -tags, der bruges til oprettelse af formularer, og undersøger de forskellige attributter, der kan bruges med disse tags.

De fleste formularer, du ser på websteder, har imidlertid en ekstra komponent; CSS, som bruges til at bringe formen til live og gøre den mere æstetisk tiltalende.

Del Del Tweet E -mail Essential CSS3 Properties Cheat Sheet

Behersk essentiel CSS -syntaks med vores CSS3 egenskaber snydeblad.

Læs Næste Relaterede emner
  • Programmering
  • HTML
  • Web-udvikling
  • Kodning Tutorials
Om forfatteren Kadeisha Kean(21 artikler udgivet)

Kadeisha Kean er en softwareudvikler i fuld stak og teknisk/teknologisk forfatter. Hun har den særlige evne til at forenkle nogle af de mest komplekse teknologiske begreber; producerer materiale, der let kan forstås af enhver nybegynder i teknologi. Hun brænder for at skrive, udvikle interessant software og rejse rundt i verden (gennem dokumentarfilm).

Mere fra Kadeisha Kean

Abonner på vores nyhedsbrev

Tilmeld dig vores nyhedsbrev for at få tekniske tips, anmeldelser, gratis e -bøger og eksklusive tilbud!

Klik her for at abonnere