HTML Forms

WEB ESSENTIALS

Wat is een form?

Wat is een form?

Met een formulier kan je data verzamelen van een gebruiker.

  • De info wordt via het formulier verstuurd naar een server

  • De data wordt vaak verzameld in een database

Wat is een form

Contactpagina's, inlogschermen, winkelmandjes... maken vaak gebruik van forms.

Wat is een form

Contactpagina's, inlogschermen, winkelmandjes... maken vaak gebruik van forms.

Forms in html

We leren in dit vak hoe je een formulier kan toevoegen aan je website met HTML en hoe je het opmaakt met CSS.

We leren (nog) niet hoe je de data uit het formulier kan verzamelen.

Form tag

Form tag

De <form> tag gebruik je om een form te plaatsen

  • Tweeledige tag die de volledige inhoud van het formulier omsluit
  • Een lege <form> tag toont niets in de browser, maar semantisch belangrijk om aan te geven dat de inhoud een formulier is
<form>
   <label for="username">Username:</label>
   <input type="text" id="username" name="username">
</form>

Form tag attributen

De form tag heeft geen verplichte attributen, toch is het een best practice om de volgende attributen mee te geven:

  • Method: De manier van verzenden
  • Action: Naar waar moet de data verstuurd worden
<form method="post" action="script.php">
   <label for="username">Username:</label>
   <input type="text" id="username" name="username">
</form>

Method attribuut

Geeft aan hoe de info naar de server gestuurd wordt. Je kan twee waardes meegeven:

  • get (standaard)
  • post
<form action="script.php" method="post">
   <label for="username">Username:</label>
   <input type="text" id="username" name="username">
</form>

Method: get

Bij "get" worden de gegevens in de URL meegestuurd

  • Gebruik je voor zoeken, filteren, navigeren
  • Je kunt de URL opslaan of delen (denk aan Google zoekresultaten)
  • Niet veilig voor gevoelige informatie zoals wachtwoorden
<form action="/zoekresultaten" method="get">
  <input type="text" name="zoekterm">
  <button type="submit">Zoeken</button>
</form>

Method: post

Stuurt data mee in een HTTP request

  • Gebruik je voor formulieren met gevoelige of grote data
  • Gegevens zijn niet zichtbaar in de URL
<form action="script.php" method="post">
  <input type="text" name="gebruikersnaam">
  <input type="password" name="wachtwoord">
  <button type="submit">Inloggen</button>
</form>

Action attribuut

Bepaalt waar de gegevens van het formulier naartoe worden gestuurd wanneer de gebruiker op "Submit" klikt.

  • Je kan een url meegeven of bijv. een php script
<form action="/zoekresultaten" method="get">
  <input type="text" name="zoekterm">
  <button type="submit">Zoeken</button>
</form>

Input tag

Input tag

Uiteraard moet een gebruiker zaken kunnen invullen op het formulier. Met de <input> tag maak je verschillende soorten invulvelden aan.

  • Zelfsluitende tag
  • Via het type-attribuut geef je aan hoe het veld eruit moet zien
<form>
   <input type="text">
</form>

Type attribuut

Hiermee geef je mee welk soort invulveld moet verschijnen. Er zijn enorm veel soorten velden, een volledig overzicht vind je hier.

We zien kort de belangrijkste:

  • text
  • email
  • url
  • password
  • search
  • number
  • range
  • date
  • file
  • checkbox
  • radio
  • ...

type="text"

Maakt een normaal tekstveld aan

<form>
   <input type="text">
</form>

type="email"

Maakt een tekstveld waar een e-mail adres ingevuld moet worden

  • Dit tekstveld geeft een foutmelding als er geen e-mail staat
  • =automatische validatie
<form>
   <input type="email">
</form>

type="url"

Maakt een tekstveld waar een url ingevuld moet worden

  • Dit tekstveld geeft een foutmelding als er geen url staat
<form>
   <input type="url">
</form>

type="password"

Een tekstveld waar de karakters automatisch verborgen worden

<form>
   <input type="password">
</form>

type="search"

Wordt gebruikt voor zoekopdrachten.
Ziet eruit als een gewoon tekstveld, maar browsers kennen hier extra functionaliteiten aan toe.

<form>
   <input type="search">
</form>

type="number"

Maakt een veld aan waar je enkel getallen kan invullen. Je kan instellingen meegeven via de attributen:

  • min: minimum waarde
  • max: maximum waarde
  • step: met hoeveel de waarde stijgt
<form>
   <input type="number" min="0" max="10" step="1" />
</form>

type="range"

