Componenten · 04

Formulieren

Velden voor het Odoo-formulier (.s_website_form): donker paneel, sterke rand en een blauwe focusring.

Contactformulier

Het basisformulier.

Voorbeeld van een formulier zoals in de website builder. Dit formulier verstuurt niets.

Formulier
HTML
<form class="s_website_form" onsubmit="return false" novalidate><div class="row g-3"><div class="col-md-6"><label class="form-label" for="f1">Naam</label><input class="form-control" id="f1" type="text" placeholder="Voor- en achternaam"></div><div class="col-md-6"><label class="form-label" for="f2">E-mail</label><input class="form-control" id="f2" type="email" placeholder="naam@bedrijf.nl"></div><div class="col-md-6"><label class="form-label" for="f3">Telefoon</label><input class="form-control" id="f3" type="tel" placeholder="085 000 0000"></div><div class="col-md-6"><label class="form-label" for="f4">Onderwerp</label><select class="form-select" id="f4"><option>Kies een onderwerp</option><option>Intake</option><option>Support</option></select></div><div class="col-12"><label class="form-label" for="f5">Bericht</label><textarea class="form-control" id="f5" rows="4" placeholder="Waar kunnen we mee helpen?"></textarea></div><div class="col-12"><div class="form-check"><input class="form-check-input" type="checkbox" id="f6" checked><label class="form-check-label" for="f6">Ik ga akkoord met de privacyverklaring</label></div></div><div class="col-12"><button class="btn btn-primary" type="submit">Verstuur aanvraag</button></div></div></form>
States

Focus, validatie, uitgeschakeld.

Focus: brand-500 rand met een ring van 3px (rgba 46,128,255,.22). Validatiekleuren komen uit de statustokens (success/danger).

Veldstaten
Ziet er goed uit.
Vul een geldig e-mailadres in.
HTML
<form class="s_website_form" onsubmit="return false" novalidate><div class="row g-3"><div class="col-md-4"><label class="form-label">Standaard</label><input class="form-control" placeholder="Placeholder"></div><div class="col-md-4"><label class="form-label">Focus (klik erin)</label><input class="form-control" value="Getypte tekst"></div><div class="col-md-4"><label class="form-label">Uitgeschakeld</label><input class="form-control" value="Niet te wijzigen" disabled></div><div class="col-md-6"><label class="form-label">Geldig</label><input class="form-control is-valid" value="naam@bedrijf.nl"><div class="valid-feedback">Ziet er goed uit.</div></div><div class="col-md-6"><label class="form-label">Ongeldig</label><input class="form-control is-invalid" value="naam@"><div class="invalid-feedback">Vul een geldig e-mailadres in.</div></div></div></form>
Keuzes en groepen

Checks, radio, schakelaar, input-group.

Keuzecontroles
HTML
<form class="s_website_form" onsubmit="return false"><div class="row g-4"><div class="col-md-4"><div class="form-check"><input class="form-check-input" type="checkbox" id="c1"><label class="form-check-label" for="c1">Checkbox</label></div><div class="form-check"><input class="form-check-input" type="checkbox" id="c2" checked><label class="form-check-label" for="c2">Aangevinkt</label></div></div><div class="col-md-4"><div class="form-check"><input class="form-check-input" type="radio" name="r" id="r1" checked><label class="form-check-label" for="r1">Optie een</label></div><div class="form-check"><input class="form-check-input" type="radio" name="r" id="r2"><label class="form-check-label" for="r2">Optie twee</label></div></div><div class="col-md-4"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="s1" checked><label class="form-check-label" for="s1">Schakelaar</label></div></div></div></form>
Input-group en bestand
HTML
<form class="s_website_form" onsubmit="return false"><div class="row g-3"><div class="col-md-6"><label class="form-label">Zoeken</label><div class="input-group"><span class="input-group-text"><svg class="atlas-icon " width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex-shrink:0;"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg></span><input class="form-control" placeholder="Zoek op trefwoord"></div></div><div class="col-md-6"><label class="form-label">Bijlage</label><input class="form-control" type="file"></div></div></form>