Pattern validation
by KevinGabbert
HTML
<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email -->
<form>
<div class="emailBox">
<label for="emailAddress">Your e-mail address</label><br>
<input id="emailAddress" type="email" size="64" maxLength="64" required
placeholder="[email protected]" pattern="[email protected]"
title="Please provide only a Best Startup Ever corporate e-mail address">
</div>
<input type="submit" value="Send Request">
</form>
CSS
body {
font: 16px sans-serif;
}
.emailBox {
padding-bottom: 20px;
}
.messageBox {
padding-bottom: 20px;
}
label {
line-height: 22px;
}
label::after {
content: ":";
}