Du trenger et kontaktskjema på nettsiden. Besøkende skal kunne skrive inn navn, e-post og en melding, og sende det av gårde med en knapp. Hele greia tar under 20 linjer HTML, men det er noen detaljer som avgjør om skjemaet faktisk fungerer ordentlig. Et HTML skjema bygges med form-elementet, og inni det plasserer du inputfelt, labels og en submit-knapp.
Form-elementet: startpunktet for ethvert HTML-skjema
Alt starter med <form>. Dette elementet forteller nettleseren at innholdet inni er et skjema som kan sendes. Alene gjør form-elementet ingenting synlig på siden, men det grupperer alle feltene og bestemmer hva som skjer når brukeren trykker send.
Form har en action-attributt som peker til adressen dataen skal sendes til. Den har også en method-attributt som bestemmer hvordan dataen sendes (vanligvis "GET" eller "POST"). Hva som faktisk skjer med dataen på serveren, er JavaScript- og backend-territorium. I ren HTML setter du bare opp strukturen.
Label og input: parene som gjør skjemaet brukbart
Et skjemafelt består alltid av to deler: en <label> som beskriver feltet, og en <input> der brukeren skriver. Disse to må kobles sammen. Det gjør du ved å gi input-elementet en id, og sette den samme verdien i label-elementets for-attributt.
Koblingen mellom label og input er ikke bare pynt. Når de er koblet, kan brukeren klikke på teksten i labelen for å sette fokus i feltet. Skjermlesere bruker koblingen til å fortelle blinde brukere hva hvert felt er til. Dropper du denne koblingen, fungerer skjemaet dårligere for alle.
En vanlig struktur er å pakke hvert label-input-par i en <div>. Det gir deg en boks rundt hvert felt som du kan style med CSS senere. Uten denne innpakningen legger nettleseren feltene rett etter hverandre på samme linje.
Input-typer: text, email og mer
type="text" gir deg et vanlig tekstfelt. Det er standardverdien, så hvis du glemmer å sette type, får du et tekstfelt uansett. Men det finnes bedre alternativer for spesifikke typer data.
type="email" ser ut som et vanlig tekstfelt på desktop, men gjør to ting ekstra. På mobil får brukeren et tastatur med @-tegnet lett tilgjengelig. Og nettleseren validerer automatisk at verdien inneholder et @-tegn. Brukeren får en feilmelding hvis de prøver å sende skjemaet uten gyldig e-post. Du trenger ikke skrive en eneste linje JavaScript for dette.
Det finnes mange flere input-typer: number, tel, date, password og url, for å nevne noen. Hver type tilpasser tastaturet på mobil og legger til innebygd validering. Bruk riktig type, så gjør nettleseren mye av jobben for deg.
Textarea: for lengre tekst
Input-elementer er laget for korte verdier som navn og e-postadresser. Når brukeren trenger å skrive flere linjer, bruker du <textarea> i stedet. Textarea er et eget element, ikke en input-type. Det betyr at du skriver <textarea></textarea>, ikke <input type="textarea">.
Textarea kobles til en label på nøyaktig samme måte som input: for-attributten på labelen matcher id-attributten på textarea. Du kan sette rows-attributten for å bestemme hvor mange linjer feltet viser som standard. Brukeren kan fortsatt skrive mer tekst enn det, og feltet blir scrollbart.
Name-attributten: slik vet serveren hva som er hva
Hvert felt i skjemaet trenger en name-attributt. Uten name sendes ikke verdien med når skjemaet submittes. Det er en feil mange gjør, og den er vanskelig å oppdage fordi alt ser riktig ut i nettleseren.
Når skjemaet sendes, pakker nettleseren dataen som nøkkel-verdi-par. Name er nøkkelen, og det brukeren skrev inn er verdien. Et skjema med feltene "username" og "user-email" sender for eksempel username=Espen&user-email=espen@test.no. Serveren bruker name-attributten til å vite hvilket felt som er hvilket.
En god navnekonvensjon er å bruke beskrivende, korte navn med bindestrek. Unngå mellomrom og spesialtegn. Hold deg til det som er lesbart for en utvikler som skal lese dataen på serversiden.
Button: send-knappen
Skjemaet trenger en knapp for å sende dataen. Du bruker <button>-elementet. Som standard har en button inne i et form-element type="submit", som betyr at den sender skjemaet. Du kan skrive teksten på knappen mellom start- og slutt-taggen.
Noen guider bruker <input type="submit"> i stedet for button. Begge fungerer, men button-elementet er mer fleksibelt fordi du kan ha HTML inni det (for eksempel et ikon ved siden av teksten). Button er den moderne standarden.
Bygg et kontaktskjema steg for steg
Et komplett kontaktskjema bruker alt du har lært. Du starter med form-elementet, legger til et label-input-par for navn (type="text"), et for e-post (type="email"), en textarea for meldingen, og en button for å sende. Hvert felt har en unik id koblet til sin label, og en name-attributt som identifiserer dataen.
Rekkefølgen du plasserer feltene i HTML er rekkefølgen de vises på siden. Det er også rekkefølgen brukeren tabber gjennom med tastaturet. Sett de viktigste feltene først. I et kontaktskjema er det typisk navn, deretter e-post, deretter melding, og til slutt send-knappen.
For en komplett referanse over alle attributter og inputtyper er MDN Web Docs sin form-dokumentasjon det beste stedet å slå opp.
Neste steg
Nå som du kan bygge et grunnleggende HTML-skjema med form, input og label, er neste steg å lære de ulike felttypenene som gjør skjemaet mer avansert. I artikkelen om avmerkingsbokser (checkbox) lærer du å la brukere velge flere alternativer. Vil du heller gi brukere et enkeltvalg, kan du lese om radioknapper. Du finner alle artiklene om skjema samlet på skjema-oversikten.
Denne artikkelen bygger på en videoleksjon fra HTML-kurset på Utdannet.no. I kurset bygger du skjema fra bunnen av, kobler labels til inputfelt, og lærer alle de vanligste input-typene med praktiske eksempler du kan følge steg for steg.
