Business cases
### Voorbeeld: HTML/CSS/JS Code (basis)
```html
<form id="slim-formulier" novalidate>
<fieldset>
<legend>Persoonlijke gegevens</legend>
<div class="form-group">
<label for="naam">Volledige naam*</label>
<input type="text" id="naam" name="naam" required aria-describedby="naam-help">
<small id="naam-help">Vul je voor- en achternaam in.</small>
</div>
<div class="form-group">
<label for="email">E-mailadres*</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="telefoon">Telefoonnummer</label>
<input type="tel" id="telefoon" name="telefoon" pattern="[0-9]{10}">
</div>
</fieldset>
<fieldset>
<legend>Voorkeuren</legend>
<div class="form-group">
<label>
<input type="checkbox" name="nieuwsbrief" value="ja">
Ik wil de nieuwsbrief ontvangen
</label>
</div>
</fieldset>
<button type="submit">Verzenden</button>
</form>
<style>
.form-group {
margin-bottom: 1rem;
}
label {
display: block;
margin-bottom: 0.5rem;
font-weight: bold;
}
input, button {
padding: 0.5rem;
font-size: 1rem;
}
input:invalid {
border-color: #ff6b6b;
}
</style>
<script>
document.getElementById('slim-formulier').addEventListener('submit', function(e) {
e.preventDefault();
if (this.checkValidity()) {
alert('Bedankt voor je aanmelding!');
} else {
alert('Vul alle verplichte velden correct in.');
}
});
</script>
### Voorbeeld: HTML/CSS/JS Code (basis)
“`html