Formulär

Formulär är ett centralt verktyg för att samla in användardata och skicka den till en server för bearbetning. De består av olika formulärelement som gör det möjligt för användare att mata in data. I denna kurs kommer vi dock inte att skicka någon data till en server eftersom det kräver ytterligare kunskaper utanför kursens omfattning.

Alla exempel i koden har attributet onsubmit="return false". Detta attribut förhindrar att formuläret skickar en begäran till servern som standard.

Skapa formulär

Använd taggen <form> för att skapa ett interaktivt formulär.

<form>
  <!-- Form elements go here -->
</form>

Formelement

Formulär innehåller etiketter och olika inmatningstyper (text, lösenord, e-post, etc.). Etiketter kopplar text till inmatningsfält och förbättrar tillgängligheten. Mer information om etiketter och inmatningstyper ges i kommande kapitel.

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" placeholder="Your username" />
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" placeholder="********" />
</form>

Formulärinlämning

Ett formulär skickas in med en knapp med type="submit".

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" placeholder="Your username" />
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" placeholder="********" />
  <button type="submit">Submit</button>
</form>

Här är ett grundläggande formulärexempel.