Formulär är det vanligaste sättet att låta användaren mata in data på en webbsajt. Det kan vara så enkelt som ett sökfält eller så komplext som en webbchatt. Sociala media skulle inte kunna finnas utan möjligheten för användare att skriva på sajten, inte heller CMS:er som Wordpress.
Formulären består av element som kallas formulärkontroller. Dessa kan vara knappar, kryssrutor eller fält för användaren att skriva in uppgifter i.
Den data som matas in ska sedan behandlas på något sätt, vilket innebär att formulär ofta används tillsammans med script, korta programfunktioner. Ett bra exempel på detta är åldersspärrar på olika sajter: Användaren matar in sin födelsedag → ett script räknar ut åldern och skickar vidare användaren till en av två alternativa sidor.
Syntax, element och attribut
Elementet som definierar hela formuläret är <form> med sluttaggen </form>. Mellan dessa placeras alla de formulärkontroller som behövs för ditt formulär.
formulärkontroller
Flertalet formulärkontroller skapas med elementet <input> och attributet <type>.
Vanliga <input>-kontroller
<input type="text">
En ruta där användaren kan mata in (kortare) text. I det fall man vill låta användaren skriva in längre texter kan man i stället använda sig av elementet <textarea>, men det fungerar lite annorlunda.
<input type="checkbox">
En kryssruta. Användaren kan kryssa i hur många rutor i ett som helst.
<input type="radio">
Radioknapp. Det är bara möjligt att välja ett alternativ av flera. Användaren måste välja ett av två eller flera alternativ.
För att webbläsaren ska förstå vilka som hör ihop använder du attributet name, med samma värde på de knappar som hör ihop. I exemplet nedan är alla knapparna skrivna: <input name="demo" type="radio">
<input type="submit">
En av de viktigaste kontrollerna i ett formulär, skicka-in-knappen. Kontrollen är en knapp för att skicka in det ifyllda formuläret. Texten i knappen kan du ändra med attributet value
<input type="reset">
En knapp som återställer formuläret till utgångsläget, som det var innan användaren fyllde i det.
Andra vanliga formulärkontroller
<select>
En urvalslista, där användaren väljer mellan en uppsättning färdiga alternativ. För dig som har erfarenhet av programmeringsspråk påminner detta om att arbeta med arrays.
En urvalslista i ett formulär skapas med elementet <select> och sluttaggen </select>. Mellan dessa skapas listan med hjälp av <option>-element.
Vilken ordning alternativen i listan får bestäms med attributet <value>
<textarea> gör en större ruta där användaren kan skriva lite längre texter. Detta är en viktig kontroll på olika sociala medier och onlineeditorer. <textarea> går att manipulera och omforma på många olika sätt med olika attribut och värden. Man kan styra utformning av text, hur mycket eller lite text som kan skrivas och så vidare. Det här exemplet använder bara attributet placeholder för att skriva en liten instruktion. Rutan kan naturligtvis göras betydligt större än i exemplet nedan.
<button>
<button> är bara en knapp. I sig själv gör den ingenting. Den kan användas fritt för att utlösa någon händelse (oftast skriptfunktioner) med hjälp av olika händelseattribut.