Resultaat oefening 2.2b HTML5 forms

dabblet.css

/**
 * Resultaat oefening 2.2b HTML5 forms
 */

label {
	display: block
}

:invalid {
	background: #ffdddd;
}

dabblet.html

<!-- Een klassiek contactformulier -->

<form>
	<fieldset>
		
		<legend>Contactgegevens</legend>
		
		<label for="name">Naam</label>
		<input type="text" id="name" required>

		<label for="email">Email *</label>
		<input type="email" id="email" required>

		<label for="straat">Straatnaam</label>
		<input type="text" id="straat" placeholder="zonder nummer">

		<label for="nummer">Nummer</label>
		<input type="number" id="nummer" placeholder="alleen het nummer">

		<label for="postcode">Postcode</label>
		<input type="text" pattern="[1-9][0-9]{3}\s?[a-zA-Z]{2} id="postcode">

		<label for="land">Land</label>
		<input type="text" id="land">
		
		<label for="telefoon">Telefoon</label>
		<input type="tel" id="telefoon">
		
	</fieldset>

	<fieldset>
	
		<legend>Voorkeuren</legend>
		
		<label for="kleur">Lievelingskleur</label>
		<input type="color" id="kleur">
		
		<label for="maand">Leukste maand</label>
		<input type="month" id="maand">
		
		<label for="cijfer">Hoe goed is dit ongeveer? (1 tm 10)</label>
		<input type="range" min="1" max="10" id="cijfer">
		
	</fieldset>
</form>

settings.json

{"view":"split-vertical","prefixfree":"1","page":"result"}