Når du bygger en formular, bruger du rammeværker eller formularbyggere. Men under motorhjelmen bruger de alle HTML-formularer. Forstår du, hvordan HTML-formularer virker, forstår du alt det andet. Du er ikke afhængig af et bestemt værktøj eller rammeværk. Du kender grundreglerne.
Her gennemgår vi HTML-elementet form, felttyper, labels, validering og hvordan formularer egentlig bliver sendt. Ingen rammeværker. Ingen biblioteker. Bare HTML og de principper, alt andet bygger på.
HTML-elementet form
En formular er et HTML-element, der omslutter formularfelter og sender deres data et sted hen. Den grundlæggende opbygning er:
<form action="/submit" method="POST">
<input type="text" name="email">
<button type="submit">Send</button>
</form>
Tre attributter er vigtige. Attributten action fortæller formularen, hvor data skal hen. "/submit" betyder, at data sendes med POST til endpointet /submit på din server. Er action tom, sendes formularen til den aktuelle side. Attributten method fortæller, hvordan data rejser. POST sender data i selve forespørgslen (sikkert, skjult fra URL'en). GET sætter data på enden af URL'en (usikkert til følsomme data, men nyttigt til søgninger). Attributten enctype skal kun bruges ved upload af filer. Sæt enctype="multipart/form-data", når din formular har et filfelt.
Alt mellem form-tagsene er en del af indsendelsen. Når brugeren klikker på en indsend-knap, samler browseren alle felter med navn og sender dem til action-adressen med den valgte metode.
Felttyper og hvad de gør
text
<input type="text" name="first_name">
Et tekstfelt på én linje. Browseren viser en almindelig tekstboks. Ingen validering. Alle tegn er tilladt.
<input type="email" name="email">
Et felt til e-mailadresser. På computer ligner det et tekstfelt. På mobil viser browseren et tastatur til e-mail. Ved indsendelse tjekker browseren, at værdien ligner en e-mailadresse (indeholder et @). Kun en simpel validering.
password
<input type="password" name="password">
Tekst, der skjules som prikker eller stjerner, mens du taster. Værdien sendes stadig som almindelig tekst, så brug altid HTTPS på formularer med adgangskodefelter.
number
<input type="number" name="age">
På computer et tekstfelt, der kun tager imod tal. På mobil viser browseren et taltastatur. Browseren forhindrer input, der ikke er tal.
date
<input type="date" name="birth_date">
En datovælger. I browsere og på enheder, der understøtter det, åbner et klik på feltet en kalender. Værdien har formatet ÅÅÅÅ-MM-DD.
checkbox
<input type="checkbox" name="agree" value="yes">
Et felt, der kan slås til og fra. Er det afkrydset, sendes feltets værdi ved indsendelse. Er det ikke afkrydset, sendes feltet slet ikke.
radio
<input type="radio" name="plan" value="starter"> Starter
<input type="radio" name="plan" value="pro"> Pro
Flere valgknapper med samme name fungerer som en gruppe. Kun én kan vælges ad gangen. Værdien af den valgte sendes ved indsendelse.
select (rullemenu)
<select name="country">
<option value="us">USA</option>
<option value="ca">Canada</option>
</select>
En rullemenu. Værdien af den valgte mulighed sendes ved indsendelse.
textarea
<textarea name="message"></textarea>
Et tekstfelt med flere linjer. Brugerne kan skrive hele afsnit. Værdien indeholder linjeskift.
file
<input type="file" name="resume">
En knap, der åbner enhedens filvælger. Den valgte fil sendes til serveren. Kræver enctype="multipart/form-data" på form-elementet.
hidden
<input type="hidden" name="user_id" value="12345">
Et felt, der ikke vises, men som sendes ved indsendelse. Nyttigt til data, der skal med, men som brugeren ikke skal ændre.
Labels og tilgængelighed
Giv altid inputfelter en label.
<label for="email">E-mailadresse</label>
<input type="email" id="email" name="email">
Attributten for på labelen skal passe til id på feltet. Når det er gjort rigtigt:
Oplæsningsprogrammer læser label og felt op sammen, et klik på labelen sætter markøren i feltet, og mobilbrugere får et større sted at trykke.
Spring aldrig labels over. Hvis du vil skjule en label visuelt, så skjul den med CSS, men lad den blive i HTML'en. Det kaldes en "visuelt skjult" label.
Gruppér felter, der hører sammen
Til felter, der hører sammen, bruger du fieldset og legend.
<fieldset>
<legend>Leveringsadresse</legend>
<input type="text" name="street">
<input type="text" name="city">
</fieldset>
Elementet legend fortæller oplæsningsprogrammer om gruppen. Fieldsets hjælper med at samle valgknapper og afkrydsningsfelter både visuelt og i opbygningen.
Indsendelse af formularer og HTTP-metoder
Når brugeren klikker på indsend-knappen, samler browseren alle felter med navn, koder data (som standard application/x-www-form-urlencoded), sender en HTTP-forespørgsel til action-adressen med metoden (POST eller GET) og venter på et svar.
Serveren modtager forespørgslen og kan behandle data. Data kommer som nøgle-værdi-par. Er formularens metode POST og action "/submit", ser forespørgslen sådan ud. POST /submit HTTP/1.1 med Content-Type sat til application/x-www-form-urlencoded, og derefter står data som email=user@example.com&name=John.
Serveren læser data og svarer. Er svaret en side, indlæser browseren den. Er svaret en omdirigering, går browseren videre til den nye adresse.
Validering i browseren
HTML har indbyggede attributter til validering. Browseren tjekker dem, før formularen bliver sendt.
required
<input type="text" name="email" required>
Feltet skal have en værdi. Er det tomt, bliver formularen ikke sendt, og browseren viser en fejl.
minlength og maxlength
<input type="password" name="password" minlength="8" maxlength="128">
Værdien skal have et antal tegn mellem de angivne grænser.
min og max
<input type="number" name="age" min="18" max="120">
I talfelter skal værdien ligge inden for intervallet.
pattern
<input type="text" name="zip_code" pattern="[0-9]{5}">
Et regulært udtryk, som værdien skal passe til. Et postnummer på fem cifre passer til [0-9]{5}.
Validering i browseren er en hjælp til brugerne. Den forhindrer dem i at sende ugyldige data og få en fejl fra serveren. Men stol aldrig på den alene, når det gælder sikkerhed. Valider altid også på serveren.
Forskellen på type="submit" og type="button"
<button type="submit">Send</button>
<button type="button">Gem</button>
En knap med type="submit" sender formularen, når man klikker på den. En knap med type="button" gør som standard ingenting. Brug type="button", når du vil koble JavaScript til knappen.
Mange udviklere bruger <button> uden at angive type. Så bliver det som standard type="submit", og det er som regel det, du vil have. Men skriv det ud, så du undgår overraskelser.
Derfor skal du forstå HTML-formularer
Bruger du React, Vue eller Angular, bygger du ovenpå HTML-formularer. Rammeværkerne skjuler detaljerne, men principperne er de samme. En formular sendes stadig til et endpoint. Der skal stadig valideres. Serveren skal stadig håndtere data.
Når noget går i stykker i din formularhåndtering, hjælper det at kende HTML. Du ved, hvor data kommer fra, hvordan de bliver kodet, og hvad serveren skal modtage. Det er fundamentet.
De fleste moderne webapps bruger ikke længere almindelig indsendelse af formularer. De bruger JavaScript til at gribe ind, validere og sende data med _blocked_ eller axios. Men når du kender HTML-måden først, giver de mønstre mening.
Sådan bruger WEMASYs formularbygger de her principper
Med WEMASYs formularbygger slipper du for at skrive HTML selv. Formularerne bygger på de samme grundelementer: labels hører til felterne, og felterne kan være påkrævede. Du kan lave formularer uden at kode.
Se WEMASYs prisside for detaljer om formularfunktioner og muligheder for tilpasning.