Brug grid til formular og feltgrupper. Brug flex til labels med radio-knapper og checkbox.
<form>
<div class="form-group">
<label for="nickname">Nickname</label>
<input id="nickname" name="nickname" type="text" value="PixelPanda">
<p class="error-message" id="nickname-error">Skriv mindst to tegn</p>
</div>
<div class="form-group">
<label for="portfolio">Portfolio (valgfrit)</label>
<p id="portfolio-hint">Brug en fuld URL, fx https://example.com</p>
<input id="portfolio" name="portfolio" type="url" value="https://example.com">
<p class="error-message" id="portfolio-error">Skriv en gyldig URL</p>
</div>
<div class="form-group">
<fieldset>
<legend>Hvad håber du at få med hjem?</legend>
<label for="inspiration">
<input id="inspiration" name="reason" type="radio" value="inspiration" checked>
Inspiration
</label>
<label for="tools">
<input id="tools" name="reason" type="radio" value="tools">
Praktiske værktøjer
</label>
<label for="network">
<input id="network" name="reason" type="radio" value="network">
Nye kontakter
</label>
</fieldset>
<p class="error-message" id="reason-error">Vælg én mulighed</p>
</div>
<div class="form-group">
<label for="hype">Hype-niveau</label>
<input id="hype" name="hype" type="range" min="0" max="100" value="60">
</div>
<div class="form-group">
<label for="guidelines">
<input id="guidelines" name="guidelines" type="checkbox" value="accepted">
Jeg accepterer eventets retningslinjer
</label>
<p class="error-message" id="guidelines-error">Du skal acceptere retningslinjerne</p>
</div>
<button>Lav event-pass</button>
</form>
Anbefalede styles
form,
.form-group {
display: grid;
gap: /* ... */;
}
label:has(input:is([type="radio"], [type="checkbox"])) {
display: flex;
align-items: center;
}