Formulär från grunden

Mål

Efter kapitlet ska du kunna...

• bygga ett formulär med form, label och input
• förklara action, method, id, for och name
• använda textarea, select, radio och checkbox
• skicka formuläret med en submit-knapp

Formulärets ram

form samlar fälten

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

• form omsluter fält som hör ihop.
• action anger vart informationen skickas.
• method anger hur informationen skickas.

Testtjänst

Vad är httpbin?

httpbin.org/post tar emot en testförfrågan.

Tjänsten visar tillbaka vilka formulärfält och värden som skickades.

Du kan därför öva utan att först bygga en egen server.

GET och POST

Två vanliga metoder

Kapitlets exempel använder method="post".

Label och input

Beskriv fältet tydligt

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

label berättar för användaren vad som ska skrivas.

Kopplingen

for måste matcha id

Samma värde kopplar etiketten till rätt fält.

När användaren klickar på etiketten aktiveras fältet.

name

Namnet på data som skickas

<input type="text" name="first-name" value="Ada">

Mottagaren får paret first-name=Ada.

Utan name skickas fältets värde normalt inte med.

placeholder

Ett exempel – inte en label

<input type="text" placeholder="Ada">

placeholder visas i fältet innan användaren skriver.

Texten försvinner när användaren börjar skriva.

Använd fortfarande en synlig label.

Textarea

Text på flera rader

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

textarea passar längre svar och meddelanden.

Select

Välj ett alternativ i en meny

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

select skapar menyn. Varje option är ett val.

Radio

Välj exakt ett alternativ

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

Samma name gör att radioknapparna tillhör samma grupp.

Checkbox

Ett oberoende val

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

En kryssruta kan vara av eller på oberoende av andra val.

Radio eller checkbox?

Välj rätt kontroll

Knappar

submit skickar formuläret

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

<button type="button">Visa hjälp</button>

Hela formuläret · del 1 av 2

Textfält och meny

<form action="https://httpbin.org/post" method="post">
  <label for="name">Namn:</label>
  <input type="text" id="name" name="name">

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

Hela formuläret · del 2 av 2

Meddelande och knapp

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

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

Interaktivt exempel

Se vilken data som skickas

Fyll i formuläret och välj Skicka.

Kontrollfråga

Vad skickas inte med?

<input type="text" id="email" value="ada@example.com">

Tänk efter innan du går vidare.

Svar: värdet skickas normalt inte, eftersom fältet saknar name.

Sammanfattning

Kom ihåg

• form samlar fälten; action och method styr skickandet.
• for och id kopplar label till rätt fält.
• name anger namnet på data som skickas.
• Radio används för ett val; checkbox för oberoende val.
• button type="submit" skickar formuläret.