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 från användaren. I denna kurs kommer vi dock inte att skicka någon data till en server, eftersom det kräver ytterligare kunskap 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

Taggen <form> används för att skapa ett interaktivt formulär på en webbsida. Den innehåller olika formulärelement för användarinmatning.
Exempel:

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

Formulärelement

HTML tillhandahåller olika inmatningstyper för att samla in användarinformation. Varje typ har specifika attribut och beteenden. Vi kan även ange etiketter för varje inmatning. Etiketter används för att koppla text till formulärelement, vilket ger en mer tillgänglig och användarvänlig upplevelse. Vi kommer att diskutera etiketter och inmatningar mer ingående i kommande kapitel.
Exempel:

<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

Formulärinlämning utlöses av en skicka-knapp (<button type="submit">), som kan skicka formulärdata till servern för bearbetning.
Exempel:

<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.

Videohandledning