<form>
  <!-- Case insensitive binary choice -->
  <div>
    <label for="item1">Would you prefer a banana or a cherry?</label>
    <input id="item1" pattern="[Bb]anana|[Cc]herry">
  </div>

  <!-- Email validation -->
  <div>
    <label for="item2">What's your e-mail?</label>
    <input id="item2" type="email" name="email">
  </div>

  <!-- Max length validation -->
  <div>
  <label for="item3">Leave a short message</label>
  <textarea id="item3" name="msg" maxlength="140" rows="5"></textarea>
  </div>

  <!-- Numeric + Symbol pattern as required field -->
  <div>
  <label for="item4">Phone Number (format: xxxx-xxx-xxxx):</label><br/>
  <input id="item4" type="tel" pattern="^\d{4}-\d{3}-\d{4}$" required >
  </div>

  <button type="submit">Submit</button>
</form>

body {
  font-family: monospace;
  
}

button {
  background-color: wheat;
  padding: .5em;
  border: none;
}

form {
  width: 50%;
  display: block;
  margin: 0 auto;
}

input,
textarea {
  width: 100%;
  margin-bottom: 1em;
}