När du bygger ett formulär använder du ramverk eller formulärbyggare. Men under ytan använder alla HTML-formulär. Förstår du hur HTML-formulär fungerar förstår du allt annat. Du är inte beroende av något verktyg eller ramverk. Du kan grunderna.
Den här artikeln går igenom formulärelementet i HTML, inmatningstyper, etiketter, validering och hur formulär faktiskt skickas in. Inga ramverk. Inga bibliotek. Bara HTML och de principer som allt annat bygger på.
Formulärelementet i HTML
Ett formulär är ett HTML-element som omsluter formulärfält och skickar deras data någonstans. Grundstrukturen är:
<form action="/submit" method="POST">
<input type="text" name="email">
<button type="submit">Skicka</button>
</form>
Tre attribut är viktiga. Attributet action talar om vart formuläret skickar data. "/submit" betyder att data postas till slutpunkten /submit på din server. Är action tomt skickas formuläret till den aktuella sidan. Attributet method talar om hur data färdas. POST skickar data i förfrågans kropp (säkert, dolt från webbadressen). GET lägger data i webbadressen (osäkert för känsliga uppgifter, användbart för sökfrågor). Attributet enctype behövs bara för filuppladdning. Ange enctype="multipart/form-data" när formuläret har ett fält för filer.
Allt inom formulärets taggar ingår i inskicket. När användaren klickar på skicka-knappen samlar webbläsaren alla fält med namn och skickar dem till adressen i action med den angivna metoden.
Inmatningstyper och vad de gör
text
<input type="text" name="first_name">
Ett textfält på en rad. Webbläsaren visar en enkel textruta. Ingen validering. Alla tecken är tillåtna.
<input type="email" name="email">
Ett fält för e-postadresser. På dator ser det ut som ett textfält. På mobil visar webbläsaren ett tangentbord för e-post. Vid inskick kontrollerar webbläsaren att värdet ser ut som en e-postadress (innehåller ett @). Bara grundläggande validering.
password
<input type="password" name="password">
Text som döljs som punkter eller asterisker medan du skriver. Värdet skickas ändå som vanlig text, så använd alltid HTTPS i formulär med lösenordsfält.
number
<input type="number" name="age">
På dator ett textfält som bara tar emot siffror. På mobil visar webbläsaren ett numeriskt tangentbord. Webbläsaren hindrar inmatning som inte är siffror.
date
<input type="date" name="birth_date">
En datumväljare. I webbläsare och på enheter som stöder det öppnas en kalender när du klickar på fältet. Värdet formateras som ÅÅÅÅ-MM-DD.
checkbox
<input type="checkbox" name="agree" value="yes">
En ruta som slås på och av. Är den ikryssad skickas fältets värde vid inskick. Är den inte ikryssad skickas fältet inte alls.
radio
<input type="radio" name="plan" value="starter"> Starter
<input type="radio" name="plan" value="pro"> Pro
Flera alternativknappar med samma namn fungerar som en grupp. Bara en kan väljas åt gången. Värdet för den valda skickas vid inskick.
select (rullgardinsmeny)
<select name="country">
<option value="us">USA</option>
<option value="ca">Kanada</option>
</select>
En rullgardinsmeny. Värdet för det valda alternativet skickas vid inskick.
textarea
<textarea name="message"></textarea>
Ett textfält med flera rader. Användare kan skriva hela stycken. Värdet innehåller radbrytningar.
file
<input type="file" name="resume">
En knapp som öppnar enhetens filväljare. Den valda filen skickas till servern. Kräver enctype="multipart/form-data" på formulärelementet.
hidden
<input type="hidden" name="user_id" value="12345">
Ett fält som inte visas men som skickas vid inskick. Användbart för spårningsdata som ska följa med men som användaren inte ska ändra.
Etiketter och tillgänglighet
Para alltid ihop inmatningsfält med etiketter.
<label for="email">E-postadress</label>
<input type="email" id="email" name="email">
Attributet for på etiketten måste matcha id på inmatningsfältet. När du gör det rätt:
Skärmläsare läser upp etiketten och fältet tillsammans, ett klick på etiketten ger fokus till fältet och mobilanvändare får en större yta att trycka på.
Hoppa aldrig över etiketter. Behöver du dölja en etikett visuellt, dölj den med CSS men behåll den i HTML. Det kallas en "visuellt dold" etikett.
Gruppera relaterade fält
För relaterade fält använder du fieldset och legend.
<fieldset>
<legend>Leveransadress</legend>
<input type="text" name="street">
<input type="text" name="city">
</fieldset>
Elementet legend läser upp gruppen för skärmläsare. Fieldset hjälper till att organisera alternativknappar och kryssrutor visuellt och semantiskt.
Inskick av formulär och HTTP-metoder
När användaren klickar på skicka-knappen samlar webbläsaren alla fält med namn, kodar data (som standard application/x-www-form-urlencoded), skickar en HTTP-förfrågan till adressen i action med metoden (POST eller GET) och väntar på ett svar.
Servern tar emot förfrågan och kan behandla data. Data kommer som nyckel-värde-par. Är formulärets metod POST och action "/submit" ser förfrågan ut så här. POST /submit HTTP/1.1 med Content-Type satt till application/x-www-form-urlencoded, därefter visas data som email=user@example.com&name=John.
Servern tolkar data och svarar. Är svaret en sida laddar webbläsaren den. Är svaret en omdirigering går webbläsaren till den nya adressen.
Validering i webbläsaren
HTML har inbyggda attribut för validering. Webbläsaren kontrollerar dem innan formuläret skickas.
required
<input type="text" name="email" required>
Fältet måste ha ett värde. Lämnas det tomt skickas inte formuläret och webbläsaren visar ett fel.
minlength och maxlength
<input type="password" name="password" minlength="8" maxlength="128">
Värdet måste ligga mellan de angivna antalen tecken.
min och max
<input type="number" name="age" min="18" max="120">
För nummerfält måste värdet ligga inom intervallet.
pattern
<input type="text" name="zip_code" pattern="[0-9]{5}">
Ett reguljärt uttryck som värdet måste matcha. Ett postnummer med fem siffror matchar [0-9]{5}.
Validering i webbläsaren är en bekvämlighet för användarna. Den hindrar dem från att skicka ogiltiga data och få ett fel från servern. Men lita aldrig på validering i webbläsaren för säkerhet. Validera alltid på servern också.
Skillnaden mellan type="submit" och type="button"
<button type="submit">Skicka</button>
<button type="button">Spara</button>
En knapp med type="submit" skickar formuläret när den klickas. En knapp med type="button" gör ingenting som standard. Använd type="button" när du vill koppla JavaScript-händelser till den.
Många utvecklare använder <button> utan att ange type. Då blir det type="submit" som standard, vilket oftast är vad du vill. Men var tydlig så undviker du överraskningar.
Därför bör du förstå HTML-formulär
Använder du React, Vue eller Angular bygger du ovanpå HTML-formulär. Ramverk döljer detaljerna, men principerna är desamma. Ett formulär skickas fortfarande till en slutpunkt. Validering måste fortfarande ske. Servern måste fortfarande hantera data.
När något går sönder i din hantering av formulär hjälper kunskap om HTML dig att felsöka. Du vet var data kommer ifrån, hur de kodas och vad servern borde få. Det är grunden.
De flesta moderna webbappar använder inte traditionellt inskick längre. De använder JavaScript för att fånga formuläret, validera det och skicka data med _blocked_ eller axios. Men när du kan HTML-sättet först blir de mönstren begripliga.
Så använder WEMASY:s formulärbyggare de här principerna
Under ytan skapar WEMASY:s formulärbyggare tillgängliga HTML-formulär med just de här elementen. Etiketter paras ihop med fält. Validering sker både i webbläsaren och på servern. Formulärdata skickas säkert. Om du exporterar eller anpassar ett WEMASY-formulär arbetar du med HTML-formulär som bygger på de här grunderna.
Se WEMASY:s prissida för detaljer om formulärfunktioner och anpassning.