Formulieren en pseudo-selectoren

@Work 1

Wat is een formulier

Formulieren en Pseudo-selectoren

Wat is een formulier

Een formulier is 1 van de vaakst voorkomende manieren hoe gebruikers met je website een interactie hebben.

Wat is een formulier

Een formulier laat toe dat de gebruiker data mee geeft aan je website op verschillende manieren.

Typ je als gebruiker ergens iets op een website, dan gebruikt dit in de achtergrond dus een formulier.

Wat is een formulier

Een formulier kan er op ontelbaar veel verschillende manieren gaan uit zien.

Er zijn onder andere:

- invulvelden voor tekst (inputs)

- knoppen (buttons)

- selectie-dropdowns

- Checkboxes

- ...

Wat is een formulier

Meestal is dit een combinatie van formulier elementen:

Wat is een formulier

Input elementen

Formulieren en Pseudo-selectoren

Input elementen

vb: Een formulier met 3 input velden

Contact us

Your Name

Your Email

Message

Input elementen

<label for="name">Your Name:</label>
<input type="text" id="name" name="user_name" />

Stel nu dat je vraagt achter een naam:

Your Name

Input elementen

<label for="name">Your Name:</label>
<input type="text" id="name" name="user_name" />

Het label element is eigenlijk een heel gewoon inline-element.

Your Name

Input elementen

<label for="name">Your Name:</label>
<input type="text" id="name" name="user_name" />

Het input element maakt een plaats waar een gebruiker data kan invullen (to input data).

Your Name

Input elementen

<label for="name">Your Name:</label>
<input type="text" id="name" name="user_name" />

Het "for"-attribuut, linkt het label-element met het juiste input element.

Het label is for het input met id "name"

Your Name

Input elementen

<label for="name">Your Name:</label>
<input type="text" id="name" name="user_name" />

Het name-attribuut is de naam dat je aan deze data heeft.

Een browser gebruikt deze name wanneer je deze data door stuurt.

Your Name

Input elementen

<label for="name">Your Name:</label>
<input type="text" id="name" name="user_name" />

Het name-attribuut is de naam dat je aan deze data heeft.

Een browser gebruikt deze name wanneer je deze data door stuurt.

Your Name

Input elementen

<label for="name">Your Name:</label>
<input type="text" id="name" name="user_name" />

In HTML zijn er verschillende types van inputs. Een naam is in principe tekst, en wanneer je tekst verwacht, kies je voor type="text".

Your Name

Input elementen

<label for="email">Your Email:</label>
<input type="email" id="email" name="user_email" />

Stel dat je een e-mail adres wilt vragen:

Your Email:

Input elementen

<label for="pass">Password</label>
<input type="password" id="pass" name="user_pass" />

Input elementen

<label for="telephone">Tel</label>
<input type="tel" id="telephone" name="user_tel" />

Input elementen

<label for="search">Search</label>
<input type="search" id="search" name="search" />

Input elementen

Meer form elementen

Formulieren en Pseudo-selectoren

Meer form elementen

<label for="message">Message</label>
<textarea id="message" name="message" rows="5" cols="33" />
 It was a dark and stormy night...
</textarea>

Message

Meer form elementen

<form action="/my-handling-form-page" method="post">
  ...
</form>

Wat wilt action zeggen en method.

Meer form elementen

Wat is het verschil nu tussen een <button> en een <a>?

Meer form elementen

Het <a> element maakt een link naar een webpagina, een bestand, email-adres, locatie op de zelfde pagina of om het even wat een url naar toe kan linken.

Al de rest is voor het <button> element

Meer form elementen

Dit wilt ook zeggen dat je hier geen vrije keuze in hebt. Wanneer je een <a> gebruikt, moet deze ook blijven werken als je de javascript disabled in de browser.

Alle andere vormen van interactiviteit gebruik je een button voor.

HTML-validatie

Formulieren en Pseudo-selectoren

HTML-validatie

type
required
min-length max-length
min max
advanced: patterns

HTML-validatie

Required

Hiermee geef je aan of een element verplicht of optioneel (standaard) is

<label for="name">Naam</label>
<input type="text" name="name" id="name" required="required" />

HTML-validatie

min-length & max-length

Hiermee geef je aan of er een min en/of max karakterlengte is voor de waarde

<label for="name">Name</label>
<input type="text" name="name" id="name" minlength="10" maxlength="20" required="required" />

HTML-validatie

min & max

Hiermee geef je aan bij een type="number" of er een numerieke min en/of max waarde is voor de input

<label for="amount">Amount</label>
<input type="number" name="amount" id="amount" min="5" max="100" required="required" />

HTML-validatie

Advanced: pattern

Met een pattern kan je via een regex (regular expression) een eigen regel schrijven (dit is voorlopig niet te kennen)

<label for="email">Email:</label>
<input type="email" id="email" name="email" 
       pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">

Pseudo-element selectoren

Formulieren en Pseudo-selectoren

Pseudo-el selectoren

Form-specifiek

:required

:valid

Algemeen

:first-child

:last-child

:hover

:focus

Pseudo-el selectoren

:focus

input:focus {
  background: red;
}

Pseudo-el selectoren

:required

input:required {
  background: red;
}

Pseudo-el selectoren

:valid

input:valid {
  background: green;
}

input:not(:valid) {
  background: red;
}

Pseudo-el selectoren

:first-child :last-child

li {
  width: 20px;
  height: 20px;
  margin: 1rem;
  list-style-type: none;
  background: hsl(0, 0%, 80%);
}

li:first-child {
  background: green;
}

li:last-child {
  background: orange;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

Formulier pitfalls

Formulieren en Pseudo-selectoren

Formulier pittfalls

Een formulier is meestal ook een bron van frustratie wanneer dit slecht gedesigned is.

- Vraag enkel het hoognodige

- Zorg voor een duidelijke vraagstelling

- Verzorg foutafhandeling

Formulier pittfalls

Vraag enkel de relevante informatie

Formulier pittfalls

Groepeer velden

Formulier pittfalls

Visuele weergave = zelfvertrouwen

Formulier pittfalls

Wees

duidelijk

Formulier pittfalls

Placeholders zijn niet genoeg

Formulier pittfalls

Label de minderheid

Formulier pittfalls

Leg uit waarom je informatie wilt.

Formulier pittfalls

Niet iedereen noemt Bert Desmet

Formulier pittfalls

Maak het niet te complex omdat je het kan

Formulier pittfalls

Maak het niet te complex omdat je het kan

Formulier pittfalls

Audio: Hou het logisch

Formulier pittfalls

Hou het logisch

Formulier pittfalls

Hou het logisch

Formulier pittfalls

Gebruik dus de juiste soort input

Formulier pittfalls

Wees cultureel-inclusief

Formulier pittfalls

Wees gender-inclusief

Formulier pittfalls

Wees gender-inclusief - lees meer

@Work1 - Formulieren en Pseudo-selectoren

By Mathieu S. and Michael V.

@Work1 - Formulieren en Pseudo-selectoren

Formulieren en Pseudo-selectoren

Mathieu S. and Michael V.

The account used for the slides of @work1

@Work1 - Formulieren en Pseudo-selectoren

@Work1 - Formulieren en Pseudo-selectoren

Mathieu S. and Michael V.

More from Mathieu S. and Michael V.