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 möjliggör datainmatning. 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 kodexempel 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>

Formulärelement

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. Du kommer att lära dig mer om etiketter och inmatningstyper 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.