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>
 </div>

 <div class="messageBox">
   <label for="message">Request</label><br>
   <textarea id="message" cols="80" rows="8" required
             placeholder="My shoes are too tight, and I have forgotten how to dance."></textarea>
 </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: ":";
}