Einfaches Kontaktformular mit Validierung
HTML
<form>
<div>
<label>Name (Pflichtfeld):</label>
<input name="name" type="text" required>
</div>
<div>
<label>E-Mail (Pflichtfeld):</label>
<input name="mail" type="email" required>
</div>
<div>
<label>Nachricht</label>
<textarea name="nachricht" required></textarea>
</div>
<div>
<button>Absenden</button>
</div>
</form>
CSS
body {
font-family: Verdana, sans-serif;
font-size: 13px;
}
label {
display: block;
margin-bottom: 5px;
}
div {
margin-bottom: 10px;
}
:required {
border: 2px solid #a20000;
background-color: rgba(162,0,0,0.25)
}
/* Das geht leider nicht! */
:required + label {
font-weight: bold;
color: #a20000;
}