Modul 2

Kap 2.3 - Formulär från grunden

Formulär låter användaren skriva, välja och skicka information.

Mål

  • Bygga ett enkelt formulär med form, label och input.
  • Förstå vad action, method, id, for och name gör.
  • Använda textfält, textarea, select, radio, checkbox och knappar.

Formulärets ram

form samlar de fält som hör ihop. action anger vart informationen skickas. method anger hur den skickas. I vanliga HTML-formulär används ofta GET eller POST.

I exemplet används https://httpbin.org/post. Httpbin är en testtjänst som tar emot en HTTP-förfrågan och visar tillbaka vad som skickades. Den används här eftersom du kan öva på formulär utan att först bygga en egen server. När du skickar formuläret kan du se vilka fält som följde med, till exempel värdena från name-attributen.

<form action="https://httpbin.org/post" method="post">
    ...
</form>

Label och input

En användare behöver veta vad ett fält betyder. Koppla därför label och input med for och id.

<label for="first-name">Förnamn:</label>
<input type="text" id="first-name" name="first-name" placeholder="Ada">

Så visas fältet i webbläsaren

label visar texten Förnamn: för användaren. placeholder="Ada" visar ett exempel i fältet innan användaren skriver något.

I den riktiga koden hör for="first-name" och id="first-name" ihop. Det gör att labeln kopplas till rätt fält.

name är namnet som skickas med formulärdata. Utan name blir fältet ofta oanvändbart för mottagaren.

Textarea och select

<label for="message">Meddelande:</label>
<textarea id="message" name="message" rows="5"></textarea>

<label for="topic">Ämne:</label>
<select id="topic" name="topic">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
</select>

Så visas textarea och select i webbläsaren

textarea används när användaren ska kunna skriva flera rader text.

select skapar en meny där användaren väljer ett alternativ. Varje option är ett val i menyn.

Radio och checkbox

Radioknappar passar när användaren ska välja ett alternativ. Kryssrutor passar när flera val kan vara aktiva.

<label><input type="radio" name="level" value="beginner"> Nybörjare</label>
<label><input type="radio" name="level" value="advanced"> Van</label>

<label><input type="checkbox" name="html" value="yes"> Jag vill lära mig HTML</label>

Så visas radio och checkbox i webbläsaren

Radioknappar med samma name hör ihop. Därför kan användaren bara välja ett av alternativen Nybörjare och Van.

En checkbox kan vara av eller på. Den passar när ett val kan göras oberoende av andra val.

Knappar

button type="submit" skickar formuläret. Senare kan button type="button" kopplas till JavaScript utan att skicka formuläret.

<button type="submit">Skicka</button>

Så visas knappen i webbläsaren

I den riktiga koden står type="submit". Det betyder att knappen försöker skicka formuläret den ligger i.

I exemplet här är knappen satt till type="button" så att du kan se och klicka på den utan att sidan försöker skicka något.