Skjemaer defineres ved bruk av form-elementet. Alle elementer innenfor form tilhører da det aktuelle skjemaet.
<form> … </form>
I det innledende <form>-elementet forventes attributtet action. Dette angir til slutt hva som skal skje med skjemadataene. Vanligvis dreier det seg om en PHP-applikasjon.
<form method="post" action="form.php"> … </form>
Sørg for at den angitte filen faktisk kan bli funnet. Derfor må du sette riktig bane.
I stedet for et skript kan du for øvrig også oppgi en e-postadresse.
<form method="post" action=mailto:kontakt@psd-tutorials.de method="post" enctype="text/plain"> … </form>
I dette tilfellet blir skjemadata sendt per e-post. Dette er imidlertid ikke spesielt elegant, derfor blir nesten alltid skriptversjonen brukt. Men hvis du ikke har et skript for hånden, kan du fortsatt sende skjemaet per e-post i nødstilfeller.
En annen viktig attributt for form-elementet er method. Dette angir HTTP-overføringsmetoden for sending av skjemainnhold. Det er to ulike alternativer tilgjengelig.
• post = Skjemadataene sendes her i to trinn til den angitte adressen. Først kontakter nettleseren den angitte adressen. Når det er vellykket, sendes skjemadataene til skriptet.
• get = Med denne metoden legges skjemadataene til slutten av URL-en som er tildelt action-attributtet. Skjemadataene vises dermed blant annet i nettleserens adressefelt.
Naturligvis er spørsmålet hvilken av disse to alternativene som bør brukes for sending av skjemadata. Prinsipielt kan begge brukes. Men spesielt når det gjelder store datamengder og opplasting av filer til serveren, bør du imidlertid velge post.
Enkle skjemafelter
Hittil har bare den ytre strukturen til skjemaet blitt definert. I nettleseren er det imidlertid ennå ikke synlig noe av selve skjemaet.
<form method="post" action="form.php"> … </form>
Nå er det på tide å fylle skjemaet med innhold/liv.
Den mest vanlige felttypen som trengs er et enlinjes inntastingsfelt. Dette brukes for eksempel til å be om navn, etternavn og e-postadresser. Enlinje inntastingsfelt defineres slik:
<input type="text" name="fornavn" />
Til input-elementet tilordnes attributtverdikombinasjonen type="text". I tillegg bør du gi hvert inntastingsfelt en intern identifikator. Denne identifikatoren må være unik i dokumentet. Den er spesielt interessant når det gjelder behandling av skjemadata med skript. Unngå å bruke mellomrom og spesialtegn i identifikatoren din.
Hvis du ser resultatet i nettleseren, vil det se slik ut:
Det ser ikke spesielt imponerende ut ennå. Men hvis du klikker i tekstfeltet, vil du merke at du allerede kan skrive inn der.
For at besøkende skal vite hva de skal legge inn i feltet, mangler naturligvis etiketten.
Fornavn: <input type="text" name="fornavn" />
Også her gir en titt i nettleseren det ønskede resultatet.
Med attributtet size kan du bestemme feltenes bredde.
Fornavn: <input type="text" name="fornavn" size="30" /> <br /> Postnummer: <input type="text" name="postnr" size="5" />
Attributtet size tilordner ønsket bredde til feltet.
I denne sammenheng tilsvarer 5 nøyaktig fem tegn. I denne sammenheng er også attributtet maxlength interessant. Dette angir den maksimale tillatte mengden tegn som kan skrives inn i feltet. Her er et eksempel:
Fornavn: <input type="text" name="fornavn" size="30" maxlength="40" />
Hvis verdien angitt ved maxlength er større enn verdien ved size, vil det automatisk skrollene i feltet for lengre innganger.
Ved hjelp av attributtet value kan du oppnå en forhåndsutfylling av feltet.
Fornavn: <input type="text" name="fornavn" value="Ditt navn" />
Den verdien som er tilordnet til value, skal betraktes som en forhåndsutfylling i feltet.
Brukerne kan slette denne forhåndsutfylte verdien.
Forresten kan man forhindre at verdier slettes fra feltene. Man definerer et inndatafelt som i virkeligheten ikke er et inndatafelt i det hele tatt. Slike felt brukes ofte til utdata. Dette kan for eksempel være interessant for å vise verdier som er beregnet av skript. Tenk for eksempel på en kalkulator. Man kan også manuelt forhåndsutfylle et felt med en tekst som ikke kan endres av besøkende. (Merk: Eurotegnet vises dessverre ikke riktig i PDF-visning).
<input name="pris" type="text" value="€ 699.-" readonly />
For å sette et felt til bare-lese, tilordner man attributtet readonly til det. Igjen, se resultatet:
Den forhåndsdefinerte teksten vises direkte. Imidlertid kan den ikke slettes.
Definere passordfelt
Dere kjenner sikkert passordfelt. Overalt der dere registrerer dere, må dere oppgi et passord. (Vanligvis må man til og med skrive det inn to ganger).
De dataene som er skrevet inn i inndatafeltet, er ikke synlige, men blir automatisk erstattet med stjerner/prikker av nettleseren. Fordelen med denne varianten er at personer som kanskje ser over skulderen deres når de skriver inn passordet, ikke kan dekode passordet. Det er imidlertid en feiloppfatning at passordfelt automatisk er trygge. Faktisk blir passordene overført i klartekst ved vanlig HTTP når skjemaet sendes.
Passordfelt defineres slik:
<input type="password" name="passord" />
Attributtet type er tildelt verdien password. Igjen, se resultatet her.
Når dere skriver noe der, blir det gjort ulesbart av nettleserne direkte mens dere skriver.
