Home-theater-designers
Innsamling av data fra en nettstedbruker kan gjøres på flere forskjellige måter. Skjemaer på nettsteder kan ha en enkel funksjon som å abonnere en bruker på et nyhetsbrev, eller et mer komplekst formål som å fungere som et jobbsøknadsskjema.
Imidlertid er en ting som alle disse enkle til komplekse formene har til felles, HTML og nærmere bestemt HTML stikkord.
Bruk av skjemaetiketten
De tag er et HTML -element som brukes som en beholder for å omslutte andre elementer som kan betraktes som byggesteiner for skjemaer. Noen av disse grunnleggende elementene inkluderer tag, den tag, og stikkord.
De tag har en viktig egenskap som bidrar til funksjonaliteten. Dette attributtet kalles handling og brukes til å identifisere filen som dataene som ble lagt inn i skjemaet, skal sendes til.
Bruke merkeeksemplet
Eksemplet ovenfor viser hvordan du bruker skjemaetiketten i prosjektene dine. En av de viktigste takeaways er at hvis du åpner en skjemaetikett, bør du huske å lukke den. Dette vil opprette en skjemastruktur og også sikre at dataene som er lagt inn i skjemaet, blir behandlet riktig.
Bruke taggen
De tag brukes til å beskrive dataene i hvert inndatafelt i et skjema. Denne taggen har en til attributt, som brukes til å forbedre et skjemas funksjonalitet.
I slekt: De beste gratis online HTML -redaktørene for å teste koden din
Hvis id -en som er tilordnet det tilsvarende inndatafeltet, samsvarer med til verdi i tag, vil det inndatafeltet automatisk bli markert når du klikker på etiketten.
Bruke merkeeksemplet
First Name:
I eksemplet ovenfor kan du se at til attributtet er tilordnet verdien fnavn . Derfor, hvis du oppretter et inndatafelt med fnavn id, vil dette feltet bli markert hver gang du klikker på Først Navn merkelapp.
Bruke taggen
I sin mest grunnleggende form, tag kan sees på som en tekstboks. De tag fanger data fra brukeren, og en av de mer avgjørende funksjonene er type Egenskap. De type attributt angir hvilken type data denne tekstboksen kan samle inn.
I slekt: Hvordan lage et stablet skjema i CSS
Det er flere forskjellige verdier du kan tilordne type attributt, men noen av de mer populære er som følger.
- Tekst
- Nummer
- E -post
- Bilde
- Dato
- Avmerkingsboks
- Radio
- Passord
Bruke taggen Eksempel
First Name:
De taggen i koden ovenfor har tre forskjellige attributter som hver har en unik funksjon. De type attributt er tildelt en tekstverdi som betyr at tekstboksen bare godtar tegn.
De id attributt er en unik identifikator for tekstboksen, og den er viktig fordi den gir tilgang til dette elementet fra en CSS -fil. De Navn attributt er også en unik identifikator; navneattributtet brukes imidlertid til å samhandle med et element fra serversiden av utviklingen.
De id og Navn attributter tildeles vanligvis samme verdi som den ene gir tilgang til et element fra klientsiden og den andre fra serversiden.
Bruke avkrysningsbokselementet
Avmerkingsbokselementet er veldig unikt i forhold til de andre elementene du kan bruke med stikkord. Den lar en bruker velge ett eller flere alternativer fra en liste over relaterte valg. Avmerkingsbokser identifiseres lett fordi de er representert med små firkantede bokser som inneholder en sjekk når de er valgt.
Bruke avkrysningsbokselementeksemplet
Programming Languages:
Java
JavaScript
Python
I eksemplet ovenfor har hver av avmerkingsbokselementene et verdiattributt, og dette er viktig fordi det hjelper å skille hvert avmerkingsboksalternativ fra samlingen. Derfor, hvis en bruker velger 'Java' fra alternativene ovenfor, vil dataene gjenspeile det.
Bruk av taggen og radioelementene
De tag og radioelementene er like i den forstand at de bare tillater en bruker å velge en enkelt verdi om gangen; derfor kan man si at de har samme funksjon. Imidlertid er de veldig forskjellige i utseende.
Radioelementet er nærmere avmerkingsbokselementet i utseende, men med radioelementet har du sirkler i stedet for firkanter.
De tag produserer det som egentlig er en nedtrekksboks, som lar en bruker velge en enkelt verdi.
Bruk eksempelet Tag and Radio Element
Sex:
Male
Female
Other
Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer
Bruk av datoelementet
Datoelementet produserer en liten tekstboks som genererer en kalender når den klikkes. Ved hjelp av Dato som inndatatype i skjemaene dine, sikrer du mot at en bruker potensielt angir en feil dato, noe som potensielt kan føre til innsamling av feilaktige data.
Bruke eksempel på datoelement
Bruke e -post- og passordelementet
Når en utvikler tilordner enten e -post- eller passordverdiene til typeattributtet til en tag, produserer de hver en identisk tekstboks. Imidlertid blir forskjellene tydelige når du begynner å bruke disse boksene.
E -postelementet overvåker dataene som er lagt inn i tekstboksen og sikrer at hver innsending oppfyller standardkravet til en e -postadresse; som betyr å ha en lokal del, etterfulgt av @ -symbolet, og slutte med et domene.
Bruke eksempel på e -postelement
I eksemplet ovenfor blir du introdusert for et nytt attributt kalt plassholder , og dette attributtet tar en tekstverdi som vises i tekstboksen i falmet grått. Denne teksten brukes til å indikere dataene som skal plasseres i tekstboksen som vist i eksemplet ovenfor.
Passordelementet gjør tegn til stjerner når de legges inn i tekstboksen. Derfor, hvis dataskjermen er synlig for andre mennesker, vil de ikke se passordet du skriver inn.
Bruk eksempel på passordelement
Bruke knappemerket
I et skjema er det vanligvis to forskjellige typer knapper. Den første er send -knappen, som sender dataene som er lagt inn i skjemaet til verdien som er tilordnet handlingsattributtet (som ligger i < skjema> stikkord).
Send inn eksempeleksempel
Submit
Den andre typen knapp som vanligvis brukes i et skjema, er en tilbakestillingsknapp, som sletter dataene i et skjema, slik at brukeren kan legge inn ferske data. De taggen har en type attributt, som brukes til å indikere funksjonen til knappen. I eksemplet ovenfor type attributt er tilordne verdien sende inn derfor en knapp som har en type verdien av nullstille brukes til å tilbakestille skjemaet.
Tilbakestill knapp Eksempel
Reset
Opprette et skjema
For å lage et enkelt skjema i HTML må du legge ved alle elementene nevnt ovenfor i a stikkord.
Opprette et skjemaeksempel
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
Koden ovenfor gir følgende skjema:
hvorfor kalles det en smurfkonto
Nå kan du lage et enkelt skjema i HTML
Denne artikkelen gir deg alle verktøyene for å lage et funksjonelt HTML -skjema. Den identifiserer de forskjellige HTML -taggene som brukes i skjemaopprettelse, og utforsker de forskjellige attributtene som kan brukes med disse kodene.
Imidlertid har de fleste skjemaene du ser på nettsteder en ekstra komponent; CSS, som brukes til å bringe formen til live og gjøre den mer estetisk tiltalende.
Dele Dele kvitring E -post Essential CSS3 Properties Cheat SheetMestre essensiell CSS -syntaks med juksearket til CSS3 -egenskapene våre.
Les neste Relaterte temaer- Programmering
- HTML
- Webutvikling
- Opplæringsprogrammer for koding
Kadeisha Kean er en fullstabel programvareutvikler og teknisk/teknologisk forfatter. Hun har den særegne evnen til å forenkle noen av de mest komplekse teknologiske konseptene; produsere materiale som lett kan forstås av enhver nybegynner i teknologi. Hun brenner for å skrive, utvikle interessant programvare og reise verden rundt (gjennom dokumentarer).
Mer fra Kadeisha KeanAbonner på vårt nyhetsbrev
Bli med i vårt nyhetsbrev for tekniske tips, anmeldelser, gratis ebøker og eksklusive tilbud!
Klikk her for å abonnere