Toont een slider om een waarde te kiezen tussen 2 punten

  • min: minimum waarde
  • max: maximum waarde
  • step: met hoeveel de waarde stijgt
<form>
   <input type="range" min="0" max="10" step="1" />
</form>

type="date"

Toont een kalender met date picker

<form>
   <input type="date"/>
</form>

type="file"

Toont een button om een bestand te uploaden

<form>
   <input type="file"/>
</form>

type="radio"

Radiobuttons gebruik je om de gebruiker één optie te laten kiezen

  • De gebruiker kan maar één optie aanvinken
  • Er zal altijd één optie geselecteerd blijven

type="radio"

  • Via het value attribuut geef je mee welke waarde de radiobutton heeft (maar je moet wel nog tekst toevoegen met een label)
  • Groepeer meerdere radiobuttons door ze hetzelfde name attribuut te geven
<form>
  <p>Please select your favorite Web language:</p>

  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label>
</form>

type="checkbox"

Bij checkboxes kan de gebruiker meerdere opties aanvinken

  • De gebruiker kan de checkbox ook weer uitvinken

type="checkbox"

  • Via het value attribuut geef je mee welke waarde de checkbox heeft (maar je moet wel nog tekst toevoegen met een label)
  • Groepeer meerdere checkboxes door ze hetzelfde name attribuut te geven
<form>
  <p>Selecteer transportmogelijkheden:</p>

  <input type="checkbox" id="bike" name="transport" value="bike">
  <label for="bike">I have a bike</label>
  <input type="checkbox" id="car" name="transport" value="car">
  <label for="car">I have a car</label>
</form>

Label tag

Label tag

Via de <label> tag kan je een verklarende tekst toevoegen voor een bepaald input veld. Zo weet de gebruiker welke data hij moet invoeren.

  • Tweeledige tag waar je de tekst van het label tussen plaatst
<form>
  <label>Naam</label>
  <input type="text"/>
</form>

Label en inputveld linken

Om het label en het inputveld aan elkaar te linken, moeten we enkele attributen meegeven:

  • Het label krijgt een for-attribuut met een waarde
  • Het inputveld krijgt een id-attribuut met dezelfde waarde
<form>
  <label for="naam">Naam</label>
  <input type="text" id="naam" />
</form>

Als het label gelinkt is met het inputveld dan kan je op het input veld klikken op het inputveld te selecteren of te activeren (=gebruiksvriendelijkheid!)

Label en inputveld linken

Een tweede manier is om het label element rond het inputveld te plaatsen. Toch geef je best nog de juiste attributen mee.

<label for="naam">
  <span>Naam</span>
  <input type="text" id="naam" />
</label>
<form>
  <label for="naam">Naam</label>
  <input type="text" id="naam" />
</form>

Optie 1:

Optie 2:

Textarea tag

Textarea tag

De <textarea> tag gebruik je om een groot stuk tekst in te geven.

  • Tweeledige tag
  • Gebruik de attributen ‘cols’ en ‘rows’ om de breedte en hoogte in te stellen (niet verplicht)
  • Plaats tekst tussen de tags als je al tekst wil invullen in het veld
<form>
  <textarea rows="4" cols="50">
    Once upon a time...
  </textarea>
</form>

Select tag

Select tag

De <select> tag gebruik je om een dropdownlist te maken

  • Elke optie in de dropdown plaats je binnen <option> tags
  • Met het value-attribuut geef je de waarde mee die verstuurd wordt
<form>
  <select>
    <option value="LR">Linde</option>
    <option value="SVP">Sjouwke</option>
    <option value="DP">Dieter</option>
    <option value="MN">Mark</option>
    <option value="JL">Jannes</option>
    <option value="PDPW">Phillipe</option>
  </select>
</form>

Select tag

Via de <optgroup> tag kan je ook je data binnen de select box groeperen als je dat wil

<form>
  <select>

    <optgroup label="Designers">
      <option value="Linde">Linde</option>
      <option value="Sjouwke">Sjouwke</option>
    </optgroup>
    
    <optgroup label=Developers>
      <option value="Dieter">Dieter</option>
      <option value="Mark">Mark</option>
      <option value="Jannes">Jannes</option>
      <option value="Phillipe">Phillipe</option>
    </optgroup>

  </select>
</form>

Attributen

Attributen

We zagen al enkele attributen die je kan toevoegen op het input element

  • id: geeft een uniek id aan een inputveld
  • name: de naam die naar de server wordt gestuurd
  • value: om al een waarde in te stellen (het veld in te vullen)
<form>
  <label for="voornaam">Voornaam:</label>
  <input 
    type="text" 
    id="voornaam" 
    name="voornaam" 
    value="Jan"
  >
