HTML Forms

WEB ESSENTIALS

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

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

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

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

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

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

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

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

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;
}

7. HTML Forms

By Lecturer GDM

7. HTML Forms

Block & inline boxes. The content box sizing. Padding, margin, border & Margin. Sizing Unites, box backgrounds & Styling the visual box.

7. HTML Forms

More from Lecturer GDM