Style formularen med accentfarve, tydelige felter, en knap og en farve til fejlbeskederne.
<form>
<label for="nickname">Nickname</label>
<input id="nickname" name="nickname" type="text" value="PixelPanda">
<p class="error-message">Skriv et nickname</p>
<label for="portfolio">Portfolio</label>
<input id="portfolio" name="portfolio" type="url" value="https://example.com">
<p class="error-message">Skriv en gyldig URL</p>
<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>
<label for="hype">Hype-niveau</label>
<input id="hype" name="hype" type="range" min="0" max="100" value="60">
<label for="guidelines">
<input id="guidelines" name="guidelines" type="checkbox" value="accepted" checked>
Jeg accepterer eventets retningslinjer
</label>
<p class="error-message">Du skal acceptere retningslinjerne</p>
<button>Lav event-pass</button>
</form>
Anbefalede styles
form {
accent-color: /* farve */;
}
button {
cursor: pointer;
}