</form>

Meer attributen

Je kan de inhoud sturen of beperken met bepaalde attributen:

  • required: om een verplicht veld aan te geven
  • spellcheck: Spellingscontrole aan/uitzetten
  • disabled: Het veld kan niet ingevuld worden
  • minlength/maxlength: minimum/maximum aantal karakters
<form>
  <label for="voornaam">Voornaam:</label>
  <input type="text" id="voornaam" name="naam" required />

  <label for="username">Gebruikersnaam:</label>
  <input
	type="text"
	id="username"
    name="gebruikersnaam"
    minlength="3"
    maxlength="20" />
</form>

Nog meer attributen

  • placeholder: om de gebruiker een voorbeeld te geven van wat je best invult in het veld
  • Autofocus: Bij het laden van de pagina staat de cursor al klaar in dit veld zodat de gebruiker meteen kan beginnen invullen
<form>
  <label for="opleiding">
    Welke opleiding volg je?
  </label>
  <input
    type="text"
    id="opleiding"
    name="opleiding"
    placeholder="Digitale Vormgeving"
    autofocus
  />
</form>

Fieldset & legend

Fieldset & legend

Heb je een lang formulier met verschillende onderdelen en tussentitels? Gebruik dan de fieldset & legend tag

  • <fieldset>: tweeledige tag om een sectie aan te maken
  • <legend>: tweeledige tag om een tussentitel toe te voegen

Fieldset & legend

<form>
 <fieldset>
   <legend>Wat is je favoriete vak?</legend>
   <div>
     <input type="radio" name="opties" id="optieA">
   	 <label for="optieA">UI/UX design 1</label>
   </div>
   <div>
     <input type="radio" name="opties" id="optieB">
   	 <label for="optieB">Web Essentials</label>
   </div>
   <div>
     <input type="radio" name="opties" id="optieC">
   	 <label for="optieC">Desing Essentials</label>
   </div>
 </fieldset>
</form>

🤓 Tip

Je kan de rand van de fieldset
weghalen in css met border: none en padding: 0

Submit button

Submit button

Om het formulier te versturen moet er nog een button aanwezig zijn, die kan je op twee manieren toevoegen:

<input type="submit" value="Verzenden" />
<button type="submit">Formulier versturen</button>

🤓 Tip

De button-tag heeft de voorkeur!

Voorbeeld volledig formulier

<form action="/contact" method="POST">
  <label for="naam">Volledige naam:</label>
  <input type="text" id="naam" name="naam" required />
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required />
  
  <label for="onderwerp">Onderwerp:</label>
  <select id="onderwerp" name="onderwerp">
    <option value="vraag">Vraag</option>
    <option value="klacht">Klacht</option>
    <option value="compliment">Compliment</option>
  </select>
  
  <label for="bericht">Bericht:</label>
  <textarea id="bericht" name="bericht" rows="5" required></textarea>
  
  <label for="nieuwsbrief">
    <input type="checkbox" id="nieuwsbrief" name="nieuwsbrief" />
    Ik wil de nieuwsbrief ontvangen
  </label>
  
  <button type="submit">Bericht versturen</button>
</form>

Formulier stylen
in css

Inline vs. block

De meeste tags die we voor formulieren gebruiken zijn inline elementen. Dat wil zeggen dat ze naast automatisch naast elkaar geplaatst worden. 

  • Inline: <input>, <textarea>, <select>, <label>, <button>
  • Block: <form>

Inline vs. block

Wanneer we onze velden en labels onder elkaar willen plaatsen, kunnen we in css de inline elementen omzetten in block-elementen

label, input {
  display: block;
  width: 100%;
}

Selectoren

Om specifieke input velden te selecteren, kunnen we gebruik maken van attribute selectors:

input[type="text"],
input[type="password"]{
  width: 100%;
  display: block;
  padding: .5rem;
  border: 1px solid hsl(0 0% 60%);
}

Selectoren

Om de verschillende states van een inputveld op te maken kunnen gebruik maken van pseudo-class selectoren

  • :checked Voor check/radio elementen die aangevinkt zijn
  • :enabled Stel een stijl in voor elementen met de status ‘enabled’
  • :disabled Stel een stijl in voor elementen met de status ‘disabled’
  • :valid Stel een stijl in wanneer het element valid is
  • :invalid Stel een stijl in wanneer het element invalid is.
  • :required Stel een stijl in voor elementen die required zijn.
  • :focus Stel een stijl in voor elementen die focus hebben.

Selectoren

Om de verschillende states van een inputveld op te maken kunnen gebruik maken van pseudo-class selectoren

input:focus {
  background-color: lightblue;
}